JS中的構造函數、原型、原型鏈

1.1 概述

在典型的 OOP 的語言中（如 Java），都存在類的概念，類就是對象的模板，對象就是類的實例，但在 ES6之前， JS 中並沒用引入類的概念。

ES6 全稱 ECMAScript 6.0 ，2015.06 發版。但是目前瀏覽器的 JavaScript 是 ES5 版本，大多數高版本的瀏覽器也支持 ES6，不過只實現了 ES6 的部分特性和功能。

在 ES6之前 ，對象不是基於類創建的，而是用一種稱為構造函數的特殊函數來定義對象和它們的特征。

創建對象可以通過以下三種方式：

1. 對象字面量

   var obj = {}

2. new Object()

   var obj = new Object();

3. 自定義構造函數

   function Star(name, age) {
       this.name = name;
       this.age = age;
       this.sing = function(){
           console.log('sing')
       }
   }
   let ldh = new Star('劉德華', 18);
   ldh.sing();

1.2 構造函數

構造函數是一種特殊的函數，主要用來初始化對象，即為對象成員變量賦初始值，它總與 new 一起使用。我們可以把對象中一些公共的屬性和方法抽取出來，然后封裝到這個函數里面。

在 JS 中，使用構造函數時要注意以下兩點：

　　1. 構造函數用於創建某一類對象，其首字母要大寫

2. 構造函數要和 new 一起使用才有意義

new 在執行時會做四件事情：

① 在內存中創建一個新的空對象。

② 讓 this 指向這個新的對象。

③ 執行構造函數里面的代碼，給這個新對象添加屬性和方法。

④ 返回這個新對象（所以構造函數里面不需要 return ）。

JavaScript 的構造函數中可以添加一些成員，可以在構造函數本身上添加，也可以在構造函數內部的 this 上添加。通過這兩種方式添加的成員，就分別稱為靜態成員和實例成員。

• • 靜態成員：在構造函數本上添加的成員稱為靜態成員，只能由構造函數本身來訪問

• • 實例成員：在構造函數內部創建的對象成員稱為實例成員，只能由實例化的對象來訪問

function Star(name, age) {
    this.name = name;
    this.age = age;
    this.sing = function(){
        console.log('sing')
    }
}
// 實例成員就是構造函數內部通過 this 添加的成員 name age sing 就是實例成員。實例成員只能通過實例化的對象來訪問
let ldh = new Star('劉德華', 18);
ldh.sing();
​
// 靜態成員 在構造函數本身上添加的成員 gender 就是靜態成員
Star.gender = 'male';
console.log(Star.gender); // 靜態成員只能通過構造函數來訪問
console.log(ldh.gender); // 不能通過對象來訪問

1.3 構造函數的問題

構造函數方法很好用，但是存在浪費內存的問題。

function Star(uname, age) {
    this.uname = uname;
    this.age = age;
    this.sing = function() {
        console.log('我會唱歌');
    }
}
var ldh = new Star('劉德華', 18);
var zxy = new Star('張學友', 19);
console.log(ldh.sing === zxy.sing);   // false

當創建實例對象的時候，對於簡單的數據類型，直接賦值就可以。

但對於復雜數據類型，當創建 ldh 這個實例對象的時候，會單獨的開辟一塊兒空間來存放復雜數據類型 sing 這個方法，創建 zxy 對象的時候，也去開辟一塊兒空間來存放 sing 方法。開辟了兩個空間來存放同一個函數。

我們希望所有的對象使用同一個函數，這樣就比較節省內存，那么我們要怎樣做呢？

1.4 構造函數原型 prototype

構造函數通過原型分配的函數是所有對象所共享的。

JavaScript 規定，每一個構造函數都有一個 prototype 屬性，指向另一個對象。這個 prototype 就是一個對象，這個對象的所有屬性和方法，都會被構造函數所擁有。

我們可以把那些不變的方法，直接定義在 prototype 對象上，這樣所有對象的實例就可以共享這些方法。

function Star(name, age){
   this.name = name;
    this.age = age;
}
Star.prototype.sing = function() {
    console.log('sing');
}
var ldh = new Star('劉德華', 18);
var zxy = new Star('張學友', 19);
ldh.sing();
zxy.sing();
console.log(ldh.sing === zxy.sing)  // true

一般情況下，公共的屬性定義到構造函數里面，公共的方法放在原型對象身上。

問答

　　1. 原型是什么 ？

　　一個對象，我們也稱為 prototype 為原型對象。

2. 原型的作用是什么 ？

　　共享方法。

1.5 對象原型 __ proto __

對象都會有一個屬性 __ proto __ 指向構造函數的 prototype 原型對象。對象可以使用構造函數 prototype 原型對象的屬性和方法，就是因為對象有 __ proto __ 原型的存在。

• __ proto __ 對象原型和原型對象 prototype 是等價的

• __ proto __ 對象原型的意義就在於為對象的查找機制提供一個方向，或者說一條路線，但是它是一個非標准屬性，因此實際開發中，不可以使用這個屬性，它只是內部指向原型對象 prototype

1.6 constructor 構造函數

對象原型（ __ proto __ ）和構造函數（prototype）原型對象里面都有一個屬性 constructor 屬性 ，constructor 我們稱為構造函數，因為它指回構造函數本身。

constructor 主要用於記錄該對象引用於哪個構造函數，它可以讓原型對象重新指向原來的構造函數。

function Star(name, age) {
    this.name = name;
    this.age = age;
}
/*
Star.prototype.sing = function() {
    console.log('sing');
}
Star.prototype.movie = function() {
    console.log('movie');
}
*/
Star.prototype = {
    // 如果修改了原來的原型對象，給原型對象賦值的是一個對象，則必須手動利用 constructor 指回原來的構造函數
    constructor: Star,
    sing: function() {},
    movie: function() {}
}
var ldh = new Star('劉德華', 18);
var zxy = new Star('張學友', 19);
console.log(Star.prototype.constructor); // Star
console.log(ldh.__proto__.constructor); // Star

一般情況下，對象的方法都在構造函數的原型對象中設置。如果有多個對象的方法，我們可以給原型對象采取對象形式賦值，但是這樣就會覆蓋構造函數原型對象原來的內容，這樣修改后的原型對象 constructor 就不再指向當前構造函數了。此時，我們可以在修改后的原型對象中，添加一個 constructor 指向原來的構造函數。

1.7 構造函數、實例、原型對象三例者之間的關系

1.8 原型鏈

1. 只要是對象就有 __ proto __ 原型，指向原型對象

2. Star 原型對象里面的 __ proto __ 原型 指向的是 Object.prototype

3. Object.prototype 原型對象里面的 __ proto __ 原型 指向為 null

只要是對象，它里面都有一個原型 __ proto __ ，它指向的是原型對象 prototype，原型對象里面也有一個 __ proto __ ，它指向的是 object 原型對象 prototype，object 原型對象里面也有一個 proto __ , 它指向是 null

簡單來說就是，每一個對象都有一個原型，每一個原型又是一個對象，所以原型又有自己的原型，這樣一環扣一環形成一條鏈，就叫原型鏈。

1.9 JavaScript 的成員查找機制(規則)

① 當訪問一個對象的屬性（包括方法）時，首先查找這個對象自身有沒有該屬性。

② 如果沒有就查找它的原型（也就是 __proto__ 指向的 prototype 原型對象）。

③ 如果還沒有就查找原型對象的原型（Object的原型對象）。

④ 依此類推一直找到 Object 為止（null）。

⑤ __proto__ 對象原型的意義就在於為對象成員查找機制提供一個方向，或者說一條路線。

1.10 原型對象 this 指向

構造函數中的this 指向我們實例對象。

function Star(uname, age) {
    this.uname = uname;
    this.age = age;
}
var that;
Star.prototype.sing = function() {
    console.log('我會唱歌');
    that = this;
}
var ldh = new Star('劉德華', 18);
console.log(that === ldh); // 返回true，在構造函數中，里面this指向的是對象實例ldh

原型對象里面放的是方法，這個方法里面的 this 指向 的是 這個方法的調用者，也就是這個實例對象。調用方式的不同決定了 this 的指向不同，一般指向我們的調用者。

改變函數內部 this 指向，常用的有 bind()、call()、apply()

1. call() 方法：調用一個對象，即調用函數的方式，改變函數的 this 指向。主要作用可以實現繼承。

   fun.call(thisArg, arg1, arg2, ...)

2. apply() 方法：調用一個函數，即調用函數的方式，改變函數的 this 指向。

   fun.apply(thisArg, [argsArray])

   • thisArg：在 fun 函數運行時指定的 this 值

   • argsArray：傳遞的值，必須包含在數組里面

   • 返回值就是函數的返回值，因為它就是調用函數

   // 利用 apply 借助於數學內置對象求最大最小值
   var arr = [1, 63, 25, 89, 12, 7];
   var max = Math.max.apply(Math, arr);
   console.log(max); // 89

3. bind() 方法不會調用函數，但是能改變函數內部 this 指向

   fun.bind(thisArg, arg1, arg2, ...)

   • thisArg：在 fun 函數運行時指定的 this 值

   • arg1, arg2：傳遞的其他參數

   • 返回由指定的 this 值和初始化參數改造的原函數拷貝，即原函數改變 this 之后產生的新函數

   var o = {
       name: 'andy'
   }
   function fn(a, b) {
       console.log(this, a+b);
   }
   var f = fn.bind(o, 1, 2);
   fn();
   ​
   var btn = document.querySelector('button');
   btn.onclick = function() {
       this.diabled = true; //這個 this 指向 btn 按鈕
       // var that = this;
       setTimeout(function() { //定時器里面的 this 指向的是 window
           // that.disabled = false;
           this.disabled = false;
       }.bind(this), 3000); //這個 this 指向 btn 這個對象
   }

總結：

• • call() 經常做繼承；

  • apply() 經常跟數組有關系；

  • bind() 不立即調用函數，如果有的函數我們不需要立即調用，但是又想改變這個函數內部 this 指向，此時用 bind()

1.11 擴展內置對象

可以通過原型對象，對原來的內置對象進行擴展自定義的方法。比如給數組增加自定義求偶數和的功能。

Array.protoype.sum = function() {
    let sum = 0;
    for(let i = 0; i < this.length; i++) {
        sum += this[i];
    }
    return sum;
}
const arr = [1, 2, 3];
console.log(arr.sum()); // 6
console.log(Array.prototype) // 里面包含了 sum 方法

注意：數組和字符串內置對象不能給原型對象覆蓋操作 Array.prototype = {} ，只能是 Array.prototype.xxx = function(){} 的方式。