懵逼的JavaScript大白(一)——原型鏈
阿新 • • 發佈:2018-12-18
一、原型鏈
放張圖片鎮鎮場
1、prototype:原型
每個函式都具有一個屬性prototype,值為一個物件。這個屬性其實是給建構函式準備的,其他的函式不使用這個屬性的功能。
prototype屬性用來儲存建構函式中所有需要公用的方法,簡化程式碼的書寫。
function CreateObj (name, age) { this.name = name; this.age = age; } CreateObj.prototype.sayHi = function () { console.log('這是sayHi方法'); }; var c1 = new CreateObj('jack', 18); var c2 = new CreateObj('rose', 21); c1.sayHi(); c2.sayHi(); console.log(c1.sayHi === c2.sayHi); console.log(c1); console.log(c2);
2、__proto__
屬性
通過觀察物件,我們發現物件具有__proto__
屬性,是new給物件設定的。
console.log(CreateObj.prototype === c1.__proto__); // true
這個__proto__
與CreateObj.prototype又實際上是同一個物件
物件的屬性訪問方式:首先找自身,自身有,使用;自身沒有,查詢__proto__
屬性,如果有,使用。
3、constructor:構造器
constructor是prototype的屬性,但是不是給自己準備的,而是讓建立的物件是用的。
constructor用來描述物件和建構函式之間關係的一種方式。
console.log(CreateObj.prototype.constructor); // 得到建構函式
使用constructor還可以進行物件的型別檢測
console.log(arr.constructor === Array); // true
console.log(arr.constructor === Object); // false
4、prototype的第二種設定方式
使用新物件覆蓋原有的原型物件,寫法較為簡單。但原始的constructor屬性也不存在了,需要自己進行設定。
function CreateObj (name) { this.name = name; } CreateObj.prototype = { sayHi : function () { console.log('這是sayHi'); }, constructor : CreateObj }; var c1 = new CreateObj('jack'); console.log(c1.constructor); c1.sayHi();
5、三者關係
例項物件:通過建構函式建立的物件。每個例項物件都具有一個__proto__屬性,指向了建構函式的原型物件。
建構函式:用於建立例項物件使用的。每個建構函式都具有一個prototype,指向了原型物件。
原型物件:都具有一個屬性constructor,指向建構函式。