原型鏈

Riddler 發布于2019-08-26 10:35 / 2245人閱讀

摘要：一創建對象有幾種方法第一種方式字面量，默認創建對象第二種方式構造函數第三種方式之后輸入能得到二實例構造函數原型原型鏈實例對象就是一個實例，就有屬性。通過把原型對象和構造函數關聯。四運算符構造函數運算符的工作原理最后返回的結果完全等同。

一、創建對象有幾種方法

    // 第一種方式：字面量，默認創建對象     
    var a10 = {name:"a10"};             // {name: "a10"}  
    var a11 = new Object({name:"a11"}); // {name: "a11"}

    // 第二種方式：構造函數     
    var a2 = function(){this.name = "a20"};  
    var a20 = new a2();                 // a2 {name: "a20"}
    
    // 第三種方式：Object.create()       
    var a3 = {name:"a30"};
    var a30 = Object.create(a3);        // {} 之后輸入 a30.name 能得到 "a30"

二、實例、構造函數、原型、原型鏈

2.1 實例

對象就是一個實例，就有 _proto_ 屬性。

實例通過 _proto_ 原型鏈找到 prototype 原型對象，prototype 原型對象的屬性被所有實例共享。

2.2 構造函數

通過 new 來創建對象實例。

任何函數都可以作為構造函數。

只要被new運算符使用過的函數就是一個構造函數。

2.3 原型

函數都有 prototype 屬性，prototype 屬性的值就是一個初始化的原型對象。

原型對象有個 constructor 和 _proto_ 屬性，constructor 是一個構造函數。

Fn.prototype.constructor === Fn （constructor 函數指向構造函數本身。通過 constructor 把原型對象和構造函數關聯。）

2.4 原型鏈

每一個對象都有自己的原型對象，原型對象本身也是對象，原型對象也有自己的原型對象，這樣就形成了一個鏈式結構，叫做原型鏈。

三、instanceof的原理

instanceof 主要作用就是判斷一個實例是否屬于某種類型，實現原理就是只要右邊變量的 prototype 在左邊變量的原型鏈上即可。因此，instanceof 在查找的過程中會遍歷左邊變量的原型鏈，直到找到右邊變量的 prototype，如果查找失敗，則會返回 false。

四、new運算符

// 構造函數
var Fn = function(name) {
  this.name = name;
}
var obj = new Fn("obj");

new 運算符的工作原理：

var newTest = function(fn) {
    var initObj = Object.create(fn.prototype);
    var obj = fn.call(initObj);
    if(typeof obj === "object") {
      return obj;
    } else {
      return initObj;
    }
}
var Fn = function() {
  // this.name = "obj", 最后newTest(Fn)返回的結果完全等同。
  return {
    name: "obj";
  }
}
newTest(Fn)

原文地址:https://www.artroy.com.cn/art...
更多文章分享：https://www.artroy.com.cn/

GPU云服務器云服務器原型原型鏈原型鏈原型鏈繼承原型鏈圖

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

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

《javascript高級程序設計》筆記：原型圖解

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

vspiders 2019-08-21 17:29 評論0 收藏0
如何理解JavaScript的原型和原型鏈？

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

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

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

adie 2019-08-23 16:54 評論0 收藏0
【5】JavaScript 函數高級——原型與原型鏈深入理解（圖解）

摘要：探索是如何判斷的表達式如果函數的顯式原型對象在對象的隱式原型鏈上，返回，否則返回是通過自己產生的實例案例案例重要注意的顯示原型和隱式原型是一樣的。面試題測試題測試題報錯對照下圖理解原型與原型鏈深入理解（圖解）原型（prototype）函數的 prototype 屬性（圖）每個函數都有一個prototype屬性，它默認指向一個Object空對象（即稱為：原型對象）原型對象中有...

馬龍駒 2019-08-23 17:17 評論0 收藏0
JS基礎-原型、原型鏈真的不能一知半解

摘要：原型鏈和對象的原型是對象實例和它的構造函數之間建立的鏈接，它的值是構造函數的。對象的原型根據上文提到的構造調用函數的時候會創建一個新對象，自動將的原型指向構造函數的對象。 showImg(https://segmentfault.com/img/remote/1460000020185197); JS的原型、原型鏈一直是比較難理解的內容，不少初學者甚至有一定經驗的老鳥都不一定能完全說清...

changfeng1050 2019-08-26 11:00 評論0 收藏0
JavaScript面向對象---原型鏈繼承

摘要：因為這造成了繼承鏈的紊亂，因為的實例是由構造函數創建的，現在其屬性卻指向了為了避免這一現象，就必須在替換對象之后，為新的對象加上屬性，使其指向原來的構造函數。這個函數接收兩個參數子類型構造函數和超類型構造函數。最近一直在研究js面向對象，原型鏈繼承是一個難點，下面是我對繼承的理解以下文章借鑒自CSDN季詩筱的博客原型鏈繼承的基本概念： ES中描述了原型鏈的概念，并將原型鏈作為實現...

vspiders 2019-08-20 13:33 評論0 收藏0