詳解js原型，構造函數以及class之間的原型關系

轉載自：https://juejin.im/post/5bf5580c51882511a852881f

詳解js原型，構造函數以及class之間的原型關系

原型

概念

在構造函數創建的時候，系統默認的幫構造函數創建并關聯一個對象 這個對象就是原型

作用

在原型中的所有屬性和方法，都可以被和其關聯的構造函數創建出來的所有的對象共享

訪問原型

構造函數名.prototype 實例化的對象.__proto __

原型的簡單使用
  1. 利用對象的動態特性為原型對象增加成員
  2. 直接替換原型對象（jq核心方法的實現 就是使用原型替換的思想）
 function Person (name) {
      this.name = name
    }

    Person.prototype.fn = function () {
      console.log('hello world')
      console.log(this.name)
    }

    var p = new Person('小紅')

    p.fn()
    p.name = '曉麗'
    p.fn()
    console.log(Person.prototype)
    console.log(p)
復制代碼

<figure style="display: block; margin: 22px auto; text-align: center;">[圖片上傳失敗...(image-170216-1543396429106)]

<figcaption style="display: block; text-align: center; font-size: 1rem; line-height: 1.6; color: rgb(144, 144, 144); margin-top: 2px;"></figcaption>

</figure>

<figure style="display: block; margin: 22px auto; text-align: center;">[圖片上傳失敗...(image-1a592d-1543396429106)]

<figcaption style="display: block; text-align: center; font-size: 1rem; line-height: 1.6; color: rgb(144, 144, 144); margin-top: 2px;"></figcaption>

</figure>

1. prototype

含義： 是一個函數的屬性，這個屬性是一個指針，指向一個對象 作用： 構造函數調用 訪問該構造函數所關聯的原型對象

2. proto

含義： 是一個對象擁有的內置屬性，是js內部使用尋找原型鏈的屬性，通過該屬性可以允許實例對象直接訪問到原型

3. constructor

含義：原型對象的constructor 指向其構造函數,如果替換了原型對象之后，這個constructor屬性就不準確，需要手動補充一下

<figure style="display: block; margin: 22px auto; text-align: center;">[圖片上傳失敗...(image-8b6869-1543396429106)]

<figcaption style="display: block; text-align: center; font-size: 1rem; line-height: 1.6; color: rgb(144, 144, 144); margin-top: 2px;"></figcaption>

</figure>

原型鏈

<figure style="display: block; margin: 22px auto; text-align: center;">[圖片上傳失敗...(image-91c7f0-1543396429106)]

<figcaption style="display: block; text-align: center; font-size: 1rem; line-height: 1.6; color: rgb(144, 144, 144); margin-top: 2px;"></figcaption>

</figure>

構造函數以及js原生Object對象之間的原型關系

<figure style="display: block; margin: 22px auto; text-align: center;">[圖片上傳失敗...(image-60d83d-1543396429106)]

<figcaption style="display: block; text-align: center; font-size: 1rem; line-height: 1.6; color: rgb(144, 144, 144); margin-top: 2px;"></figcaption>

</figure>

原型的注意事項

  • 當對象在訪問屬性和方法的時候，會現在自身查找，如果沒有才回去原型中找。（一級一級傳遞 形成了原型鏈）
  • 替換原型對象的時候，替換之前構造函數創建的對象A和替換之后創建的對象B，A和B的原型是不一致的。
  • 對象能夠訪問的原型，就是在對象創建的那一刻，和構造函數關聯的那個原型

擴展以及延伸

<figure style="display: block; margin: 22px auto; text-align: center;">[圖片上傳失敗...(image-fa4be7-1543396429106)]

<figcaption style="display: block; text-align: center; font-size: 1rem; line-height: 1.6; color: rgb(144, 144, 144); margin-top: 2px;"></figcaption>

</figure>

構造函數

在很多編程語言中，如java，objectC,c++等，都存在類的概念，類中有私有屬性，私有方法等，通過類來實現面對對象的繼承，但是，在ES5以及以前中不像上面這幾種語言一樣，有嚴格的類的概念。js通過構造函數以及原型鏈來實現繼承。

特點
  • 首字母必須為大寫，用來區分普通函數
  • 內部使用的this對象，來指向即將要生成的實例對象
  • 使用new 關鍵字來生成實例對象（下面為new關鍵字的具體實現）
    var obj = new Date()
    // 可以分解為
    var obj = {};
    obj.__proto__ = Date.prototype;
    Base.call(obj)

復制代碼
缺點
  • 所有的實例對象都可以繼承構造器函數中的屬性和方法，但是同一個對象實例之間，無法共享屬性。
  • 如果方法在構造函數內部，每次new一個實例對象的時候，都會創建內部的這些方法，并且不同的實例對象之間，不能共享這些方法，造成了資源的浪費（于是有了原型這個概念）

實現方式 （簡單列舉幾種）

構造函數模式（自定義構造函數）

構造函數與普通函數的區別

//構造函數
function Egperson (name,age) {
    this.name = name;
    this.age = age;
    this.sayName = function () {
        alert(this.name);
     }
}
var person = new Egperson('mike','18'); //this-->person
person.sayName();  //'mike'

//普通函數
function egPerson (name,age) {
    this.name = name;
    this.age = age;
    this.sayName = function () {
        alert(this.name);
     }
}
egPerson('alice','23'); //this-->window
window.sayName();  //'alice'

復制代碼

工廠模式

function CreatePerson(name, age, gender){
    var obj = {};
    obj.name = name;
    obj.age = age;
    obj.gender = gender;
    //由于是函數調用模式，所以this打印出來是window
    console.log(this);
    return obj;
}
var p = CreatePerson("小明", 18, "male");  // 調用方式是函數的調用方式
復制代碼

寄生模式

function CreatePerson(name, age, gender){
    var obj = new Object();
    obj.name = name;
    obj.age = age;
    obj.gender = gender;
    //這里的this指向new 創建出來的對象
    console.log(this);
    return obj;
}
var p = new CreatePerson("小明", 18, "male");  // 調用方式是函數的調用方式

復制代碼

動態原型模式

function Person(name, age, job) {
    //屬性
    this.name = name;
    this.age = age;
    this.job = job;

    //方法
    if(typeof this.sayName != "function") {
        //所有的公有方法都在這里定義
        Person.prototype.sayName = function() {
            alert(this.name);
        }；

        Person.prototype.sayJob = function() {
            alert(this.job);
        };

        Person.prototype.sayAge = function() {
            alert(this.age);
        };
    }
}

var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");

person1.sayName();        //Nicholas
person2.sayName();        //Greg

復制代碼

js實現繼承的方式: 混入式繼承，原型繼承以及經典繼承，ES6的Class也可以實現繼承

Class 詳解

基本上，ES6 的class可以看作只是一個語法糖，它的絕大部分功能，ES5 都可以做到，新的class寫法只是讓對象原型的寫法更加清晰、更像面向對象編程的語法而已。

// ES5
function Point(x, y) {
  this.x = x;
  this.y = y;
}

Point.prototype.toString = function () {
  return '(' + this.x + ', ' + this.y + ')';
};

var p = new Point(1, 2);
// ES6

//定義類
class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}

復制代碼

特點

  • class中的constructor函數相當于ES5中的構造函數（聲明屬性以及靜態方法，這種類創建屬性和創建方法參照上面動態原型模式的構造函數。個人感覺有很多相似之處
  • 類中定義方法的時候，前面不加function，后面不加，可被實例對象也就是子類繼承的方法 定義在類的prototype屬性中。
  • 類的內部定義的所有方法都是不可枚舉的
  • 類和模塊內部默認采用嚴格模式
  • 子類繼承父類以后，必須在constructor中調用時super方法，否則不能新建實例，因為子類沒有屬于自己的this對象，而是繼承了父類的this對象對其進行加工

類中的原型鏈關系

每一個對象都有proto屬性，指向對應的構造函數的prototype屬性。Class 作為構造函數的語法糖，同時有prototype屬性和proto屬性，因此同時存在兩條繼承鏈。

  1. 子類的proto屬性，表示構造函數的繼承，總是指向父類。
  2. 子類prototype屬性的proto屬性，表示實例方法的繼承，總是指向父類的prototype屬性。
class A {
}

class B extends A {
}

B.__proto__ === A // true
B.prototype.__proto__ === A.prototype // true
復制代碼

類的繼承內部實現

class A {
}

class B {
}

// B 的實例繼承 A 的實例
Object.setPrototypeOf(B.prototype, A.prototype);

// B 繼承 A 的靜態屬性
Object.setPrototypeOf(B, A);

const b = new B();

Object.setPrototypeOf = function (obj, proto) {
  obj.__proto__ = proto;
  return obj;
}
復制代碼

作為一個對象，子類（B）的原型（proto屬性）是父類（A）；

作為一個構造函數，子類（B）的原型對象（prototype屬性）是父類的原型對象（prototype屬性）的實例。

Object.create(A.prototype);
// 等同于
B.prototype.__proto__ = A.prototype;
復制代碼

實例的 proto 屬性

子類實例的proto屬性的proto屬性，指向父類實例的proto屬性。也就是說，子類的原型的原型，是父類的原型。

var p1 = new Point(2, 3);
var p2 = new ColorPoint(2, 3, 'red');

p2.__proto__ === p1.__proto__ // false
p2.__proto__.__proto__ === p1.__proto__ // true

復制代碼

類中this指向問題

類的方法內部含有this，默認指向類的實例。但是當類中的實例方法提取出來使用的時候，this指向運行時所在環境。

解決方法（新版react中，在聲明綁定方法的時候 三種方式與此相同）

class Logger {
  constructor() {
    this.printName = this.printName.bind(this);
  }

  // ...
}

class Logger {
  constructor() {
    this.printName = (name = 'there') => {
      this.print(`Hello ${name}`);
    };
  }

  // ...
}

復制代碼

ES5與ES6 實現繼承的區別

  1. 在ES5中，繼承實質上是子類先創建屬于自己的this，然后再將父類的方法添加到this（也就是使用Parent.apply(this)的方式

  2. 而在ES6中，則是先創建父類的實例對象this，然后再用子類的構造函數修改this。

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市，隨后出現的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
    沈念sama閱讀 230,563評論 6贊 544
  • 死咒
    序言：濱河連續發生了三起死亡事件，死亡現場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機，發現死者居然都...
    沈念sama閱讀 99,694評論 3贊 429
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事。” “怎么了？”我有些...
    開封第一講書人閱讀 178,672評論 0贊 383
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長。 經常有香客問我，道長，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 63,965評論 1贊 318
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮，結果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當我...
    茶點故事閱讀 72,690評論 6贊 413
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著，像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上，一...
    開封第一講書人閱讀 56,019評論 1贊 329
  • 城市分裂傳說
    那天，我揣著相機與錄音，去河邊找鬼。 笑死，一個胖子當著我的面吹牛，可吹牛的內容都是我干的。 我是一名探鬼主播，決...
    沈念sama閱讀 44,013評論 3贊 449
  • 雙鴛鴦連環套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側響起，我...
    開封第一講書人閱讀 43,188評論 0贊 290
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當地人在樹林里發現了一具尸體，經...
    沈念sama閱讀 49,718評論 1贊 336
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,438評論 3贊 360
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,667評論 1贊 374
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
    沈念sama閱讀 39,149評論 5贊 365
  • ?日本核電站爆炸內幕
    正文 年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質發生泄漏。R本人自食惡果不足惜，卻給世界環境...
    茶點故事閱讀 44,845評論 3贊 351
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,252評論 0贊 28
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監牢的瞬間，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,590評論 1贊 295
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。 一個月前我還...
    沈念sama閱讀 52,384評論 3贊 400
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
    茶點故事閱讀 48,635評論 2贊 380