原型鏈

Riddler 發(fā)布于2019-08-26 10:35 / 2276人閱讀

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

一、創(chuàng)建對象有幾種方法

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

    // 第二種方式：構(gòu)造函數(shù)     
    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"

二、實例、構(gòu)造函數(shù)、原型、原型鏈

2.1 實例

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

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

2.2 構(gòu)造函數(shù)

通過 new 來創(chuàng)建對象實例。

任何函數(shù)都可以作為構(gòu)造函數(shù)。

只要被new運算符使用過的函數(shù)就是一個構(gòu)造函數(shù)。

2.3 原型

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

原型對象有個 constructor 和 _proto_ 屬性，constructor 是一個構(gòu)造函數(shù)。

Fn.prototype.constructor === Fn （constructor 函數(shù)指向構(gòu)造函數(shù)本身。通過 constructor 把原型對象和構(gòu)造函數(shù)關聯(lián)。）

2.4 原型鏈

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

三、instanceof的原理

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

四、new運算符

// 構(gòu)造函數(shù)
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)返回的結(jié)果完全等同。
  return {
    name: "obj";
  }
}
newTest(Fn)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

changfeng1050 2019-08-26 11:00 評論0 收藏0
JavaScript面向?qū)ο?--原型鏈繼承

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

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