關(guān)于原型、原型鏈、和繼承

沈儉發(fā)布于2019-08-26 13:40 / 1035人閱讀

摘要：根據(jù)定義，沒有原型，并作為這個原型鏈中的最后一個環(huán)節(jié)。偷偷貼在這里再知道了原型原型鏈，那一個對象的過程知道嗎，能手寫一個嗎。

似乎生活中常常會遇到這種情況，你去一家公司面試，前面面的都挺好，你覺得你對基礎(chǔ)算法的了解很好，各種排序，紅黑樹，二叉樹，深度/廣度優(yōu)先算法都答出來了，leetcode上的若干困難題目也都答上來了，然后面試官說，"那么好吧，介紹一下你對原型的看法吧。"

？？？我頭發(fā)。我leetcode上刷了100天，我費(fèi)勁心思研究了各種算法和數(shù)據(jù)結(jié)構(gòu)，你叫我講講原型？

為了應(yīng)對這種情況，本文通過如下代碼展示下js的原型僅供參考。

上CODE

const c = (...v) => console.log(...v);
function People(name, age) {
  this.name = name;
  this.age = age;
}
/*你想這么寫也沒關(guān)系
const People = function(name, age) {
  this.name = name;
  this.age = age;
}
*/
People.prototype.info = function() {
  c(`My name is ${this.name}, my age is ${this.age}.`);
};  // 在原型上定義方法
function Student(name, age, school) {
  People.call(this, ...arguments); 
  this.school = school;
}
Student.prototype = People.prototype;  
// 這里推薦用new People()，直接指定People.prototype會污染People原型，如下結(jié)果
Student.prototype.constructor = Student;  //修正constructor指向
Student.prototype.talk = function() {
  c(`My school is ${this.school}`);
};  // 需要在改變了Student的原型后定義，否則無法獲取到該方法

const xiaoD = new Student("xiaoD", 4, "小星星幼兒園");
xiaoD.info();
xiaoD.talk();
const somebody = new People("somebody", 22);
somebody.talk();
c(xiaoD.__proto__ === Student.prototype);
c(Student.__proto__ === Function.prototype);
c(Function.prototype === Function.__proto__);
c(Function.__proto__ === Object.__proto__);
c(Object.__proto__ === Function.prototype);
c(Object.prototype === Function.prototype.__proto__);
c(Object.prototype.__proto__ === null);

可以先猜一下是什么結(jié)果。。

好吧，不用猜了。結(jié)果如下

My name is xiaoD, my age is 4.
My school is 小星星幼兒園
My school is undefined
true
true
true
true
true
true
true

每個實(shí)例對象（ object ）都有一個私有屬性（稱之為 proto ）指向它的原型對象（ prototype ）。該原型對象也有一個自己的原型對象( proto ) ，層層向上直到一個對象的原型對象為 null。根據(jù)定義，null 沒有原型，并作為這個原型鏈中的最后一個環(huán)節(jié)。至于誰指誰，應(yīng)該從上面的代碼中就可以清晰的看出來了。這里注意的是只有函數(shù)中才有 prototype 屬性。

類的繼承

class People {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  info() {
    c(`My name is ${this.name}, my age is ${this.age}.`);
  }
}
class Student extends People {
  constructor(name, age, school) {
    super(...arguments);        // 繼承屬性
    this.school = school;
    this.talk = this.talk.bind(this);        // 綁定this
    /* 或者這樣綁定
      this.talk = () => {
      this.info();  // 箭頭函數(shù)中的this在定義時綁定
      c(`My school is ${this.school}`);
    };
      */
  }
  talk() {
    this.info();
    c(`My school is ${this.school}`);
  }
  
}

const xiaoD = new Student("xiaoD", 4, "小星星幼兒園");
xiaoD.talk();
const { talk } = xiaoD;
talk();        // 不綁定this這里會報錯
const somebody = new People("somebody", 22);
somebody.talk();  // 報錯，父類中沒有該方法

這里有三個注意點(diǎn)：

父類中不會存在子類的方法（面向?qū)ο罅笤瓌t還記得嗎，開閉，單一職責(zé)，依賴倒轉(zhuǎn)，里氏置換，知道最少，接口隔離，合成聚合復(fù)用）

上面代碼中，talk方法中的this，默認(rèn)指向Student類的實(shí)例。但是，如果將這個方法提取出來多帶帶使用，this會指向該方法運(yùn)行時所在的環(huán)境（由于 class 內(nèi)部是嚴(yán)格模式，所以 this 實(shí)際指向的是undefined），從而導(dǎo)致找不到info方法而報錯。解決辦法如代碼中所示。

關(guān)于箭頭函數(shù)的this指向問題，眾所周知，普通函數(shù)的this是指向調(diào)用它的那個對象，所以普通函數(shù)可以通過apply，call，bind來改變this的指向。而箭頭函數(shù)中的this是在定義函數(shù)的時候就已經(jīng)確定了，指向外層作用域鏈中的普通函數(shù)，若沒有，this則指向undefined。

（那么問題又來了，手寫個apply，call，bind的polyfill吧）

const obj = {
  name: "xiaoD"
};
const fn = function(...args) {
  c(this.name, ...args);
};
Function.prototype.myApply = function(obj, [...args]) {
  return this.call(obj, ...args);
};
fn.myApply(obj, ["真", "棒"]);        // xiaoD 真 棒
fn.apply(obj, ["真", "棒"]);            // xiaoD 真 棒

拿走，不謝。

Function.prototype.myApply = function(obj, [...args]) {
  obj.fn = this;
  let ret = obj.fn(...args);
  delete obj.fn;
  return ret;
}; 
Function.prototype.myBind = function(obj) {
  obj.fn = this;
  return function(...args) {
    return obj.fn(...args);
  };
};
// 偷偷貼在這里

再PS

知道了原型、原型鏈，那new一個對象的過程知道嗎，能手寫一個嗎。

new一個對象的過程大概分成三步：

新建一個空對象

改變原型鏈指向，調(diào)用構(gòu)造函數(shù)

返回這個新對象

const myNew = function(fn, ...args) {
  let obj = {};
  obj.__proto__ = fn.prototype;
  let ret = fn.call(obj, ...args);
  return ret ? ret : obj;
};
function People(name, age) {
  this.name = name;
  this.age = age;
}
let xiaoD = myNew(People, "xiaoD", 4);
let xiaoY = new People("xiaoY", 4);            // 可以對比一下，看看兩者區(qū)別