淺析 構造函數 & 原型

<一個幼兒園小班的前端的成長隨筆,錯誤與不足之處,望各位大牛批評指點,謝謝!>

構造函數 對比 class

• 在ES5中，定義構造函數

// 代碼演示 ：
function Star(name, age) {
　　this.name = name;
　　this.age = age;
}

 

• 在ES6中，定義類

// 代碼演示 ：
class Star {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
}
console.dir(Star);
  ​
// ES6的class寫法, 只是在ES5的基礎上造成了一次包裝, 這種方法叫作 語法糖

 

 

---

靜態成員 和 實例成員

• 實例成員 : 就是構造函數內部經過this添加的成員。實例成員只能經過實例化的對象來訪問。

// 代碼演示 ：

function Star(uname, age) {
    this.uname = uname;
    this.age = age;
    this.sing = function() {
    console.log('我會唱歌');
    }
}

var ldh = new Star('劉德華', 18);
console.log(ldh.uname);//實例成員只能經過實例化的對象來訪問

 

 

• 靜態成員 ： 在構造函數自己上添加的成員。靜態成員只能經過構造函數來訪問。

// 代碼演示 ：

function Star(uname, age) {
　　this.uname = uname;
　　this.age = age;
　　this.sing = function() {
　　console.log('我會唱歌');
　　}
}

Star.sex = '男';
var ldh = new Star('劉德華', 18);
console.log(Star.sex);//靜態成員只能經過構造函數來訪問

 

 

---

構造函數原型對象 prototype

1. JavaScript 規定，每個構造函數都有一個prototype 屬性，指向另外一個對象。注意這個prototype就是一個對象，這個對象的全部屬性和方法，都會被構造函數所擁有。
2. 公共屬性定義到構造函數裏面, 公共的方法咱們放到原型對象身上.

 

---

對象的原型

1. 對象都會有一個屬性 __proto__ 指向構造函數的 prototype 原型對象，之因此咱們對象可使用構造函數 prototype 原型對象的屬性和方法，就是由於對象有 __proto__ 原型的存在。
2. __proto__對象原型和原型對象 prototype 是等價的。
3. __proto__對象原型的意義就在於爲對象的查找機制提供一個方向，或者說一條路線，可是它是一個非標準屬性，所以實際開發中，不可使用這個屬性，它只是內部指向原型對象 prototype

 

---

constructor構造函數

1. 對象原型（ __proto__）和構造函數（prototype）原型對象裏面都有一個屬性 constructor 屬性 ，constructor 咱們稱爲構造函數，由於它指回構造函數自己。
2. constructor 主要用於記錄該對象引用於哪一個構造函數，它可讓原型對象從新指向原來的構造函數。
3. 通常狀況下，對象的方法都在構造函數的原型對象中設置。若是有多個對象的方法，咱們能夠給原型對象採起對象形式賦值，可是這樣就會覆蓋構造函數原型對象原來的內容，這樣修改後的原型對象 constructor 就再也不指向當前構造函數了。此時，咱們能夠在修改後的原型對象中，添加一個 constructor 指向原來的構造函數。

 

// 修改了原來的原型對象,給原型對象賦值的是一個對象,則必須手動的利用constructor指回原來的構造函數。
// 代碼演示 ：

function Star(uname, age) {
    this.uname = uname;
    this.age = age;
}
// 不少狀況下,咱們須要手動的利用constructor 這個屬性指回 原來的構造函數
Star.prototype = {
// 若是咱們修改了原來的原型對象,給原型對象賦值的是一個對象,則必須手動的利用constructor指回原來的構造函數
constructor: Star, // 手動設置指回原來的構造函數
    sing: function() {
        console.log('我會唱歌');
    },
    movie: function() {
       console.log('我會演電影');
    }
}
var zxy = new Star('張學友', 19);  

 

---

構造函數實例和原型對象三角關係

1. 構造函數的prototype屬性指向了構造函數的原型對象
2. 實例對象是由構造函數建立的,實例對象的__proto__屬性指向了構造函數的原型對象
3. 構造函數的原型對象的constructor屬性指向了構造函數,實例對象的原型的constructor屬性也指向了構造函數
   

 

---

原型鏈 和 成員的查找機制

-> 任何對象都有原型對象,也就是prototype屬性,任何原型對象也是一個對象,該對象就有proto屬性,這樣一層一層往上找,就造成了一條鏈,咱們稱此爲原型鏈

• 當訪問一個對象的屬性（包括方法）時，首先查找這個對象自身有沒有該屬性
• 若是沒有就查找它的原型（也就是 __proto__指向的 prototype 原型對象）
• 若是尚未就查找原型對象的原型（Object的原型對象）
• 依此類推一直找到 Object 爲止（null)
• __proto__對象原型的意義就在於爲對象成員查找機制提供一個方向，或者說一條路線