一文秒懂JavaScript構(gòu)造函數(shù)、實(shí)例、原型對(duì)象以及原型鏈
1概述
ES6, 全稱(chēng) ECMAScript 6.0 ,2015.06 發(fā)版。在ES6之前,對(duì)象不是基于類(lèi)創(chuàng)建的,而是用一種稱(chēng)為構(gòu)造函數(shù)的特殊函數(shù)來(lái)定義對(duì)象和它們的特征。
2構(gòu)造函數(shù)
構(gòu)造函數(shù)是一種特殊的函數(shù),主要用來(lái)初始化對(duì)象,即為對(duì)象成員變量賦初始值,它總與 new 一起使用。我們可以把對(duì)象中一些公共的屬性和方法抽取出來(lái),然后封裝到這個(gè)函數(shù)里面。
// 利用構(gòu)造函數(shù)創(chuàng)建對(duì)象 function Person(uname, age) { this.uname = uname; this.age = age; this.sing = function() { console.log('我會(huì)唱歌'); } } var ldh = new Person('劉德華', 18); var zxy = new Person('張學(xué)友', 19); console.log(ldh); ldh.sing(); zxy.sing();
在 JS 中,使用構(gòu)造函數(shù)時(shí)要注意以下兩點(diǎn):
構(gòu)造函數(shù)用于創(chuàng)建某一類(lèi)對(duì)象,其首字母要大寫(xiě)構(gòu)造函數(shù)要和 new 一起使用才有意義
(1)構(gòu)造函數(shù)執(zhí)行過(guò)程
new 在執(zhí)行時(shí)會(huì)做四件事情:
① 在內(nèi)存中創(chuàng)建一個(gè)新的空對(duì)象。
② 讓 this 指向這個(gè)新的對(duì)象。
③ 執(zhí)行構(gòu)造函數(shù)里面的代碼,給這個(gè)新對(duì)象添加屬性和方法。
④ 返回這個(gè)新對(duì)象(所以構(gòu)造函數(shù)里面不需要 return )。
(2)構(gòu)造函數(shù)的成員
JavaScript 的構(gòu)造函數(shù)中可以添加一些成員,可以在構(gòu)造函數(shù)本身上添加,也可以在構(gòu)造函數(shù)內(nèi)部的 this 上添加。通過(guò)這兩種方式添加的成員,就分別稱(chēng)為靜態(tài)成員和實(shí)例成員。
- 靜態(tài)成員:在構(gòu)造函數(shù)本上添加的成員稱(chēng)為靜態(tài)成員,只能由構(gòu)造函數(shù)本身來(lái)訪問(wèn)
//靜態(tài)成員 在構(gòu)造函數(shù)本身上添加的成員 sex 就是靜態(tài)成員 // 靜態(tài)成員只能通過(guò)構(gòu)造函數(shù)來(lái)訪問(wèn) Person.sex = '男'; console.log(Person.sex);
- 實(shí)例成員:在構(gòu)造函數(shù)內(nèi)部創(chuàng)建的對(duì)象成員稱(chēng)為實(shí)例成員,只能由實(shí)例化的對(duì)象來(lái)訪問(wèn)
function Person(uname) { this.uname = uname; }
3構(gòu)造函數(shù)原型prototype
構(gòu)造函數(shù)通過(guò)原型分配的函數(shù)是所有對(duì)象所共享的。
JavaScript 規(guī)定,每一個(gè)構(gòu)造函數(shù)都有一個(gè) prototype 屬性,指向另一個(gè)對(duì)象。注意這個(gè) prototype 就是一個(gè)對(duì)象,這個(gè)對(duì)象的所有屬性和方法,都會(huì)被構(gòu)造函數(shù)所擁有。
我們可以把那些不變的方法,直接定義在 prototype 對(duì)象上,這樣所有對(duì)象的實(shí)例就可以共享這些方法。
function Person(uname, age) { this.uname = uname; this.age = age; // this.sing = function() { // console.log('我會(huì)唱歌'); // } } // 一般情況下,我們的公共屬性定義到構(gòu)造函數(shù)里面, 公共的方法我們放到原型對(duì)象身上 Person.prototype.sing = function() { console.log('我會(huì)唱歌'); } var ldh = new Person('劉德華', 18); var zxy = new Person('張學(xué)友', 19); console.log(ldh.sing === zxy.sing); //true ldh.sing(); zxy.sing();
- 原型是什么 ?
- 一個(gè)對(duì)象,我們也稱(chēng)為 prototype 為原型對(duì)象。
- 原型的作用是什么 ?
- 共享方法。
4 對(duì)象原型 __proto__
對(duì)象都會(huì)有一個(gè)屬性 __proto__
指向構(gòu)造函數(shù)的 prototype
原型對(duì)象,之所以我們對(duì)象可以使用構(gòu)造函數(shù) prototype
原型對(duì)象的屬性和方法,就是因?yàn)閷?duì)象有__proto__
原型的存在。
function Person(uname, age) { this.uname = uname; this.age = age; } Person.prototype.sing = function() { console.log('我會(huì)唱歌'); } var mingo = new Person('小明', 18); var zxy = new Person('張學(xué)友', 19); mingo.sing(); console.log(mingo); // 對(duì)象身上系統(tǒng)自己添加一個(gè) __proto__ 指向我們構(gòu)造函數(shù)的原型對(duì)象 prototype console.log(mingo.__proto__ === Person.prototype); //true
__proto__
對(duì)象原型和原型對(duì)象prototype
是等價(jià)的- (如圖箭頭指向,mingo是Person構(gòu)造函數(shù)創(chuàng)建出來(lái)的一個(gè)對(duì)象實(shí)例,這個(gè)對(duì)象實(shí)例的原型(
__proto__
),就是Person構(gòu)造函數(shù)的原型對(duì)象prototype
。) __proto__
對(duì)象原型的意義就在于為對(duì)象的查找機(jī)制提供一個(gè)方向,或者說(shuō)一條路線,但是它是一個(gè)非標(biāo)準(zhǔn)屬性, 因此實(shí)際開(kāi)發(fā)中,不可以使用這個(gè)屬性,它只是內(nèi)部指向原型對(duì)象prototype
5constructor 構(gòu)造函數(shù)
對(duì)象原型 __proto__
和構(gòu)造函數(shù)prototype
原型對(duì)象(其實(shí)指的就是同一個(gè))里面有一個(gè)屬性 constructor 屬性 ,constructor 我們稱(chēng) 為構(gòu)造函數(shù),因?yàn)樗富貥?gòu)造函數(shù)本身。
constructor 主要用于記錄該對(duì)象引用于哪個(gè)構(gòu)造函數(shù),它可以讓原型對(duì)象重新指向原來(lái)的構(gòu)造函數(shù)。
一般情況下,對(duì)象的方法都在構(gòu)造函數(shù)的原型對(duì)象中設(shè)置。如果有多個(gè)對(duì)象的方法,我們可以給原型對(duì)象采取對(duì)象形式賦值,但是這樣就會(huì)覆蓋構(gòu)造函數(shù)原型對(duì)象原來(lái)的內(nèi)容,這樣修改后的原型對(duì)象 constructor 就不再指向當(dāng)前構(gòu)造函數(shù)了。
此時(shí),我們可以在修改后的原型對(duì)象中,添加一個(gè) constructor 指向原來(lái)的構(gòu)造函數(shù)。
function Person(uname, age) { this.uname = uname; this.age = age; } // 很多情況下,我們需要手動(dòng)的利用constructor 這個(gè)屬性指回 原來(lái)的構(gòu)造函數(shù) Person.prototype = { // 如果我們修改了原來(lái)的原型對(duì)象,給原型對(duì)象賦值的是一個(gè)對(duì)象,則必須手動(dòng)的利用constructor指回原來(lái)的構(gòu)造函數(shù) constructor: Person, sing: function() { console.log('我會(huì)唱歌'); }, movie: function() { console.log('我會(huì)演電影'); } } var mingo = new Person('小明', 18); var zxy = new Person('張學(xué)友', 19); console.log(Person.prototype); console.log(mingo.__proto__); console.log(Person.prototype.constructor); console.log(mingo.__proto__.constructor);
6原型鏈
每個(gè)構(gòu)造函數(shù)都有一個(gè)原型對(duì)象,原型對(duì)象都包含一個(gè)指向構(gòu)造函數(shù)的指針,而實(shí)例都包含一個(gè)指向原型對(duì)象的內(nèi)部指針。那么假如我們讓原型對(duì)象等于另一個(gè)類(lèi)型的實(shí)例,結(jié)果會(huì)怎樣?顯然,此時(shí)的原型對(duì)象將包含一個(gè)指向另一個(gè)原型的指針,相應(yīng)地,另一個(gè)原型中也包含著一個(gè)指向另一個(gè)構(gòu)造函數(shù)的指針。假如另一個(gè)原型又是另一個(gè)類(lèi)型的實(shí)例,那么上述關(guān)系依然成立。如此層層遞進(jìn),就構(gòu)成了實(shí)例與原型的鏈條。這就是所謂的原型鏈的基本概念?!浴秊avascript高級(jí)程序設(shè)計(jì)》
function Person(uname, age) { this.uname = uname; this.age = age; } Person.prototype.sing = function() { console.log('我會(huì)唱歌'); } var mingo = new Person('小明', 18); // 1. 只要是對(duì)象就有__proto__ 原型, 指向原型對(duì)象 console.log(Person.prototype); console.log(Person.prototype.__proto__ === Object.prototype);//true // 2.我們Person原型對(duì)象里面的__proto__原型指向的是 Object.prototype console.log(Object.prototype.__proto__); // 3. 我們Object.prototype原型對(duì)象里面的__proto__原型 指向?yàn)?null console.log(Object);
Object 是 JavaScript 中最頂級(jí)的對(duì)象,其它所有對(duì)象都是基于它的,包括你創(chuàng)建的函數(shù)
7JavaScript 的成員查找機(jī)制(基于原型鏈規(guī)則)
① 當(dāng)訪問(wèn)一個(gè)對(duì)象的屬性(包括方法)時(shí),首先查找這個(gè)對(duì)象自身有沒(méi)有該屬性。
② 如果沒(méi)有就查找它的原型(也就是 __proto__
指向的 prototype 原型對(duì)象)。
③ 如果還沒(méi)有就查找原型對(duì)象的原型(Object的原型對(duì)象)。
④ 依此類(lèi)推一直找到 Object 為止(null)。
⑤ __proto__
對(duì)象原型的意義就在于為對(duì)象成員查找機(jī)制提供一個(gè)方向,或者說(shuō)一條路線。
8 原型對(duì)象this指向
1構(gòu)造函數(shù)中的this 指向我們實(shí)例對(duì)象
2原型對(duì)象里面放的是方法, 這個(gè)方法里面的this 指向的是 這個(gè)方法的調(diào)用者, 也就是這個(gè)實(shí)例對(duì)象
function Person(uname, age) { this.uname = uname; this.age = age; } var that; Person.prototype.sing = function() { console.log('我會(huì)唱歌'); that = this; console.log(this); } var mingo = new Person('小明', 18); // 1. 在構(gòu)造函數(shù)中,里面this指向的是對(duì)象實(shí)例 mingo // 2.原型對(duì)象函數(shù)里面的this 指向的也是 實(shí)例對(duì)象 mingo mingo.sing(); console.log(that === mingo); //true
總結(jié)
到此這篇關(guān)于一文秒懂JavaScript構(gòu)造函數(shù)、實(shí)例、原型對(duì)象以及原型鏈的文章就介紹到這了,更多相關(guān)JavaScript構(gòu)造函數(shù)、實(shí)例、原型對(duì)象及原型鏈內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
基于javascript實(shí)現(xiàn)貪吃蛇小游戲
這篇文章主要介紹了基于javascript實(shí)現(xiàn)貪吃蛇小游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-11-11js購(gòu)物車(chē)實(shí)現(xiàn)思路及代碼(個(gè)人感覺(jué)不錯(cuò))
提起購(gòu)物車(chē)想必只有在一些購(gòu)物網(wǎng)站上才可以看得到,下面為大家介紹下使用js實(shí)現(xiàn)的購(gòu)物車(chē),感興趣的朋友可以參考下2013-12-12阻止mousemove鼠標(biāo)移動(dòng)或touchmove觸摸移動(dòng)觸發(fā)click點(diǎn)擊事件
這篇文章主要為大家介紹了阻止mousemove或touchmove與click事件同時(shí)觸發(fā)技巧,一個(gè)按鈕綁定了多個(gè)事件,所以就要想辦法阻止 mouse 鼠標(biāo)事件或 touch 觸摸事件 與 click 事件同時(shí)觸發(fā),不然每次拖拽按鈕后都會(huì)觸發(fā) click 事件,這顯然是不友好的2023-06-06深入探討如何利用Canvas實(shí)現(xiàn)圖片壓縮與Base64轉(zhuǎn)換
隨著Web應(yīng)用的日益普及,圖片的處理和優(yōu)化已經(jīng)成為現(xiàn)代開(kāi)發(fā)的關(guān)鍵部分,本文主要介紹了如何利用Canvas技術(shù),將圖片進(jìn)行壓縮,并將其轉(zhuǎn)換為Base64格式,感興趣的小伙伴可以學(xué)習(xí)下2023-10-10javascript DIV實(shí)現(xiàn)跟隨鼠標(biāo)移動(dòng)
這篇文章主要為大家詳細(xì)介紹了javascript DIV跟隨鼠標(biāo)移動(dòng),有一個(gè)div跟隨鼠標(biāo)移動(dòng)的結(jié)果,有一連串跟隨鼠標(biāo)移動(dòng)的效果,感興趣的小伙伴們可以參考一下2016-02-02js限制文本框的輸入內(nèi)容代碼分享(3類(lèi))
這篇文章主要介紹了3類(lèi)js限制文本框的輸入內(nèi)容代碼,需要的朋友可以參考下2015-08-08javascript中的void運(yùn)算符語(yǔ)法及使用介紹
void是javascript中的一個(gè)操作符,void會(huì)計(jì)算表達(dá)式的值,但是會(huì)丟棄表達(dá)式的返回值接下來(lái)將詳細(xì)介紹下,感興趣的你可以參考下或許對(duì)你有所幫助2013-03-03JS運(yùn)動(dòng)特效之鏈?zhǔn)竭\(yùn)動(dòng)分析
這篇文章主要介紹了JS運(yùn)動(dòng)特效之鏈?zhǔn)竭\(yùn)動(dòng),結(jié)合實(shí)例形式分析了javascript鏈?zhǔn)竭\(yùn)動(dòng)的原理與具體實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-01-01