JS-原型和原型鏈

在講原型和原型鏈以前,咱們先來了解一下構造函數。瀏覽器

構造函數

構造函數自己就是一個函數,不過爲了規範通常將其函數名的首字母大寫。bash

構造函數和普通函數的區別在於,使用 new 生成實例的函數就是構造函數,直接調用的就是普通函數。函數

function Person(name) {
  this.name = name;
}
let person1 = new Person('xmm');
console.log('姓名:', person1.name);
//姓名: xmm
複製代碼

在上面的代碼中,Person就是構造函數,使用new建立了一個實例對象person1ui

代碼

接下來我會根據一段代碼和相應的圖解來說述原型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),這個對象正是調用該構造函數而建立的實例的原型,也就是這個例子中的 person1person2 的原型。

記住只有函數纔有,而且經過bind()綁定的也沒有。3d

原型對象的好處是可讓全部對象實例共享它所包含的屬性和方法。指針

引伸:constuctor和原型對象的關係

如今理解原型對象(Person.prototype)下constructor屬性code

這個constuctor屬性其實就是將原型對象指向關聯的構造函數。上述代碼中的這兩句輸出語句能夠說明。

console.log(person1.constructor === Person);          // true
console.log(Person.prototype.constructor === Person); // true
複製代碼

實例 person1person2能夠經過__proto__來訪問構造函數的原型對象。就是咱們接下來要講的__proto__屬性。

原型鏈 __proto__

其實每一個JS對象都有__ proto __屬性,這個屬性指向了原型。這個屬性在如今來講已經不推薦直接去使用了,這只是瀏覽器在早期爲了讓咱們訪問到內部屬性[[prototype]]來實現的一個東西。

person1person2實例對象下面有一個[[prototype]]屬性,其實沒有標準的方式能夠訪問它,可是主流瀏覽器上在每一個對象上 (null除外) 都支持一個屬性,那就是__ proto __,這個屬性會指向該對象的原型。

因此總結可得__ proto __就是用來將 實例對象該實例對象的原型相連

綜上所述:

prototype是構造函數訪問原型對象,_ proto _是對象實例訪問原型對象。

補充:

  • Object 是全部對象的爸爸,全部對象均可以經過 __proto__ 找到Object.prototype,在經過Object.prototype.constructor找到它
  • Function 是全部函數的爸爸,全部函數均可以經過 __proto__ 找到Function.prototype,在經過Function.prototype.constructor找到它
  • 函數的 prototype 是一個對象
  • 對象的__proto__屬性指向原型,__proto__將對象和原型鏈接起來組成了原型鏈
相關文章
相關標籤/搜索