摘要：用構(gòu)造器模擬類的兩種方法在構(gòu)造器中修改，給添加屬性修改構(gòu)造器的屬性指向的對(duì)象，它是從這個(gè)構(gòu)造器構(gòu)造出來的所有對(duì)象的原型。

重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時(shí)間開的一個(gè)專欄，每天10分鐘，重構(gòu)你的前端知識(shí)體系，筆者主要整理學(xué)習(xí)過程的一些要點(diǎn)筆記以及感悟，完整的可以加入winter的專欄學(xué)習(xí)【原文有winter的語音】，如有侵權(quán)請(qǐng)聯(lián)系我，郵箱：[email protected]。

原型是指一個(gè)詞語或一個(gè)類型意義的所有典型模型或原形象，是一個(gè)類型的組典型特征

諸如 C++、Java 等流行的編程語言是使用類的方式來描述對(duì)象，基于類的編程提倡使用一個(gè)關(guān)注分類和類之間關(guān)系開發(fā)模型。

如 JavaScript 編程語言是利用原型來描述對(duì)象，基于原型的編程看起來更為提倡程序員去關(guān)注一系列對(duì)象實(shí)例的行為，而后才去關(guān)心如何將這些對(duì)象，劃分到最近的使用方式相似的原型對(duì)象，而不是將它們分成類。

一個(gè)是并不真的去復(fù)制一個(gè)原型對(duì)象，而是使得新對(duì)象持有一個(gè)原型的引用

另一個(gè)是切實(shí)地復(fù)制對(duì)象，從此兩個(gè)對(duì)象再無關(guān)聯(lián)。

javaScript選擇了第一種方式。

如果所有對(duì)象都有私有字段 [[prototype]]，就是對(duì)象的原型

讀一個(gè)屬性，如果對(duì)象本身沒有，則會(huì)繼續(xù)訪問對(duì)象的原型，直到原型為空或者找到為止。

可以利用下面三個(gè)方法，更直接地訪問操縱原型，來實(shí)現(xiàn)抽象和復(fù)用。

Object.create 根據(jù)指定的原型創(chuàng)建新對(duì)象，原型可以是 null

Object.getPrototypeOf 獲得一個(gè)對(duì)象的原型

Object.setPrototypeOf 設(shè)置一個(gè)對(duì)象的原型

winter舉了用原型來抽象貓和虎的例子：

var cat = {
    say() {
        console.log("meow~");
    },
    jump() {
        console.log("jump");
    }
}

var tiger = Object.create(cat,  {
    say: {
        writable: true,
        configurable: true,
        enumerable: true,
        value: function(){
            console.log("roar!");
        }
    }
})


var anotherCat = Object.create(cat);

anotherCat.say(); // meow~

var anotherTiger = Object.create(tiger);

anotherTiger.say(); // roar!

所有具有內(nèi)置 class 屬性的對(duì)象:（ES3和之前版本）

var o = new Object;
var n = new Number;
var s = new String;
var b = new Boolean;
var d = new Date;
var arg = function(){ return arguments }();
var r = new RegExp;
var f = new Function;
var arr = new Array;
var e = new Error;
console.log(
    [o, n, s, b, d, arg, r, f, arr, e].map(v =>   Object.prototype.toString.call(v)
  )
)

語言使用者唯一可以訪問 [[class]] 屬性的方式是 Object.prototype.toString。

可以查看MDN文檔Symbol.toStringTag以及Object.prototype.toString的介紹：（ES5開始）

var o = { [Symbol.toStringTag]: "MyObject" }
console.log(o + ""); // [object MyObject]

上面這段代碼創(chuàng)建了一個(gè)新對(duì)象，并且給它唯一的一個(gè)屬性 Symbol.toStringTag，用字符串加法觸發(fā)了Object.prototype.toString 的調(diào)用，發(fā)現(xiàn)這個(gè)屬性最終對(duì) Object.prototype.toString 的結(jié)果產(chǎn)生了影響。

1、以構(gòu)造器的 prototype 屬性（注意與私有字段 [[prototype]] 的區(qū)分）為原型，創(chuàng)建新對(duì)象

2、將 this 和調(diào)用參數(shù)傳給構(gòu)造器，執(zhí)行

3、如果構(gòu)造器返回的是對(duì)象，則返回，否則返回第一步創(chuàng)建的對(duì)象。

用構(gòu)造器模擬類的兩種方法:

// 1、在構(gòu)造器中修改 this，給 this 添加屬性

function c1() {
    this.p1 = 1;
    this.p2 = function(){
        console.log(this.p1);
    }
}
var o1 = new c1;
o1.p2(); // 1

// 2、修改構(gòu)造器的 prototype 屬性指向的對(duì)象，它是從這個(gè)構(gòu)造器構(gòu)造出來的所有對(duì)象的原型。

function c2() {
}
c2.prototype.p1 = 1;
c2.prototype.p2 = function() {
    console.log(this.p1);
}

var o2 = new c2;
o2.p2(); // 1

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  // Getter
  get area() {
    return this.calcArea();
  }
  // Method
  calcArea() {
    return this.height * this.width;
  }
}

class Animal {
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    console.log(this.name + " makes a noise.");
  }
}

class Dog extends Animal {
  constructor(name) {
    super(name); // call the super class constructor and pass in the name parameter
  }

  speak() {
    console.log(this.name + " barks.");
  }
}

let d = new Dog("Mitzie");
d.speak(); // Mitzie barks.

上面代碼調(diào)用子類的 speak 方法獲取了父類的 name。如果對(duì)于class還想了解更多，可以查看MDN文檔Classes部分。

其實(shí)對(duì)于這一部分很是不明白，也不清楚，對(duì)于這些js基礎(chǔ)性的東西還是要多下下功夫才行，畢竟winter的重學(xué)前端真心不錯(cuò)，對(duì)我來說進(jìn)行查漏補(bǔ)缺，看清自己的水平很有幫助，路還很長，還要加油呀?。?！