1. 程式人生 > >JavaScript 原型與繼承

JavaScript 原型與繼承

# JavaScript 原型與繼承 > JavaScript 中函式原型是實現繼承的基礎。prototype、construct、原型鏈以及基於原型鏈的繼承是面向物件的重要內容 ## prototype 1. 原型即 prototype,是函式的一個屬性,是一個物件 ```javascript function Car() {} console.log(typeof Car.prototype); console.log(Car.prototype); // object // {...} ``` 2. 所有被建構函式構造出的物件都能訪問 prototype 上定義的屬性和方法 ```javascript function Car() { this.brand = "BMW"; this.color = "red"; } Car.prototype.price = "100 萬"; var car1 = new Car(); var car2 = new Car(); console.log(car1.price); console.log(car2.price); // 100 萬 // 100 萬 ``` 3. 建構函式內部和 prototype 定義了同名屬性,例項物件會優先呼叫建構函式中的屬性 ```javascript function Car() { this.price = "10 萬"; } Car.prototype.price = "100 萬"; var car1 = new Car(); console.log(car1.price); // 10 萬 ``` 4. 通過例項物件不能更改 prototype 上的屬性 ```javascript function Car() {} Car.prototype.price = "100 萬"; var car1 = new Car(); car1.price = "10 萬"; console.log(Car.prototype.price); // 100 萬 ``` > 一般將不變化的內容或方法放在 prototype 下,需要動態變化的放在構造方法內,通過引數配置 ## constructor 1. constructor 指向建構函式本身 例項物件的 constructor 屬性指向建構函式 ```javascript function Car() {} var car = new Car(); console.log(car.constructor); console.log(Car) // Car(){} // Car(){} ``` 2. constructor 可以被更改 constructor 可以被修改,但是並不會影響例項化物件 ```javascript function Bike() { this.name = "bike"; } Bike.prototype.name = "Bike"; function Car() {} Car.prototype = { constructor: Bike } var car = new Car(); console.log(Car.prototype); console.log(car.name); // {constructor: Bike(){}, ...} // undefined ``` ## `__proto__` 1. 建構函式在例項化時,將其 prototype 掛載到函式內 this 的 `__proto__` 下 ```javascript function Car() {} Car.prototype.name = "Jett"; var car = new Car(); console.log(Car.prototype); console.log(car.__proto__); // Car.prototype -> // { // name: "Jett", // construct: Car(){} // _proto_: {...} // } // car._proto_ -> // { // name: "Jett", // construct: Car(){} // _proto_: {...} // } // ``` 可以看到,打印出的 Car.prototype 和 car.`__proto__` 內容一致。因為在例項化物件時,Car.prototype 被掛載到函式內的 this.`__proto__` 上,即例項物件的 `__proto__` 屬性上 prototype 是建構函式的屬性,`__proto__` 屬於每個例項物件的,是一個內部屬性,它們指向相同的內容 2. 可以通過例項物件訪問 `__proto__` 屬性,並對其進行修改 ```javascript function Car() {} Car.prototype.name = 'BWM'; var car = new Car(); console.log(car.name); car.__proto__= { name:"Benz" } console.log(car.name); // BWM // Benz ``` 也可以更改 prototype 的屬性到達效果 ```javascript function Car() {} Car.prototype.name = 'BWM'; var car = new Car(); console.log(car.name); Car.prototype.name = 'Benz'; console.log(car.name); // BWM // Benz ``` 但是,將 prototype 重新賦值並不能對之前例項化的物件造成影響 ```javascript function Car() {} Car.prototype.name = 'BWM'; var car = new Car(); console.log(car.name); Car.prototype = { name: "Benz" } console.log(car.name); // BWM // BWM ``` 這是因為重新賦值相當於建立新物件,使 prototype 指向的新的物件,而例項物件的 `__proto__` 屬性依然指向原來的內容,相當於一個物件的兩個引用,其中一個不在指向該物件,而且指向了新物件 這不能對已經例項化出的物件造成影響,但是後面再例項化物件則可以造成影響,因為例項化過程中將修改後的 prototype 掛載到了例項物件的 `__proto__` 屬性下,二者指向同一物件 ## 原型鏈 1. prototype 中的 `__proto__` 屬性 ```javascript function Car() {} var car = new Car(); console.log(Car.prototype); ``` 當我們列印建構函式的 prototype 屬性時,可以看到 ```javascript { constructor: Car(), __proto__: {...} } ``` prototype 中也有 `__proto__` 屬性,例項化過程 protorype 被掛載到例項物件的 `__proto__` 下,這就意味著例項物件的 `__proto__` 中也有一個 `__proto__` 屬性 因為這裡的 prototype 是一個非空物件,是由 new Object() 或者其他自定義構造方法例項化出的,自然也有 `__proto__` 屬性 2. 鏈式的 `__proto__` 原型鏈是由 `__proto__` 組成的連結,原型鏈的頂端是 Object.prototype ```javascript JuniorCoder.prototype.basicSkill = "html/css"; function JuniorCoder() { this.lowerSkill = "javascript" } var junior = new JuniorCoder(); SeniorCoder.prototype = junior; function SeniorCoder() { this.advancedSkill = "vue"; } var senior = new SeniorCoder(); console.log(senior); ``` 這裡將 JuniorCoder() 的例項物件賦值給 SeniorCoder.prototype,打印出 ```javascript SeniorCoder { advcedSkill: "vue", __proto__: { // senior.__proto__ ,即 SeniorCoder.protoype lowerSkill: "javascript", __proto__: { // junior.__proto__ ,即 JuniorCoder.prototype basicSkill: "html/css", __proto__: { // Object.prototype constructor: Object(), toString: toString() // ... } } } } ``` 可以看出,senior 的 `__proto__` 屬性指向 JuniorCoder() 例項 junior,這是因為之前 將 junior 賦值給了 SeniorCoder.prototype 此外,junior 的 `__proto__` 也指向了一個物件,這個物件就是 JuniorCoder.porotype,相當於 new Object() 得出的,所以 junior 的 `__proto__` 下的 `__proto__` 就是 Object.prototype,這就是原型鏈的頂端,在裡面我們還可以看到 toString 方法等等 3. 訪問原型鏈上屬性 ```javascript JuniorCoder.prototype.basicSkill = "html/css"; JuniorCoder.prototype.sex = "man"; function JuniorCoder() { this.lowerSkill = "javascript" this.age = 22; } var junior = new JuniorCoder(); SeniorCoder.prototype = junior; function SeniorCoder() { this.advancedSkill = "vue"; } var senior = new SeniorCoder(); console.log(senior.age); console.log(senior.sex); // 22 // man ``` senior 可以訪問 junior 本身的屬性,也可以訪問 JuniorCoder.prototype 上的屬性,因為 junior 被掛載到了 SeniorCoder.prototype 上 ```javascript JuniorCoder.prototype.basicSkill = "html/css"; function JuniorCoder() { this.lowerSkill = "javascript"; this.years = 3; } var junior = new JuniorCoder(); SeniorCoder.prototype = junior; function SeniorCoder() { this.advancedSkill = "vue"; } var senior = new SeniorCoder(); senior.years++; // 等同於 senior.years = senior.years + 1; console.log(senior.years); console.log(junior.years); // 4 // 3 ``` 可以看到,通過 senior 試圖改變 years 屬性並不能真正影響 junior 的 years 屬性,實際上只是在 senior 下建立了新的 years 屬性,並將 junior.years 加一的結果賦值給它 ## Object.creat() 1. Object 的 creat 方法用於建立物件,引數指定 prototype,可以為物件或 null ```javascript var test = { name: "obj" } var obj = Object.create(test); console.log(obj.name); console.log(obj.__proto__ == test); // obj // true ``` 2. Object.creat(null) ```javascript var obj = Object.create(null); console.log(obj); document.write(obj); // {} // 報錯 ``` 控制檯顯示 obj 是一個空物件,沒有任何屬性,包括 `__proto__`,如果使用 document.write(obj) 則會報錯,因為 document.write 方法會把引數轉成字串再列印在頁面,預設呼叫 toString() 方法,toString 方法需要從原型鏈上繼承而來,而 obj 是一個完全的空物件,沒有原型鏈,也沒有 toString 方法,所以會報錯 ## 基於原型的繼承 1. 利用原型鏈實現繼承 ```javascript JuniorCoder.prototype.basicSkill = "html/css"; function JuniorCoder() { this.lowerSkill = "javascript" this.age = 22; } var junior = new JuniorCoder(); SeniorCoder.prototype = junior; function SeniorCoder() { this.advancedSkill = "vue"; } var senior = new SeniorCoder(); ``` senior 繼承了 junior 的自身屬性及原型鏈 2. call/apply 實現繼承 ```javascript function JuniorCoder(lowerSkill) { this.lowerSkill = lowerSkill; } function SeniorCoder(lowerSkill, advancedSkill) { JuniorCoder.apply(this, [lowerSkill]); this.advancedSkill = advancedSkill; } var senior = new SeniorCoder("javascript", "vue"); ``` 繼承了 JuniorCoder 例項的自身屬性,不能繼承原型鏈 3. 公共原型繼承 ```javascript JuniorCoder.prototype.basicSkill = "html/css"; function JuniorCoder() { this.lowerSkill = "javascript" } SeniorCoder.prototype = JuniorCoder.prototype; function SeniorCoder() { this.advancedSkill = "vue"; } var senior = new SeniorCoder(); ``` senior 繼承 JuniorCoder 例項的原型鏈,不繼承自身屬性,但是改動 SeniorCoder.prototype 會影響 JuniorCoder.prototype 4. 中間物件繼承(聖盃模式) ```javascript JuniorCoder.prototype.basicSkill = "html/css"; function JuniorCoder() { this.lowerSkill = "javascript" } Buffer.prototype = JuniorCoder.prototype; function Buffer() {} SeniorCoder.prototype = new Buffer(); function SeniorCoder() { this.advancedSkill = "vue"; } SeniorCoder.prototype.basicSkill = "markdown"; console.log(SeniorCoder.prototype.basicSkill); console.log(JuniorCoder.prototype.basicSkill); // markdown // html/css ``` 繼承原型鏈,不繼承自身屬性,prototype 不相互影響,這種繼承方式更為實用 進行封裝以後,更適應企業級開發 ```javascript JuniorCoder.prototype.basicSkill = "html/css"; function JuniorCoder() { this.lowerSkill = "javascript" } function SeniorCoder() { this.advancedSkill = "vue"; } inherit(SeniorCoder, JuniorCoder); SeniorCoder.prototype.basicSkill = "markdown"; console.log(new SeniorCoder()); console.log(new JuniorCoder()); function inherit(Target, Origin) { Target.prototype = Object.create(Origin.prototype); Target.prototype.constructor = Target; Target.prototype.superClass = Origin; } ``` 使用 Object 的 creat 方法直接建立中間物件,將 construtor、superClass 屬性設定好,便於分析和維護 ## hasOwnProperty() 判斷屬性是否是例項物件本身的,如果是則返回 true ```javascript Car.prototype.brand = "BMW"; function Car() { this.color = "red"; } var car = new Car(); console.log(car.hasOwnProperty("brand")); console.log(car.hasOwnProperty("color")); // false // true ``` ## instanceOf 判斷例項物件的原型鏈上是否有某個構造方法 ```javascript JuniorCoder.prototype.basicSkill = "html/css"; function JuniorCoder() { this.lowerSkill = "javascript" } function SeniorCoder() { this.advancedSkill = "vue"; } inherit(SeniorCoder, JuniorCoder); function inherit(Target, Origin) { Target.prototype = Object.create(Origin.prototype); Target.prototype.constructor = Target; Target.prototype.superClass = Origin; } var senior = new SeniorCoder(); console.log(senior instanceof SeniorCoder); console.log(senior instanceof JuniorCoder); console.log(senior instanceof Object); // true // true //