JavaScript 對象的基本形式、對象的創建方式、構造函數、包裝類等 ...
JavaScript 對象基礎
JavaScript 對象的基本形式、對象的創建方式、構造函數、包裝類等
對象的格式
基本格式
對象使用一個
{}進行包裹，內部屬性以鍵值對形式聲明示例
var teacher = { name: "pgjett", age: "22", teach: function () { console.log("I teach javascript"); }, drink: function () { console.log("I drink beer"); } }
對象的的屬性
屬性的增刪改查
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"]對象方法訪問屬性
一般將普通函數稱之為函數，對象內的函數稱之為方法
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();帶參數的對象方法
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("李四"); // 張三 已到課 // 李四 已到課 // 王五 已到課 // 趙六 已到課 // 孫七 已到課 // 李四早退
對象的創建方式
對象字面量
也叫對象直接量
var obj = { name: "Jett", age: 22"" }內置構造函數
使用 new Object()，與對象直接量沒什麼區別
var obj = new Object(); obj.name = "Jett"; obj.age = "22";自定義構造函數
自定義構造函數使用大駝峰命名，通過 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" });
構造函數原理
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);this 轉變的過程
當 new 一個構造函數時，就相當於該構造函數執行，它的 AO 中會有一個 this 指向一個預設的屬性
當執行
this.color = "red"; this.brand = "BMW";相當於在 this 上添加屬性
使用 new 關鍵字後會將 this 拋出，賦值給一個引用
這就是一個實例對象，這個實例可以訪問 color、brand 屬性
構造函數中的 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
包裝類
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) // 列印 undefinedString
字元串原始值並沒有 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();
```對象枚舉
for in 遍歷對象屬性
var obj = { name: "Jett", age: 22, address: "安徽" } for( var key in obj) { console.log(key, obj[key]); } // name Jett // age 22 // address 安徽用 in 判斷對象是否有某個屬性
var obj = { name: "Jett", age: 22, address: "安徽" } console.log("name" in obj); // true
