javascript---自己對原型鏈的小理解

Sanchi 發布于2019-08-20 11:32 / 3251人閱讀

摘要：原型的作用通過構造函數創建的對象，可以使用原型上的屬性和方法，即原型可以讓實例共享它的方法和屬性。

1、什么是原型？

原型是函數自帶的一個屬性prototype，該屬性的值指向一個對象 ( 因為存的是對象的指針 )。

2、原型的作用

通過構造函數創建的對象，可以使用原型上的屬性和方法，即原型可以讓實例共享它的方法和屬性。

function Car(brand) { 
    this.brand = brand;
}

// 原型
Car.prototype.drive = function() {
    console.log("開車");
} 

// 創建對象(實例)
var x3 = new Car("BMW");
var glc300 = new Car("Benz");

// 兩個實例都可以訪問原型上的方法
x3.drive();
glc300.drive();

3、prototype

函數默認就有的屬性，這個屬性指向原型(原型對象)。

4、__proto__

對象默認就有的屬性，這個屬性也指向原型(原型對象)。

5、原型的稱呼問題

prototype 這個屬性, 我們稱之為原型屬性, 或者顯示原型
.__proto__ 這個屬性, 我們稱之為原型對象, 或者隱式原型

6、prototype和__proto__的區別

它們兩個是不同的屬性

prototype是函數的屬性，它存的是對象的指針，指向原型對象

函數中prototype的作用：

將來創建的實例對象的__proto__屬性會根據構造函數的prototype屬性來定義。

__proto__是對象的屬性，它也指向原型

對象中__proto__的作用：

對象可以訪問__proto__屬性所指向的那個原型對象中的屬性和方法

7、constructor

所有原生的原型都有這個屬性，該屬性的值存的是構造函數的指針（地址）

因為構造函數.prototype 的值可以被改變，所以修改之后就不是原生原型了。

    function Car(brand) { 
        this.brand = brand;
    }

    // 原型
    Car.prototype.drive = function() {
        console.log("開車");
    } 

    // 創建對象(實例)
    var x3 = new Car("BMW");

    // 可以獲取對象的具體類型
    console.log(x3.constructor.name);    // 輸出Car

    // 動態修改原型的屬性, 盡量不要這么干, 最好一次性在最初就定義好
    Car.prototype.drive = function() {
        console.log("飚車");
    }

8、原型鏈

javascript中的對象都有一個內置的proto屬性，這個屬性指向創建該對象的構造函數的prototype（Fucntion.prototype-原型對象），這個原型對象也是對象，也會有自己的proto，指向它自己的原型對象，這樣直到某個對象的原型為null為止，這樣的一級一級的鏈結構就稱為原型鏈。

  // 實例對象f的原型 指向 原型對象F.prototype
  f.__proto__   =>   F.prototype, 
  
  // 原型對象F.prototype的原型 指向 原型對象Object.prototype
  F.prototype.__proto__   =>   Object.prototype，
  
  // 原型對象Object.prototype的原型 指向 null
  Object.prototype.__proto__   =>   null

原型鏈的作用就是用來實現繼承（繼承：對象可以使用不屬于自己的屬性或者方法）；
當訪問一個對象的屬性或者方法時，首先會在對象的自身查找，
如果沒有，則根據該對象的proto屬性的指向，到該對象的原型對象上查找，
如果還沒有找到，就再根據原型對象的proto去查找，一直到Object.prototype為止。

舉個栗子

var arr = [];
console.log(arr.hasOwnProperty("push"));                 // false
console.log(Array.hasOwnProperty("push"));               // false
console.log(Array.prototype.hasOwnProperty("push"));     // true     
console.log(arr.push === Array.prototype.push);          // true

比如我們創建一個數組, 數組arr本身是沒有push方法的, push方法就是從數組的原型對象上繼承而來的.

最后是一張原型繼承結構的圖

云服務器 GPU云服務器 js原型鏈的繼承關于區塊鏈的小故事 javascript原型國家對區塊鏈的態度

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/80626.html

如何理解JavaScript的原型和原型鏈？

摘要：之前有朋友問怎么去理解原型和原型鏈的問題。理解原型鏈的小技巧將箭頭視作泛化子類到父類關系那么圖中所有的虛線將構成一個繼承層級，而實線表示屬性引用。原型鏈是實現繼承的重要方式，原型鏈的形成是真正是靠而非。之前有朋友問怎么去理解原型和原型鏈的問題。這個問題，在面試中，很多同學經常都會遇到。這里給大家講講，方便大家記憶。 JavaScript的特點JavaScript是一門直譯式腳本...

xuexiangjys 2019-08-02 16:12 評論0 收藏0
如何理解JavaScript的原型和原型鏈？

摘要：之前有朋友問怎么去理解原型和原型鏈的問題。理解原型鏈的小技巧將箭頭視作泛化子類到父類關系那么圖中所有的虛線將構成一個繼承層級，而實線表示屬性引用。原型鏈是實現繼承的重要方式，原型鏈的形成是真正是靠而非。之前有朋友問怎么去理解原型和原型鏈的問題。這個問題，在面試中，很多同學經常都會遇到。這里給大家講講，方便大家記憶。 JavaScript的特點JavaScript是一門直譯式腳本...

adie 2019-08-23 16:54 評論0 收藏0
JavaScript 原型系統的變遷，以及 ES6 class

摘要：一般我們對這種構造函數命名都會采用，并把它稱呼為類，這不僅是為了跟的理念保持一致，也是因為的內建類也是這種命名。由生成的對象，其是。這是標準的規定。本文的主題是原型系統的變遷，所以并沒有涉及和對原型鏈的影響。概述 JavaScript 的原型系統是最初就有的語言設計。但隨著 ES 標準的進化和新特性的添加。它也一直在不停進化。這篇文章的目的就是梳理一下早期到 ES5 和現在 ES6，...

chuyao 2019-08-22 11:59 評論0 收藏0
我所認識的JavaScript作用域鏈和原型鏈

摘要：為了防止之后自己又開始模糊，所以自己來總結一下中關于作用域鏈和原型鏈的知識，并將二者相比較看待進一步加深理解。因此我們發現當多個作用域相互嵌套的時候，就形成了作用域鏈。原型鏈原型說完了作用域鏈，我們來講講原型鏈。　　畢業也整整一年了，看著很多學弟都畢業了，忽然心中頗有感慨，時間一去不復還呀。記得從去年這個時候接觸到JavaScript,從一開始就很喜歡這門語言，當時迷迷糊糊看完了《J...

Bmob 2019-08-20 17:36 評論0 收藏0
javascript-從toString方法在判斷復雜數據類型上的妙用，引申到對原型鏈的理解

摘要：所以，當我們使用時，不能進行復雜數據類型的判斷，因為它調用的是，雖然也繼承自，但在上重寫了，而我們通過實際上是通過原型鏈調用了。關于 toString 方法在有關js的開發中使用應該是相當廣泛的，這兩天在看jQuery的源碼，從 toString 本身了解與鞏固了不少知識，寫出來與大家一同分享。首先先上一段代碼： var arr=[1,2,3]; toString.call(arr)...

sean 2019-08-20 10:41 評論0 收藏0