1. 程式人生 > >進擊的JavaScript小白(五)——物件

進擊的JavaScript小白(五)——物件

說我是單身狗的那人真逗,程式設計師誰還沒個物件了,分分鐘new一個,我還能new兩個,呵,顫抖吧,凡人!

一、物件簡介

1、物件的作用

用於同時儲存多個數據

2、宣告方式

var obj = new Object();
var obj = {}; 

3、物件的屬性操作

① 屬性:物件中儲存的資料,統稱為屬性
② 方法:方法實際上也是屬性,由於內部儲存的是函式值,所以稱為方法
③ 物件.屬性名:當使用物件屬性時可以確定當前要訪問的屬性名是什麼
④ 物件[‘屬性名’]:不確定本次要訪問的屬性名稱,就可以使用[]的訪問方式
⑤ 物件屬性的初始化設定方式

		var obj = {
			name : 'jack',
			age : 18,
			sayHi : function () {
				console.log('這是sayHi的程式碼');
			},
			sayHehe : function () {
				console.log('這是sayHehe的程式碼');
			}
		};
		console.log(obj.name, obj['age']);
		obj.xingBie = '男';

二、物件建立操作

1、通過Object建構函式建立單個物件

var obj = new Object();

2、工廠模式

		// 使用函式進行多個物件建立操作(工廠模式)
		function createStu (name, age) {
			// 1 建立了物件
			var stu1 = new Object();
			// 2 給物件新增功能
			stu1.name = name;
			stu1.age = age;
			stu1.sayHi = function () {
				console.log('這是sayHi方法的功能');
			};
			// 3 返回這個物件
			return stu1;
		}

		var jack = createStu('jack', 18);
		console.log(jack.name, jack.age);
		jack.sayHi();

3、建構函式模式

		function Create (name, age) {
			this.name = name;
			this.age = age;
			this.sayHi = function () {
				console.log('這是sayHi');
			};
		}
		var c1 = new Create('jack', 18);
		c1.sayHi();

1、new的作用
① 建立了物件
② 將函式內的this設定為建立的物件
③ 返回了這個物件
④ 可以幫我們進行函式呼叫
2、呼叫前必須加new
3、在建構函式中只需要給要建立的物件進行功能設定即可
4、(建議)建構函式的函式名首字母大寫

4、原型模式

原型是個坑,我現在還沒填明白

function Person(){}
  Person.prototype.name = 'jack';
  Person.prototype.age = 19;
  Person.prototype.sayName = function(){
    console.log(this.name);
  }
  var person1 = new Person();
  person1.sayName();//"jack"
  var person2 = new Person(); 
  person2.sayName(); //"jack" 
  console.log(person1.sayName === person2.sayName); //true

使用原型物件可以讓所有物件例項共享它所包含的屬性和方法。
還有四種,分別是組合使用建構函式模式和原型模式動態原型模式Object.create()另有寄生建構函式模式和穩妥建構函式模式,四個坑,什麼時候填了,什麼時候再來加上

三、this的使用

1、this在普通函式中使用

① 指向window物件,即js瀏覽器環境中的頂級物件
② 由於window物件可以直接使用名稱訪問,所以這種this的訪問方式是沒有實際意義的

2、this在某個物件的方法中使用

① 指向當前物件,即函式呼叫者
② 以後只要在方法中操作當前物件,就統一使用this進行操作

3、特殊場景:建構函式中this只想建立的物件

new對函式內的this指向進行了修改

四、物件的遍歷操作

var obj = {
			name : 'jack',
			age : 18,
			sayHi : function () {
				console.log('這是sayHi');
			}
		};
for (var k in obj) {
//k - 代表屬性名 - 字串型別
	if (typeof obj[k] === 'function') {
				obj[k]();
				//obj[k] - 代表屬性值
			} else {
				console.log(obj[k]);
			}
		}

1、陣列中的元素按照索引排列,陣列是一種有序的資料儲存方式。而物件中的元素按照屬性名儲存,是一種無序的資料儲存方式。
2、屬性名 - 鍵,屬性值 - 值,所以物件結構又稱為鍵值對
3、物件需要使用for···in進行遍歷操作。

五、物件的兩種使用形式

1、作為資料儲存使用

1、當我們將物件作為儲存資料使用時是不會設定方法結構的
2、物件是按照鍵值對儲存的,索引可以儲存兩組相關聯的資料

2、作為工具使用

1、設定一個或多個物件,通過物件的屬性和方法結合完成一些操作,我們就稱這是一種工具的使用方式。
2、自定義工具,自己建立一個物件,設定一些屬性方法
3、內建工具

六、內建物件

js中有很多的資料型別,為了方便開發者對資料型別進行操作,提供了很多的功能,這些功能根據操作的資料型別不同,劃分了多個物件,我們稱之為內建物件。
全域性物件、Number、Boolean、String、Array、Object、Function、Date、Math 等都是內建物件
下一篇將詳細講解內建物件,此篇完。