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

時間 2020-05-29

標籤構造函數原型欄目 JavaScript 简体版

原文原文鏈接

1.1 概述數組

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

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

在 ES6以前，對象不是基於類建立的，而是用一種稱爲構造函數的特殊函數來定義對象和它們的特徵。函數

建立對象能夠經過如下三種方式：this

對象字面量spa
```
var obj = {}
```
new Object()prototype
```
var obj = new Object();
```

自定義構造函數code

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 一塊兒使用。咱們能夠把對象中一些公共的屬性和方法抽取出來，而後封裝到這個函數裏面。blog

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

構造函數用於建立某一類對象，其首字母要大寫
構造函數要和 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

通常狀況下，公共的屬性定義到構造函數裏面，公共的方法放在原型對象身上。

問答

原型是什麼？

一個對象，咱們也稱爲 prototype 爲原型對象。

原型的做用是什麼？

共享方法。

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 原型鏈

只要是對象就有 __ proto __ 原型，指向原型對象
Star 原型對象裏面的 __ proto __ 原型指向的是 Object.prototype
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()

call() 方法：調用一個對象，即調用函數的方式，改變函數的 this 指向。主要做用能夠實現繼承。
```
fun.call(thisArg, arg1, arg2, ...)
```
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
```

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(){} 的方式。