理解JavaScript原型鏈
每一個(gè)JavaScript對(duì)象都和另一個(gè)對(duì)象相關(guān)聯(lián),相關(guān)聯(lián)的這個(gè)對(duì)象就是我們所說的“原型”。每一個(gè)對(duì)象都會(huì)從原型繼承屬性和方法。有一個(gè)特殊的對(duì)象沒有原型,就是Object。在之后的圖示中會(huì)進(jìn)行說明。
舉個(gè)栗子,我們首先聲明一個(gè)函數(shù)Student():
function Student(name){ this.name = name; this.hello = function(){ alert(`Hello,${this.name}`); } }
這個(gè)函數(shù)包含一個(gè)屬性name和一個(gè)方法hello。
在JavaScript中,可以通過new關(guān)鍵字來調(diào)用Student函數(shù)(不寫new就是一個(gè)普通函數(shù),寫new就是一個(gè)構(gòu)造函數(shù)),并且返回一個(gè)原型指向Student.prototype的對(duì)象,如下所示:
var xiaoming = new Student("xiaoming"); alert(xiaoming.name); // xiaoming xiaoming.hello(); // Hello,xiaoming
如果我們想確認(rèn)一下我們的設(shè)想對(duì)不對(duì),就會(huì)希望去比較一下xiaoming.prototype和Student.prototype是否相等。
但是xiaoming沒有prototype屬性,不過可以用__proto__來查看。接下來我們就用這些屬性來查看xiaoming,Student,Object之間的原型鏈:
document.onreadystatechange = function(){ // interactive表示文檔已被解析,但瀏覽器還在加載其中鏈接的資源 if(document.readyState === "interactive"){ var xiaoming = new Student("xiaoming"); alert(xiaoming.name); xiaoming.hello(); console.log("xiaoming.__proto__:"); console.log(xiaoming.__proto__); console.log("Student.prototype:"); console.log(Student.prototype); console.log("xiaoming.__proto__ === Student.prototype:" + xiaoming.__proto__ === Student.prototype); console.log("Student.prototype.constructor:" + Student.prototype.constructor); console.log("Student.prototype.prototype:" + Student.prototype.prototype); console.log("Student.prototype.__proto__:"); console.log(Student.prototype.__proto__); console.log(Object.prototype); console.log("Student.prototype.__proto__ === Object.prototype:" + Student.prototype.__proto__ === Object.prototype); } }
七個(gè)紅色箭頭指向的就是七個(gè)console.log語句的輸出結(jié)果。用圖例展示一下如圖所示:
測(cè)試表明Object.prototype和Student.prototype.__proto__指向的Object并不是同一個(gè)。這個(gè)Object就是之前說的沒有原型的那個(gè)Object,我們可以看到它并沒有對(duì)應(yīng)的prototype或者_(dá)_proto__屬性:
由圖可得原型鏈如下所示:
由于本人語言表達(dá)能力有限,理解也比較淺顯,所以圖示比較多,錯(cuò)誤之處還望指出,謝謝。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript無操作后屏保功能的實(shí)現(xiàn)方法
今天組里的同事要寫一個(gè)屏保的效果,要求鼠標(biāo)無操作N秒后進(jìn)入屏幕保護(hù),滑動(dòng)鼠標(biāo)的時(shí)候取消屏幕保護(hù)。我真是難倒了,糾結(jié)了半天,搞定了,下面給大家分享實(shí)現(xiàn)代碼2017-07-07屏蔽網(wǎng)頁右鍵復(fù)制和ctrl+c復(fù)制的js代碼
解決的方法就是直接把網(wǎng)頁保存下來然后刪掉下面這段js代碼,然后就可以正常用右鍵菜單,也可以通過設(shè)置瀏覽器的安全級(jí)別到最高級(jí)別來解決問題2013-01-01在js文件中引入(調(diào)用)另一個(gè)js文件的三種方法
這篇文章主要介紹了在js文件中引入(調(diào)用)另一個(gè)js文件的三種方法,幫助大家更好的理解和學(xué)習(xí)JavaScript,感興趣的朋友可以了解下2020-09-09dateformat.js超輕量級(jí)的JS日期處理庫的使用
dateformat.js 是一個(gè)非常簡(jiǎn)潔、輕量級(jí)、不到 5kb 的很簡(jiǎn)潔的 Javascript 庫,本文主要介紹了dateformat.js超輕量級(jí)的JS日期處理庫的使用,感興趣的可以了解一下2023-12-12