在講原型和原型鏈以前,咱們先來了解一下構造函數。瀏覽器
構造函數自己就是一個函數,不過爲了規範通常將其函數名的首字母大寫。bash
構造函數和普通函數的區別在於,使用 new 生成實例的函數就是構造函數,直接調用的就是普通函數。函數
function Person(name) {
this.name = name;
}
let person1 = new Person('xmm');
console.log('姓名:', person1.name);
//姓名: xmm
複製代碼
在上面的代碼中,Person
就是構造函數,使用new
建立了一個實例對象person1
。ui
接下來我會根據一段代碼和相應的圖解來說述原型prototype
和原型鏈__proto__
的的區別和聯繫。this
//構造函數 Person
function Person(name) {
this.name = name;
}
Person.sex = 'girl';
Person.prototype.age = 18 ;
console.log('Person.sex ',Person.sex); //Person.sex girl
// 構造函數的實例
let person1 = new Person('gxm');
let person2 = new Person('xmm');
console.log('person1.name:', person1.name); //person1.name:gxm
console.log('person2.name:', person2.name); //person2.name:xmm
//修改和自定義屬性
person1.age = 20;
person2.loveAction = '指尖的跳躍';
console.log('person1.age:', person1.age); //person1.age:20
console.log('person2.age:', person2.age); //person2.age:18
console.log('person2.loveAction:', person2.loveAction);//person2.loveAction: 指尖的跳躍
console.log('person1.sex', person1.sex); //person1.sex undefined
console.log('person2.sex', person2.sex); //person1.sex undefined
console.log(person1.__proto__ === Person.prototype); // true
console.log(person1.constructor === Person); // true
console.log(Person.prototype.constructor === Person); // true
複製代碼
圖解:spa
prototype
構造函數的原型prototype
屬性是一個指針,指向的是原型對象,關係以下:prototype
prototype
屬性,這個屬性是一個指針,指向原型對象(如圖中的
Person .prototype
),這個對象正是調用該構造函數而建立的實例的原型,也就是這個例子中的
person1
和
person2
的原型。
記住只有函數纔有,而且經過bind()綁定的也沒有。3d
原型對象的好處是可讓全部對象實例共享它所包含的屬性和方法。指針
如今理解原型對象(Person.prototype)下constructor屬性code
這個constuctor屬性其實就是將原型對象指向關聯的構造函數。上述代碼中的這兩句輸出語句能夠說明。
console.log(person1.constructor === Person); // true
console.log(Person.prototype.constructor === Person); // true
複製代碼
實例 person1
和 person2
能夠經過__proto__
來訪問構造函數的原型對象。就是咱們接下來要講的__proto__
屬性。
__proto__
其實每一個JS對象都有__ proto __
屬性,這個屬性指向了原型。這個屬性在如今來講已經不推薦直接去使用了,這只是瀏覽器在早期爲了讓咱們訪問到內部屬性[[prototype]]
來實現的一個東西。
在person1
和person2
實例對象下面有一個[[prototype]]
屬性,其實沒有標準的方式能夠訪問它,可是主流瀏覽器上在每一個對象上 (null
除外) 都支持一個屬性,那就是__ proto __
,這個屬性會指向該對象的原型。
因此總結可得__ proto __
就是用來將 實例對象
與 該實例對象的原型
相連
prototype
是構造函數訪問原型對象,_ proto _
是對象實例訪問原型對象。
補充:
__proto__
找到Object.prototype
,在經過Object.prototype.constructor
找到它__proto__
找到Function.prototype
,在經過Function.prototype.constructor
找到它prototype
是一個對象__proto__
屬性指向原型,__proto__
將對象和原型鏈接起來組成了原型鏈