JavaScript 物件基礎

JavaScript 物件的基本形式、物件的創建方式、建構式、包裝類等

物件的格式

1. 基本格式

   物件使用一個{}進行包裹，內部屬性以鍵值對形式宣告

2. 示例

   var teacher = {
   	name: "pgjett",
   	age: "22",
   	teach: function () {
   		console.log("I teach javascript");
   	},
   	drink: function () {
   		console.log("I drink beer");
   	}
   }
   

物件的的屬性

1. 屬性的增刪改查

   var teacher = {
   	name: "pgjett",
   	var teacher = {
   		name: "pgjett",
   		age: "22",
   		teach: function() {
   			console.log("I teach javascript");
   		},
   		drink: function() {
   			console.log("I drink beer");
   		}
   	}
   	// 增加
   	teacher.smook = function(){
   		console.log("I smook");
   	}
   	// 洗掉
   	delete teacher.name;
   	// 改變
   	teacher.teach =function() {
   		console.log("I teach java");
   	}
   	// 查找/訪問
   	console.log(teacher.name);	
   	console.log(teacher["name"]);
       // 最早的 JS 引擎使用 obj["name"] 訪問
   	// 使用 obj.name 會自動轉換成 obj["name"]
   

2. 物件方法訪問屬性

   一般將普通函式稱之為函式，物件內的函式稱之為方法

   var teacher = {
   	name: "pgjett",
   	age: "22",
   	weight: "65",
   	teach: function() {
   		console.log("I teach javascript");
   	},
   	eat: function() {
   		this.weight++;
   		console.log("I eat, my weight is " + this.weight);
   	}
   }
   teacher.eat();
   

3. 帶引數的物件方法

   var attendance = {
   	students: [],
   	join: function(name) {
   		this.students.push(name);
   		console.log(name + " 已到課");
   	},
   	leave: function(name) {
   		var idx = this.students.indexOf(name);
   		if (idx != -1) {
   			this.students.splice(idx, 1);
   			console.log(name + "早退");
   		}
   	}
   }
   attendance.join("張三");
   attendance.join("李四");
   attendance.join("王五");
   attendance.join("趙六");
   attendance.join("孫七");
   attendance.leave("李四");
   // 張三 已到課
   // 李四 已到課
   // 王五 已到課
   // 趙六 已到課
   // 孫七 已到課
   // 李四早退
   

物件的創建方式

1. 物件字面量

   也叫物件直接量

   var obj = {
   	name: "Jett",
   	age: 22""
   }
   

2. 內置建構式

   使用 new Object()，與物件直接量沒什么區別

   var obj = new Object();
   obj.name = "Jett";
   obj.age = "22";
   

3. 自定義建構式

   自定義建構式使用大駝峰命名，通過 new 創建物件實體，且 new 出的示例是不同物件，有各自的屬性

   自定義建構式是 javascript 模塊化、插件化的重要內容

   function Teacher(){
   	this.name = "Jett";
   	this.age = 22;
   	this.teach =function(){
   		console.log("I teach javascipt");
   	}
   }
   var teacher1 = new Teacher();
   var teacher2 = new Teacher();
   teacher2.name = "John";
   console.log(teacher1);
   console.log(teacher2);
   // Teacher{name: "Jett", age: 22, teach: teach(){}}
   // Teacher{name: "John", age: 22, teach: teach(){}}
   

   自定義建構式傳入引數

   function Teacher(opt) {
   	this.name = opt.name
   	this.age = opt.age;
   	this.teach = function() {
   		console.log("I teach " + opt.course);
   	}
   }
   var teacher1 = new Teacher({
   	name: "Jett",
   	age: 22,
   	course: "javascript"
   });
   var teacher2 = new Teacher({
   	name: "John",
   	age: 25,
   	course: "java"
   });
   

建構式原理

1. this 的指向

   不使用 new，直接執行，根據預編譯原理，this 默認指向 window

   在全域作用域中，this 代表 window

   function Car() {
   	this.color = "red";
   	this.brand = "BMW";
   }
   Car();
   console.log(window.color);
   console.log(this.color);
   // red
   // red
   

   使用 new 實體化物件，this 指向該實體

   function Car() {
   	this.color = "red";
   	this.brand = "BMW";
   }
   var car = new Car();
   console.log(car.color);
   

2. this 轉變的程序

   當 new 一個建構式時，就相當于該建構式執行，它的 AO 中會有一個 this 指向一個默認的屬性

   當執行

   this.color = "red";
   this.brand = "BMW";
   

   相當于在 this 上添加屬性

   使用 new 關鍵字后會將 this 拋出，賦值給一個參考

   這就是一個實體物件，這個實體可以訪問 color、brand 屬性

3. 建構式中的 return

   new 一個建構式默認會隱式 return this

   如果顯式 return 一個原始值，實體物件不受影響

   如果顯式 retrn 一個參考值，new 出的實體將指向該參考值

   function Car() {
   	this.color = "red";
   	this.brand = "BMW";
   	
   	return 1;
   }
   var car = new Car();
   console.log(car.color);
   // red
   

包裝類

1. Number

   通過建構式創建數字物件，可以設定屬性

   在運算中可以自動解包裝

   與此類似的還有 String，Boolean

   var a = new Number(1);
   a.name = "a";
   console.log(a);
   console.log(a + 1);
   // 列印
   // Number{1, name: "a"}
   // 2
   

   原始值自定義方法和屬性，每次訪問都會被包裝成相應型別的物件，僅僅是臨時容器，執行后則銷毀，再次訪問又重新包裝，只能訪問到 undefined

   var a = 1;
   a.name = "a"; 
   // js 引擎將 a 包裝成數字物件，
   // 即 new Number(a).len = 3
   // 臨時容器沒有變數保存，執行 delete，洗掉該 len 屬性
   console.log(a.name);
   // 即 console.log(new Number(a).len)
   // 列印 undefined
   

2. String

   字串原始值并沒有 length 屬性，實際上是包裝成字串物件后訪問 length 屬性

   // js 引擎將 "123" 包裝成字串物件
   var str = "123";
   str.length = 1; 
   // 即 new String(str).length = 1;
   console.log(str.length);
   // 即 console.log(new String(str).length)
   // 列印 3
   

物件鏈式呼叫

通過 return this 將物件拋出，以呼叫其他函式

```javascript
var sched = {
	marning:function(){
		console.log("marning studying");
		return this;
	},
	noon:function(){
		console.log("noon sleeping");
		return this;
	},
	afternoon:function(){
		console.log("afernoon shopping");
		return this;
	}
}
sched.marning().noon().afternoon();
```

物件列舉

1. for in 遍歷物件屬性

   var obj = {
   	name: "Jett",
   	age: 22,
   	address: "安徽"
   }
   for( var key in obj) {
   	console.log(key, obj[key]);
   }
   // name Jett
   // age 22
   // address 安徽
   

2. 用 in 判斷物件是否有某個屬性

   var obj = {
   		name: "Jett",
   		age: 22,
   		address: "安徽"
   	}
   console.log("name" in obj);
   // true
   

標籤：JavaScript

上一篇：[前端開發]Vue組件化的思想

下一篇：jQuery 屬性，元素