1. 類(lèi)

1.1. 可以使用new關(guān)鍵字來(lái)創(chuàng)建對(duì)象的模板, 我們叫做類(lèi)。

Object String Boolean Number Array Function function MyFn(){}

1.2. 類(lèi)有prototype(原型)屬性:

document.write(Object.prototype + "<br />"); document.write(String.prototype + "<br />"); document.write(Boolean.prototype + "<br />"); document.write(Number.prototype + "<br />"); document.write(Array.prototype + "<br />"); document.write(Function.prototype + "<br />"); document.write(MyFn.prototype + "<hr />");

2. 對(duì)象

2.1. 在JavaScript中類(lèi)也是對(duì)象, 我們姑且叫做類(lèi)對(duì)象:

Object String Boolean Number Array Function function MyFn(){}

2.2. 我們創(chuàng)建的對(duì)象:

function MyFn(){}var obj = new Object(); var easyObj = {}; var str = new String(); var bool = new Boolean(); var num = new Number(); var arr = new Array(); var easyArr = []; var fun = new Function(); var myFn = new MyFn();

2.3. 對(duì)象有__proto__屬性:

document.write(Object.__proto__ + "<br />"); document.write(String.__proto__ + "<br />"); document.write(Boolean.__proto__ + "<br />"); document.write(Number.__proto__ + "<br />"); document.write(Array.__proto__ + "<br />"); document.write(Function.__proto__ + "<br />"); document.write(MyFn.__proto__ + "<hr />");document.write(obj.__proto__ + "<br />"); document.write(easyObj.__proto__ + "<br />"); document.write(str.__proto__ + "<br />"); document.write(bool.__proto__ + "<br />"); document.write(num.__proto__ + "<br />"); document.write(arr.__proto__ + "<br />"); document.write(easyArr.__proto__ + "<br />"); document.write(fun.__proto__ + "<br />"); document.write(myFn.__proto__ + "<hr />");

2.3. 我們歸結(jié)JavaScript有2種對(duì)象, 一種是我們創(chuàng)建的對(duì)象, 一種是類(lèi)對(duì)象。

3. 類(lèi)對(duì)象的constructor屬性

3.1. 類(lèi)對(duì)象的constructor屬性是對(duì)創(chuàng)建對(duì)象的函數(shù)的引用。

3.2. 類(lèi)對(duì)象的constructor屬性, 指向了Function的構(gòu)造器函數(shù)。因此我們可以說(shuō), String、Boolean、Number、Array、Function, 以及我們自定義的MyFn都是有函數(shù)創(chuàng)建的。

document.write(Object.constructor + ', ' + (Object.constructor === Function) + "<br />"); document.write(String.constructor + ', ' + (String.constructor === Function) + "<br />"); document.write(Boolean.constructor + ', ' + (Boolean.constructor === Function) + "<br />"); document.write(Number.constructor + ', ' + (Number.constructor === Function) + "<br />"); document.write(Array.constructor + ', ' + (Array.constructor === Function) + "<br />"); document.write(Function.constructor + ', ' + (Function.constructor === Function) + "<br />"); document.write(MyFn.constructor + ', ' + (MyFn.constructor === Function) + "<hr />");

4. __proto__屬性

4.1. __proto__屬性是對(duì)創(chuàng)建對(duì)象的類(lèi)的原型的引用。

4.2. 類(lèi)對(duì)象的__proto__屬性, 指向了Function類(lèi)的原型。

4.3. 我們創(chuàng)建的對(duì)象的__proto__屬性, 指向了它對(duì)應(yīng)類(lèi)的原型。

document.write(Object.__proto__ + ', ' + (Object.__proto__ === Function.prototype) + "<br />"); document.write(String.__proto__ + ', ' + (String.__proto__ === Function.prototype) + "<br />"); document.write(Boolean.__proto__ + ', ' + (Boolean.__proto__ === Function.prototype) + "<br />"); document.write(Number.__proto__ + ', ' + (Number.__proto__ === Function.prototype) + "<br />"); document.write(Array.__proto__ + ', ' + (Array.__proto__ === Function.prototype) + "<br />"); document.write(Function.__proto__ + ', ' + (Function.__proto__ === Function.prototype) + "<br />"); document.write(MyFn.__proto__ + ', ' + (MyFn.__proto__ === Function.prototype) + "<hr />");document.write(obj.__proto__ + ', ' + (obj.__proto__ === Object.prototype) + "<br />"); document.write(str.__proto__ + ', ' + (str.__proto__ === String.prototype) + "<br />"); document.write(bool.__proto__ + ', ' + (bool.__proto__ === Boolean.prototype) + "<br />"); document.write(num.__proto__ + ', ' + (num.__proto__ === Number.prototype) + "<br />"); document.write(arr.__proto__ + ', ' + (arr.__proto__ === Array.prototype) + "<br />"); document.write(fun.__proto__ + ', ' + (fun.__proto__ === Function.prototype) + "<br />"); document.write(myFn.__proto__ + ', ' + (myFn.__proto__ === MyFn.prototype) + "<hr />");

4.4. 我們創(chuàng)建的對(duì)象的__proto__屬性上有constructor屬性, constructor屬性是對(duì)創(chuàng)建對(duì)象的函數(shù)的引用。

document.write(obj.__proto__.constructor + ', ' + (obj.__proto__.constructor === Object) + "<br />"); document.write(str.__proto__.constructor + ', ' + (str.__proto__.constructor === String) + "<br />"); document.write(bool.__proto__.constructor + ', ' + (bool.__proto__.constructor === Boolean) + "<br />"); document.write(num.__proto__.constructor + ', ' + (num.__proto__.constructor === Number) + "<br />"); document.write(arr.__proto__.constructor + ', ' + (arr.__proto__.constructor === Array) + "<br />"); document.write(fun.__proto__.constructor + ', ' + (fun.__proto__.constructor === Function) + "<br />"); document.write(myFn.__proto__.constructor + ', ' + (myFn.__proto__.constructor === MyFn) + "<hr />");

5. 類(lèi)的prototype(原型)屬性

5.1. 類(lèi)的prototype(原型)屬性都是自己的。Object、String、Boolean、Number、Array、Function, 以及我們創(chuàng)建的類(lèi)MyFn的原型都是不一樣的。但是String、Boolean、Number、Array、Function, 以及我們創(chuàng)建的MyFn都繼承了Object的原型。Object的原型是原型鏈的最頂端。

5.2. prototype屬性是對(duì)象。對(duì)于Function類(lèi), 它的typeof Function.prototype返回的是function, 但實(shí)際上是對(duì)象, 因?yàn)楹瘮?shù)本身就是特殊的對(duì)象。

document.write(Object.prototype + ', ' + typeof Object.prototype + "<br />"); document.write(String.prototype + ', ' + typeof String.prototype + "<br />"); document.write(Boolean.prototype + ', ' + typeof Boolean.prototype + "<br />"); document.write(Number.prototype + ', ' + typeof Number.prototype + "<br />"); document.write(Array.prototype + ', ' + typeof Array.prototype + "<br />"); document.write(Function.prototype + ', ' + typeof Function.prototype + "<br />"); document.write(MyFn.prototype + ', ' + typeof MyFn.prototype + "<hr />");

5.3. prototype上有2個(gè)跟原型鏈相關(guān)的重要屬性constructor和__proto__。這也符合我們之前的規(guī)則, 因?yàn)閜rototype是對(duì)象, 所以它有__proto__屬性。

6. prototype.constructor屬性是對(duì)類(lèi)的構(gòu)造器函數(shù)的引用。

document.write(Object + ', ' + Object.prototype.constructor + "<br />"); document.write(String + ', ' + String.prototype.constructor + "<br />"); document.write(Boolean + ', ' + Boolean.prototype.constructor + "<br />"); document.write(Number + ', ' + Number.prototype.constructor + "<br />"); document.write(Array + ', ' + Array.prototype.constructor + "<br />"); document.write(Function + ', ' + Function.prototype.constructor + "<br />"); document.write(MyFn + ', ' + MyFn.prototype.constructor + "<hr />");

7. prototype.__proto__屬性

7.1. 正如我們之前所講的__proto__屬性, 指向創(chuàng)建對(duì)象的類(lèi)的原型。不管prototype是哪個(gè)類(lèi)的屬性, prototype是對(duì)象, 它是由Object類(lèi)創(chuàng)建的對(duì)象, 因此所有類(lèi)(不包括Object本身)的prototype.__proto__屬性都指向Object.prototype。

7.2. Object.prototype.__proto__的值是null， 也印證了Object.prototype是原型鏈的最頂層。

document.write((String.prototype.__proto__ === Object.prototype) + "<br />"); document.write((Boolean.prototype.__proto__ === Object.prototype) + "<br />"); document.write((Number.prototype.__proto__ === Object.prototype) + "<br />"); document.write((Array.prototype.__proto__ === Object.prototype) + "<br />"); document.write((Function.prototype.__proto__ === Object.prototype) + "<br />"); document.write((MyFn.prototype.__proto__ === Object.prototype) + "<br />"); document.write((Object.prototype.__proto__) + "<br />");

8. 例子

8.1. 代碼

<!DOCTYPE html> <html lang="zh-CN"><head><title>原型鏈</title><meta charset="utf-8" /></head><body><script type="text/javascript">function MyFn(){}var obj = new Object();var str = new String();var bool = new Boolean();var num = new Number();var arr = new Array();var fun = new Function();var myFn = new MyFn();document.write("類(lèi)有prototype(原型)屬性: <br />");document.write(Object.prototype + ', ' + typeof Object.prototype + "<br />");document.write(String.prototype + ', ' + typeof String.prototype + "<br />");document.write(Boolean.prototype + ', ' + typeof Boolean.prototype + "<br />");document.write(Number.prototype + ', ' + typeof Number.prototype + "<br />");document.write(Array.prototype + ', ' + typeof Array.prototype + "<br />");document.write(Function.prototype + ', ' + typeof Function.prototype + "<br />");document.write(MyFn.prototype + ', ' + typeof MyFn.prototype + "<hr />");document.write("對(duì)象有__proto__屬性: <br />");document.write(Object.__proto__ + ', ' + (Object.__proto__ === Function.prototype) + "<br />");document.write(String.__proto__ + ', ' + (String.__proto__ === Function.prototype) + "<br />");document.write(Boolean.__proto__ + ', ' + (Boolean.__proto__ === Function.prototype) + "<br />");document.write(Number.__proto__ + ', ' + (Number.__proto__ === Function.prototype) + "<br />");document.write(Array.__proto__ + ', ' + (Array.__proto__ === Function.prototype) + "<br />");document.write(Function.__proto__ + ', ' + (Function.__proto__ === Function.prototype) + "<br />");document.write(MyFn.__proto__ + ', ' + (MyFn.__proto__ === Function.prototype) + "<br /><br />");document.write(obj.__proto__ + ', ' + (obj.__proto__ === Object.prototype) + "<br />");document.write(str.__proto__ + ', ' + (str.__proto__ === String.prototype) + "<br />");document.write(bool.__proto__ + ', ' + (bool.__proto__ === Boolean.prototype) + "<br />");document.write(num.__proto__ + ', ' + (num.__proto__ === Number.prototype) + "<br />");document.write(arr.__proto__ + ', ' + (arr.__proto__ === Array.prototype) + "<br />");document.write(fun.__proto__ + ', ' + (fun.__proto__ === Function.prototype) + "<br />");document.write(myFn.__proto__ + ', ' + (myFn.__proto__ === MyFn.prototype) + "<hr />");document.write("類(lèi)對(duì)象有constructor屬性: <br />");document.write(Object.constructor + ', ' + (Object.constructor === Function) + "<br />");document.write(String.constructor + ', ' + (String.constructor === Function) + "<br />");document.write(Boolean.constructor + ', ' + (Boolean.constructor === Function) + "<br />");document.write(Number.constructor + ', ' + (Number.constructor === Function) + "<br />");document.write(Array.constructor + ', ' + (Array.constructor === Function) + "<br />");document.write(Function.constructor + ', ' + (Function.constructor === Function) + "<br />");document.write(MyFn.constructor + ', ' + (MyFn.constructor === Function) + "<hr />");document.write("我們創(chuàng)建的對(duì)象的__proto__屬性上有constructor屬性: <br />");document.write(obj.__proto__.constructor + ', ' + (obj.__proto__.constructor === Object) + "<br />");document.write(str.__proto__.constructor + ', ' + (str.__proto__.constructor === String) + "<br />");document.write(bool.__proto__.constructor + ', ' + (bool.__proto__.constructor === Boolean) + "<br />");document.write(num.__proto__.constructor + ', ' + (num.__proto__.constructor === Number) + "<br />");document.write(arr.__proto__.constructor + ', ' + (arr.__proto__.constructor === Array) + "<br />");document.write(fun.__proto__.constructor + ', ' + (fun.__proto__.constructor === Function) + "<br />");document.write(myFn.__proto__.constructor + ', ' + (myFn.__proto__.constructor === MyFn) + "<hr />");document.write("類(lèi)prototype(原型)上的constructor屬性: <br />");document.write(Object.prototype.constructor + ', ' + (Object.prototype.constructor === Object) + "<br />");document.write(String.prototype.constructor + ', ' + (String.prototype.constructor === String) + "<br />");document.write(Boolean.prototype.constructor + ', ' + (Boolean.prototype.constructor === Boolean) + "<br />");document.write(Number.prototype.constructor + ', ' + (Number.prototype.constructor === Number) + "<br />");document.write(Array.prototype.constructor + ', ' + (Array.prototype.constructor === Array) + "<br />");document.write(Function.prototype.constructor + ', ' + (Function.prototype.constructor === Function) + "<br />");document.write(MyFn.prototype.constructor + ', ' + (MyFn.prototype.constructor === MyFn) + "<hr />");document.write("類(lèi)prototype(原型)上的__proto__屬性: <br />");document.write(Object.prototype.__proto__ + "<br />");document.write(String.prototype.__proto__ + ', ' + (String.prototype.__proto__ === Object.prototype) + "<br />");document.write(Boolean.prototype.__proto__ + ', ' + (Boolean.prototype.__proto__ === Object.prototype) + "<br />");document.write(Number.prototype.__proto__ + ', ' + (Number.prototype.__proto__ === Object.prototype) + "<br />");document.write(Array.prototype.__proto__ + ', ' + (Array.prototype.__proto__ === Object.prototype) + "<br />");document.write(Function.prototype.__proto__ + ', ' + (Function.prototype.__proto__ === Object.prototype) + "<br />");document.write(MyFn.prototype.__proto__ + ', ' + (MyFn.prototype.__proto__ === Object.prototype) + "<br />");</script></body> </html>

8.2. 效果圖

總結(jié)

以上是生活随笔為你收集整理的053_原型链的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。