原型鏈、繼承和 instanceof

hqman 發布于2019-08-20 14:31 / 2413人閱讀

摘要：原型鏈繼承和參考理解的原型鏈和繼承實現了什么操作的過程發生了什么原型鏈和屬性原型鏈是什么上面的是什么就是原型鏈，原型鏈是內部，指向它父類的。通過這一句說明的原型鏈就是指向函數的屬性。這可以為后面提到的繼承做準備。

原型鏈、繼承和 instanceof

參考：
MDN：instanceof
MDN：Inheritance and the prototype chain
理解JavaScript的原型鏈和繼承

new實現了什么操作

new的過程發生了什么？

function A(name){
  this.name = name
}
var a = new A("hehe")

 // var a = new A("hehe") =>
 var a = new Object();
 a.__proto__ = A.prototype; 
 A.call(a, "hehe");

原型鏈和prototype屬性 原型鏈是什么

上面的 __proto__ 是什么？
就是原型鏈，原型鏈是內部 [ [Prototype ]]，指向它“父類”的prototype。

打開瀏覽器控制臺，可以看到函數變量都有一個prototype屬性（箭頭函數沒有）。
通過這一句a.__proto__ = A.prototype; 說明a的原型鏈就是指向函數A的prototype屬性。

這里就有一個重要的認識了，雖然名字很像，但是原型鏈并不是prototype屬性，同時原型鏈指向“父類”的prototype。幾乎所有對象都有原型鏈（除了null和undefined），通過__proto__ 可以看到原型鏈指向什么（當然最好使用 Object.getPrototypeOf 取原型鏈）

通過實驗可以發現，js中對象的鏈可以非常復雜。
一圖勝千言。這里借一張圖。

簡而言之

函數對象，Function，Object，Array等等的原型鏈都指向Function.prototype

通過new操作符創建的對象原型鏈指向原來的函數的prototype屬性

Object.prototype屬性的原型鏈指向null（到null就停止了）

而Function.prototype（Array，Date，String等等），以及函數對象的prototype，原型鏈都指向Object.prototype

prototype屬性究竟是什么呢

可以看到是一個Object，有constructor和原型鏈。constructor是一個函數，也就是函數自身。這可以為后面提到的繼承做準備。

instanceof什么意思

The instanceof operator tests whether an object has in its prototype chain the prototype property of a constructor.

Syntax：
object instanceof constructor

意思就是object.__proto__===constructor.prototype

MDN的教程中舉例

// defining constructors
function C() {}
var o = new C();
// true, because: Object.getPrototypeOf(o) === C.prototype
o instanceof C;

但是

var simpleStr = "This is a simple string"; 
var myString  = new String();

simpleStr instanceof String; // returns false, checks the prototype chain, finds undefined

可是在瀏覽器中試驗Object.getPrototypeOf(simpleStr) === String.prototype
結果是true，大概這算作一個特殊情況

如何實現繼承

https://babeljs.io/repl/
可以在這個網站在線編譯并查看結果

class A{
  constructor(name) {
    this.name= name
  }
  toString() {
    return this.name
  }
}
class B extends A {
  toString(){
    return this.name + "b"
  }
}

編譯出來的ES5繼承

function _inherits(subClass, superClass) { 
    subClass.prototype.__proto__=superClass.prototype;
}
var A = (function () {
    function A(name) {
        this.name = name;
    }
    A.prototype.toString = function toString() {
        return this.name;
    };
    return A;
})();
var B = (function (_A) {
    function B() {
        if (_A != null) {
            _A.apply(this, arguments);
        }
    }
    _inherits(B, _A);
    B.prototype.toString = function toString() {
        return this.name + "b";
    };
    return B;
})(A);

簡單來說就是這樣

云服務器 GPU云服務器原型鏈繼承 js原型鏈的繼承原型繼承原型原型鏈

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

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

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

摘要：綜上所述有原型鏈繼承，構造函數繼承經典繼承，組合繼承，寄生繼承，寄生組合繼承五種方法，寄生組合式繼承，集寄生式繼承和組合繼承的優點于一身是實現基于類型繼承的最有效方法。一、前言繼承是面向對象（OOP）語言中的一個最為人津津樂道的概念。許多面對對象（OOP）語言都支持兩種繼承方式:：接口繼承和實現繼承。接口繼承只繼承方法簽名,而實現繼承則繼承實際的方法。由于js中方法沒有簽名...

draveness 2019-08-23 18:06 評論0 收藏0
如何理解JavaScript的原型和原型鏈？

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

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

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

adie 2019-08-23 16:54 評論0 收藏0
JS中繼承方式總結

摘要：三組合繼承結合原型鏈方式和借用構造函數方式的有點，進行改進的一種繼承方式。四寄生組合式繼承為了解決組合繼承中子構造函數的原型鏈出現冗余的屬性和方法，引入的一種繼承方式。說在前面：為了使代碼更為簡潔方便理解，本文中的代碼均將非核心實現部分的代碼移出。一、原型鏈方式關于原型鏈，可點擊《深入淺出，JS原型鏈的工作原理》，本文不再重復敘述。思路：讓子構造函數的原型等于父構造函數的實例...

rottengeek 2019-08-26 13:27 評論0 收藏0
面向對象的小九九

摘要：由構造函數返回的對象就是表達式的結果。如果構造函數沒有顯式返回一個對象，則使用步驟創建的對象。運算符返回一個布爾值，表示對象是否為某個構造函數的實例。面向對象本人能力有限，有誤請斧正本文旨在復習面向對象(不包含es6) 本文學習思維創建對象的方式，獲取對象屬性構造函數,構造函數的new 做了什么原型與原型對象原型鏈繼承(借用構造繼承、原型繼承、組合繼承、寄生組合繼承)...

時飛 2019-08-22 18:16 評論0 收藏0