成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JavaScript中的原型與原型鏈

laoLiueizo / 573人閱讀

摘要：前言作為前端高頻面試題之一，相信很多小伙伴都有遇到過這個問題。

前言

作為前端高頻面試題之一，相信很多小伙伴都有遇到過這個問題。那么你是否清楚完整的了解它呢？

國際慣例，讓我們先拋出問題：

什么是原型、原型鏈

它們有什么特點

它們能做什么

怎么確定它們的關(guān)系

或許你已經(jīng)有答案，或許你開始有點疑惑，無論是 get 新技能或是簡單的溫習(xí)一次，讓我們一起去探究一番吧

如果文章中有出現(xiàn)紕漏、錯誤之處，還請看到的小伙伴多多指教，先行謝過

以下↓

原型 
JavaScript 是基于原型的
我們創(chuàng)建的每個函數(shù)都有一個 prototype(原型) 屬性，這個屬性是一個指針，指向一個對象，而這個對象的用途是包含可以由特定類型的所有實例共享的屬性和方法。

簡單來說，就是當(dāng)我們創(chuàng)建一個函數(shù)的時候，系統(tǒng)就會自動分配一個 prototype屬性，可以用來存儲可以讓所有實例共享的屬性和方法

用一張圖來表示就更加清晰了：

圖解：

每一個構(gòu)造函數(shù)都擁有一個 prototype 屬性，這個屬性指向一個對象，也就是原型對象

原型對象默認(rèn)擁有一個 constructor 屬性，指向指向它的那個構(gòu)造函數(shù)

每個對象都擁有一個隱藏的屬性 __proto__，指向它的原型對象

function Person(){}

var p = new Person();

p.__proto__ === Person.prototype // true

Person.prototype.constructor === Person // true

那么，原型對象都有哪些特點呢

原型特點 
function Person(){}
Person.prototype.name = "tt";
Person.prototype.age = 18;
Person.prototype.sayHi = function() {
    alert("Hi");
}
var person1 = new Person();
var person2 = new Person();
person1.name = "oo";
person1.name // oo
person1.age // 18
perosn1.sayHi() // Hi
person2.age // 18
person2.sayHi() // Hi

從這段代碼我們不難看出：

實例可以共享原型上面的屬性和方法

實例自身的屬性會屏蔽原型上面的同名屬性，實例上面沒有的屬性會去原型上面找

既然原型也是對象，那我們可不可以重寫這個對象呢？答案是肯定的

function Person() {}
Person.prototype = {
    name: "tt",
    age: 18,
    sayHi() {
        console.log("Hi");
    }
}

var p = new Person()

只是當(dāng)我們在重寫原型鏈的時候需要注意以下的問題:

function Person(){}
var p = new Person();
Person.prototype = {
    name: "tt",
    age: 18
}

Person.prototype.constructor === Person // false

p.name // undefined

一圖勝過千言萬語

在已經(jīng)創(chuàng)建了實例的情況下重寫原型，會切斷現(xiàn)有實例與新原型之間的聯(lián)系

重寫原型對象，會導(dǎo)致原型對象的 constructor 屬性指向 Object ，導(dǎo)致原型鏈關(guān)系混亂，所以我們應(yīng)該在重寫原型對象的時候指定 constructor( instanceof 仍然會返回正確的值)

Person.prototype = {
    constructor: Person
}

注意：以這種方式重設(shè) constructor 屬性會導(dǎo)致它的 Enumerable 特性被設(shè)置成 true(默認(rèn)為false)

既然現(xiàn)在我們知道了什么是 prototype(原型)以及它的特點，那么原型鏈又是什么呢？

原型鏈 
JavaScript 中所有的對象都是由它的原型對象繼承而來。而原型對象自身也是一個對象，它也有自己的原型對象，這樣層層上溯，就形成了一個類似鏈表的結(jié)構(gòu)，這就是原型鏈

同樣的，我們使用一張圖來描述

所有原型鏈的終點都是 Object 函數(shù)的 prototype 屬性

Objec.prototype 指向的原型對象同樣擁有原型，不過它的原型是 null ，而 null 則沒有原型

清楚了原型鏈的概念，我們就能更清楚地知道屬性的查找規(guī)則，比如前面的 p 實例屬性.如果自身和原型鏈上都不存在這個屬性，那么屬性最終的值就是 undefined ，如果是方法就會拋出錯誤

class類 
ES6 提供了 Class(類) 這個概念，作為對象的模板，通過 class 關(guān)鍵字，可以定義類

為什么會提到 class ：

ES6 的 class 可以看作只是一個語法糖，它的絕大部分功能，ES5 都可以做到，新的 class 寫法只是讓對象原型的寫法更加清晰、更像面向?qū)ο缶幊痰恼Z法而已

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

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

// 可以這么改寫
function Point(x, y) {
  this.x = x;
  this.y = y;
}

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

class 里面定義的方法，其實都是定義在構(gòu)造函數(shù)的原型上面實現(xiàn)實例共享,屬性定義在構(gòu)造函數(shù)中，所以 ES6 中的類完全可以看作構(gòu)造函數(shù)的另一種寫法

除去 class 類中的一些行為可能與 ES5 存在一些不同，本質(zhì)上都是通過原型、原型鏈去定義方法、實現(xiàn)共享。所以，還是文章開始那句話 JavaScript是基于原型的

更多 class 問題，參考這里

關(guān)系判斷 
instanceof

最常用的確定原型指向關(guān)系的關(guān)鍵字，檢測的是原型,但是只能用來判斷兩個對象是否屬于實例關(guān)系， 而不能判斷一個對象實例具體屬于哪種類型

function Person(){}
var p = new Person();

p instanceof Person // true
p instanceof Object // true
hasOwnProperty

通過使用 hasOwnProperty 可以確定訪問的屬性是來自于實例還是原型對象

function Person() {}
Person.prototype = {
    name: "tt"
}
var p = new Person();
p.age = 15;

p.hasOwnProperty("age") // true
p.hasOwnProperty("name") // false
原型鏈的問題

由于原型鏈的存在，我們可以讓很多實例去共享原型上面的方法和屬性，方便了我們的很多操作。但是原型鏈并非是十分完美的

function Person(){}
Person.prototype.arr = [1, 2, 3, 4];

var person1 = new Person();
var person2 = new Person();

person1.arr.push(5) 
person2.arr // [1, 2, 3, 4, 5]

引用類型，變量保存的就是一個內(nèi)存中的一個指針。所以，當(dāng)原型上面的屬性是一個引用類型的值時，我們通過其中某一個實例對原型屬性的更改，結(jié)果會反映在所有實例上面，這也是原型 共享 屬性造成的最大問題

另一個問題就是我們在創(chuàng)建子類型（比如上面的 p）時，沒有辦法向超類型（ Person ）的構(gòu)造函數(shù)中傳遞參數(shù)

后記

鑒于原型的特點和存在的問題，所以我們在實際開發(fā)中一般不會多帶帶使用原型鏈。一般會使用構(gòu)造函數(shù)和原型相配合的模式，當(dāng)然這也就牽扯出了 JavaScript 中另一個有意思的領(lǐng)域：繼承

那么，什么又是繼承呢

且聽下回分解

最后，推薦一波前端學(xué)習(xí)歷程，不定期分享一些前端問題和有意思的東西歡迎 star 關(guān)注 傳送門

參考文檔

JavaScript高級程序設(shè)計

ECMAScript6入門

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/103610.html

相關(guān)文章

  • 進擊JavaScript之（四）原型與原型鏈

    摘要：每一個由構(gòu)造函數(shù)創(chuàng)建的對象都會默認(rèn)的連接到該神秘對象上。在構(gòu)造方法中也具有類似的功能，因此也稱其為類實例與對象實例一般是指某一個構(gòu)造函數(shù)創(chuàng)建出來的對象，我們稱為構(gòu)造函數(shù)的實例實例就是對象。表示該原型是與什么構(gòu)造函數(shù)聯(lián)系起來的。 本文您將看到以下內(nèi)容： 傳統(tǒng)構(gòu)造函數(shù)的問題 一些相關(guān)概念 認(rèn)識原型 構(gòu)造、原型、實例三角結(jié)構(gòu)圖 對象的原型鏈 函數(shù)的構(gòu)造函數(shù)Function 一句話說明什么...

    XBaron 評論0 收藏0

  • 《javascript高級程序設(shè)計》筆記：原型圖解

    摘要：不理解沒關(guān)系，下面會結(jié)合圖例分析上一篇高級程序設(shè)計筆記創(chuàng)建對象下一篇高級程序設(shè)計筆記繼承參考之原型鏈的解讀三張圖搞懂的原型對象與原型鏈繼承與原型鏈 文章直接從原型圖解開始的，如果對一些概念不太清除，可以結(jié)合后面幾節(jié)查看 1. 圖解原型鏈 1.1 鐵三角關(guān)系（重點） function Person() {}; var p = new Person(); showImg(https://s...

    vspiders 評論0 收藏0

  • JavaScript系列--淺析原型鏈與繼承

    摘要：綜上所述有原型鏈繼承，構(gòu)造函數(shù)繼承經(jīng)典繼承，組合繼承，寄生繼承，寄生組合繼承五種方法，寄生組合式繼承，集寄生式繼承和組合繼承的優(yōu)點于一身是實現(xiàn)基于類型繼承的最有效方法。 一、前言 繼承是面向?qū)ο螅∣OP）語言中的一個最為人津津樂道的概念。許多面對對象（OOP）語言都支持兩種繼承方式:：接口繼承 和 實現(xiàn)繼承 。 接口繼承只繼承方法簽名,而實現(xiàn)繼承則繼承實際的方法。由于js中方法沒有簽名...

    draveness 評論0 收藏0

  • 你是否理解js的Object與Function與原型鏈

    摘要：原型對象是由創(chuàng)建的，因此原型對象的構(gòu)造函數(shù)是構(gòu)造函數(shù)也可以是稱為對象，原型對象也就繼承了其生父構(gòu)造函數(shù)中的數(shù)據(jù)，也同時繼承了原型對象的數(shù)據(jù)。當(dāng)然這條原型鏈中的數(shù)據(jù)，會被還是還是這類構(gòu)造函數(shù)繼承，但是不會被這些繼承，他們不處于同一個鏈條上。 js中，F(xiàn)unction的本質(zhì)是什么？Object的本質(zhì)又是什么？js中有幾條原型鏈？ showImg(https://segmentfault.c...

    itvincent 評論0 收藏0

  • 徹底理解Javascript中的原型鏈與繼承

    摘要：在節(jié)中，我們學(xué)習(xí)到了通過構(gòu)造函數(shù)創(chuàng)建對象的三個重要步驟，其中的一步是把構(gòu)造函數(shù)的對象設(shè)置為創(chuàng)建對象的原型。利用而不是直接用創(chuàng)建一個實例對象的目的是，減少一次調(diào)用父構(gòu)造函數(shù)的執(zhí)行。 JavaScript語言不像面向?qū)ο蟮木幊陶Z言中有類的概念，所以也就沒有類之間直接的繼承，JavaScript中只有對象，使用函數(shù)模擬類，基于對象之間的原型鏈來實現(xiàn)繼承關(guān)系，ES6的語法中新增了class關(guān)鍵...

    ziwenxie 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<