JavaScript原型與原型鏈

timger 發布于2019-08-22 16:29 / 2034人閱讀

摘要：語言使用構造函數作為對象的模板。構造函數就是一個普通的函數，為了與普通函數區別，構造函數名字的第一個字母通常大寫。構造函數的特點有兩個。命令命令的作用，就是執行構造函數，返回一個實例對象。將這個空對象的原型，指向構造函數的屬性。

一、數據類型

JavaScript的數據類型可以分為基本數據類型和引用數據類型。

基本數據類型(6種)

String

Number

Boolean

null

undefined

Symbol(ES6)

引用數據類型

Object

二、面向對象編程

構造函數

面向對象編程的第一步，就是要生成對象。前面說過，對象是單個實物的抽象。通常需要一個模板，表示某一類實物的共同特征，然后對象根據這個模板生成。

JavaScript 語言使用構造函數（constructor）作為對象的模板。所謂”構造函數”，就是專門用來生成實例對象的函數。它就是對象的模板，描述實例對象的基本結構。一個構造函數，可以生成多個實例對象，這些實例對象都有相同的結構。

構造函數就是一個普通的函數，為了與普通函數區別，構造函數名字的第一個字母通常大寫。

構造函數的特點有兩個。

函數體內部使用了this關鍵字，代表了所要生成的對象實例。

使用new命令生成對象。

2. new命令
new命令的作用，就是執行構造函數，返回一個實例對象。

new 命令的原理

創建一個空對象，作為將要返回的對象實例。

將這個空對象的原型，指向構造函數的prototype屬性。

將這個空對象賦值給函數內部的this關鍵字。

開始執行構造函數內部的代碼。

如果構造函數內部有return語句，而且return后面跟著一個對象，new命令會返回return語句指定的對象；否則，返回this對象。

var Fn=function(){
    this.name="xxx";
    this.old=18;
}
var f1=new Fn();
console.log(f1.name);//xxx
console.log(f1.old);//18

上面代碼通過new命令，讓構造函數Fn生成一個實例對象，保存在變量f1中。這個新生成的實例對象，從構造函數Fn得到了name和old屬性。new命令執行時，構造函數內部的this，就代表了新生成的實例對象,this.name和this.old是實例對象的屬性。

var Fn2=function(){
    name="xxx";
    old=18;
}
var f2=new Fn2();
console.log(f2.name);//undefined
console.log(f2.old);//undefined
f2.name="yyy";
console.log(f2.name);//yyy

三、原型與原型鏈

對象是函數創建的，而函數卻又是一種對象。也是屬性的集合，可以對函數進行自定義屬性。
每個函數都有一個屬性叫做prototype。
這個prototype的屬性值是一個對象，默認的只有一個叫做constructor的屬性，指向這個函數本身。

var Fn=function(){
    this.name="xxx";
    this.old=18;
}

回到上面new命令的原理的第二條，從這張圖可以看到對象的原型，指向構造函數的prototype屬性。

f1.__proto__指向構造函數的prototype屬性,就是對象的原型。所以f1.__proto__===Fn.prototype為true

prototype的屬性值是一個對象，默認的只有一個叫做constructor的屬性，指向這個函數本身。

左邊為Fn函數，右邊就是它的原型

在上面可以看到f1.__proto__===Fn.prototype的結果為true
__proto__就是指向構造函數的prototype屬性，Fn.prototype就是對象的原型

即,每個由構造函數創建的對象都有一個__proto__屬性，指向創建該對象的函數的prototype。

基于以上，我們得到一個重要的公式
var 對象名 = new 函數名()
對象名.__proto__=== 函數名.prototype

小結

自定義函數.__proto__指向Function.prototype

Object.__proto__指向Function.prototype即Object.__proto__ === Function.prototype//true

Function.__proto__指向Function.prototype:Function也是一個函數，函數是一種對象，也有__proto__屬性。既然是函數，那么它一定是被Function創建。所以Function是被自身創建的。所以它的__proto__指向了自身的Prototype。

Function.prototype.__proto__===Object.prototype//true

Object.prototype的__proto__指向的是null

總結

對象是函數創建的，而函數卻又是一種對象。也是屬性的集合

每個函數都有一個屬性叫做prototype。

對象的原型，指向構造函數的prototype屬性。

prototype的屬性值是一個對象，默認的只有一個叫做constructor的屬性，指向這個函數本身。

原型既然作為對象，屬性的集合，可以自定義的增加許多屬性。

總之記住下面這幾個要點

Object對象是由Function函數創建的

所有函數都是由Function創建的,函數也是對象

重要的公式

var 對象名 = new 函數名()

對象名.__proto__=== 函數名.prototype

普通函數的prototype屬性值是一個對象

Function.prototype有__proto__這個屬性

Object.prototype.__proto__===null結果為true

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

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

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

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

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

vspiders 2019-08-21 17:29 評論0 收藏0
JavaScript中的原型與原型鏈

摘要：前言作為前端高頻面試題之一，相信很多小伙伴都有遇到過這個問題。前言作為前端高頻面試題之一，相信很多小伙伴都有遇到過這個問題。那么你是否清楚完整的了解它呢？國際慣例，讓我們先拋出問題：什么是原型、原型鏈它們有什么特點它們能做什么怎么確定它們的關系或許你已經有答案，或許你開始有點疑惑，無論是 get 新技能或是簡單的溫習一次，讓我們一起去探究一番吧如果文章中有出現紕...

laoLiueizo 2019-08-23 16:58 評論0 收藏0
進擊JavaScript之（四）原型與原型鏈

摘要：每一個由構造函數創建的對象都會默認的連接到該神秘對象上。在構造方法中也具有類似的功能，因此也稱其為類實例與對象實例一般是指某一個構造函數創建出來的對象，我們稱為構造函數的實例實例就是對象。表示該原型是與什么構造函數聯系起來的。本文您將看到以下內容：傳統構造函數的問題一些相關概念認識原型構造、原型、實例三角結構圖對象的原型鏈函數的構造函數Function 一句話說明什么...

XBaron 2019-08-20 10:45 評論0 收藏0
繼承與原型

摘要：既然構造函數有屬于自己的原型對象，那么我們應該能讓另一個構造函數來繼承他的原型對象咯我們在構造函數內部執行了函數并改變了函數內部的指向其實這個指向的是實例化之后的對象。我們在討（mian）論（shi）JavaScript這門語言時，總是繞不過的一個話題就是繼承與原型鏈。那么繼承與原型鏈到底是什么呢？我很喜歡的一個聊天模式是：我不能說XX是什么，我只能說XX像什么。也就是說我不直接跟...

My_Oh_My 2019-08-26 11:40 評論0 收藏0
JavaScript系列--淺析原型鏈與繼承

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

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

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

馬龍駒 2019-08-23 17:17 評論0 收藏0