淺談javascript的原型及原型鏈

includecmath 發布于2019-08-20 14:17 / 3193人閱讀

摘要：在中，主要有兩種創建對象的方法分別是對象字面量以及調用構造函數對象字面量調用構造函數其實上述兩種創建對象的方法，本質上是一樣的，都是引擎調用對象的構造函數來新建出一個對象。

原型與原型鏈是javascript里面最最核心的內容，如果不能理解它們之間的存在關系的話，那么我們是不能理解這門語言的。

在JS中，主要有兩種創建對象的方法, 分別是對象字面量以及調用構造函數

//對象字面量
var obj1 = {}

//調用構造函數
var obj2 = new Object()

其實上述兩種創建對象的方法，本質上是一樣的，都是JS引擎調用對象的構造函數來新建出一個對象。構造函數本身也是一個普通的JS函數

下面我們來看一個例子

//創建構造函數
function Person(name){
    this.name = name
}

//每個構造函數JS引擎都會自動添加一個prototype屬性，我們稱之為原型，這是一個對象
//每個由構造函數創建的對象都會共享prototype上面的屬性與方法
console.log(typeof Person.prototype) // "object"


//我們為Person.prototype添加sayName方法
Person.prototype.sayName = function(){
    console.log(this.name)
}

//創建實例
var person1 = new Person("Messi")
var person2 = new Person("Suarez")

person1.sayName() // "Messi"
person2.sayName() // "Suarez"

person1.sayName === person2.sayName //true

我們借助上面的例子來理解構造函數-原型-實例，三者之間的關系，主要有幾個基本概念

構造函數默認會有一個protoype屬性指向它的原型

構造函數的原型會有一個consctructor的屬性指向構造函數本身, 即

    Person.prototype.constructor === Person

每一個new出來的實例都有一個隱式的__proto__屬性，指向它們的構造函數的原型，即

person1.__proto__ === Person.prototype
person1.__proto__.constructor === Person

了解了這些基本概念之后，我們再來看看javascript的一些原生構造函數的關系網，看下列的圖

引自stackoverflow

按照我們上面的理解, Oject本身是一個構造函數，它也是一個對象，那么

    Object.__proto__ === Function.prototype

為了方便我們記住上圖，還有幾個需要我們知道的特殊概念：

Function的原型屬性與Function的原型指向同一個對象. 即

    Function.__proto__ == Function.prototype

Object.prototype.__proto__ === null

typeof Function.prototype === "function"

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

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

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

淺談 JavaScript 原型鏈

摘要：數組的構造函數是原型鏈的指向與其他除以外的構造函數相同，的也指向頂級原型對象，每一個數組都是的實例，都指向。實例對象查找構造函數原型對象的方法一般會把對象共有的屬性和方法都放在構造函數的原型對象上。 showImg(https://segmentfault.com/img/remote/1460000018998704?w=900&h=506); 閱讀原文概述在 JavaScr...

explorer_ddf 2019-08-23 12:18 評論0 收藏0
淺談JavaScript原型與原型鏈

摘要：在講原型之前，先簡單介紹一下幾個概念構造函數例如上述代碼創建的函數就被稱為構造函數。同一個構造函數實例化得到的多個對象具有相同的原型對象，所以經常使用原型對象來實現繼承。實例對象通過操作構造函數所創建的對象是實例對象。對于很多前端開發者而言，JavaScript的原型實在是很讓人頭疼，所以我這邊就整理了一下自己對應原型的一點理解，分享給大家，供交流使用原型說起原型，那就不得不說p...

Zoom 2019-08-20 19:06 評論0 收藏0
淺談JavaScript原型與原型鏈

摘要：在講原型之前，先簡單介紹一下幾個概念構造函數例如上述代碼創建的函數就被稱為構造函數。同一個構造函數實例化得到的多個對象具有相同的原型對象，所以經常使用原型對象來實現繼承。實例對象通過操作構造函數所創建的對象是實例對象。對于很多前端開發者而言，JavaScript的原型實在是很讓人頭疼，所以我這邊就整理了一下自己對應原型的一點理解，分享給大家，供交流使用原型說起原型，那就不得不說p...

Yang_River 2019-08-01 17:31 評論0 收藏0
淺談JavaScript原型鏈

摘要：在這其中我們就逃不開要討論繼承原型對象構造函數實例了。想要獲得某一類型的構造函數可以用來獲得，也可以對該屬性進行賦值操作。三上面就提到一點是指構造函數的原型對象，它是一個對象，它是構造函數的屬性。原型鏈這一個話題，需要和很多概念一起講，才能串成一個比較系統的知識點。在這其中我們就逃不開要討論繼承、原型對象、構造函數、實例了。一、構造函數構造函數是一類特殊的函數，它的作用是用來生成...

xumenger 2019-08-23 14:31 評論0 收藏0