當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

053_原型链

發布時間：2025/4/17 编程问答 25 豆豆

生活随笔收集整理的這篇文章主要介紹了 053_原型链小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1. 類

1.1. 可以使用new關鍵字來創建對象的模板, 我們叫做類。

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

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

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

2. 對象

2.1. 在JavaScript中類也是對象, 我們姑且叫做類對象:

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

2.2. 我們創建的對象:

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. 對象有__proto__屬性:

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

2.3. 我們歸結JavaScript有2種對象, 一種是我們創建的對象, 一種是類對象。

3. 類對象的constructor屬性

3.1. 類對象的constructor屬性是對創建對象的函數的引用。

3.2. 類對象的constructor屬性, 指向了Function的構造器函數。因此我們可以說, String、Boolean、Number、Array、Function, 以及我們自定義的MyFn都是有函數創建的。

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

4. __proto__屬性

4.1. __proto__屬性是對創建對象的類的原型的引用。

4.2. 類對象的__proto__屬性, 指向了Function類的原型。

4.3. 我們創建的對象的__proto__屬性, 指向了它對應類的原型。

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

4.4. 我們創建的對象的__proto__屬性上有constructor屬性, constructor屬性是對創建對象的函數的引用。

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

5. 類的prototype(原型)屬性

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

5.2. prototype屬性是對象。對于Function類, 它的typeof Function.prototype返回的是function, 但實際上是對象, 因為函數本身就是特殊的對象。

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

5.3. prototype上有2個跟原型鏈相關的重要屬性constructor和__proto__。這也符合我們之前的規則, 因為prototype是對象, 所以它有__proto__屬性。

6. prototype.constructor屬性是對類的構造器函數的引用。

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

7. prototype.__proto__屬性

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

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

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

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("類有prototype(原型)屬性: ");document.write(Object.prototype + ', ' + typeof Object.prototype + " ");document.write(String.prototype + ', ' + typeof String.prototype + " ");document.write(Boolean.prototype + ', ' + typeof Boolean.prototype + " ");document.write(Number.prototype + ', ' + typeof Number.prototype + " ");document.write(Array.prototype + ', ' + typeof Array.prototype + " ");document.write(Function.prototype + ', ' + typeof Function.prototype + " ");document.write(MyFn.prototype + ', ' + typeof MyFn.prototype + "<hr />");document.write("對象有__proto__屬性: ");document.write(Object.__proto__ + ', ' + (Object.__proto__ === Function.prototype) + " ");document.write(String.__proto__ + ', ' + (String.__proto__ === Function.prototype) + " ");document.write(Boolean.__proto__ + ', ' + (Boolean.__proto__ === Function.prototype) + " ");document.write(Number.__proto__ + ', ' + (Number.__proto__ === Function.prototype) + " ");document.write(Array.__proto__ + ', ' + (Array.__proto__ === Function.prototype) + " ");document.write(Function.__proto__ + ', ' + (Function.__proto__ === Function.prototype) + " ");document.write(MyFn.__proto__ + ', ' + (MyFn.__proto__ === Function.prototype) + " ");document.write(obj.__proto__ + ', ' + (obj.__proto__ === Object.prototype) + " ");document.write(str.__proto__ + ', ' + (str.__proto__ === String.prototype) + " ");document.write(bool.__proto__ + ', ' + (bool.__proto__ === Boolean.prototype) + " ");document.write(num.__proto__ + ', ' + (num.__proto__ === Number.prototype) + " ");document.write(arr.__proto__ + ', ' + (arr.__proto__ === Array.prototype) + " ");document.write(fun.__proto__ + ', ' + (fun.__proto__ === Function.prototype) + " ");document.write(myFn.__proto__ + ', ' + (myFn.__proto__ === MyFn.prototype) + "<hr />");document.write("類對象有constructor屬性: ");document.write(Object.constructor + ', ' + (Object.constructor === Function) + " ");document.write(String.constructor + ', ' + (String.constructor === Function) + " ");document.write(Boolean.constructor + ', ' + (Boolean.constructor === Function) + " ");document.write(Number.constructor + ', ' + (Number.constructor === Function) + " ");document.write(Array.constructor + ', ' + (Array.constructor === Function) + " ");document.write(Function.constructor + ', ' + (Function.constructor === Function) + " ");document.write(MyFn.constructor + ', ' + (MyFn.constructor === Function) + "<hr />");document.write("我們創建的對象的__proto__屬性上有constructor屬性: ");document.write(obj.__proto__.constructor + ', ' + (obj.__proto__.constructor === Object) + " ");document.write(str.__proto__.constructor + ', ' + (str.__proto__.constructor === String) + " ");document.write(bool.__proto__.constructor + ', ' + (bool.__proto__.constructor === Boolean) + " ");document.write(num.__proto__.constructor + ', ' + (num.__proto__.constructor === Number) + " ");document.write(arr.__proto__.constructor + ', ' + (arr.__proto__.constructor === Array) + " ");document.write(fun.__proto__.constructor + ', ' + (fun.__proto__.constructor === Function) + " ");document.write(myFn.__proto__.constructor + ', ' + (myFn.__proto__.constructor === MyFn) + "<hr />");document.write("類prototype(原型)上的constructor屬性: ");document.write(Object.prototype.constructor + ', ' + (Object.prototype.constructor === Object) + " ");document.write(String.prototype.constructor + ', ' + (String.prototype.constructor === String) + " ");document.write(Boolean.prototype.constructor + ', ' + (Boolean.prototype.constructor === Boolean) + " ");document.write(Number.prototype.constructor + ', ' + (Number.prototype.constructor === Number) + " ");document.write(Array.prototype.constructor + ', ' + (Array.prototype.constructor === Array) + " ");document.write(Function.prototype.constructor + ', ' + (Function.prototype.constructor === Function) + " ");document.write(MyFn.prototype.constructor + ', ' + (MyFn.prototype.constructor === MyFn) + "<hr />");document.write("類prototype(原型)上的__proto__屬性: ");document.write(Object.prototype.__proto__ + " ");document.write(String.prototype.__proto__ + ', ' + (String.prototype.__proto__ === Object.prototype) + " ");document.write(Boolean.prototype.__proto__ + ', ' + (Boolean.prototype.__proto__ === Object.prototype) + " ");document.write(Number.prototype.__proto__ + ', ' + (Number.prototype.__proto__ === Object.prototype) + " ");document.write(Array.prototype.__proto__ + ', ' + (Array.prototype.__proto__ === Object.prototype) + " ");document.write(Function.prototype.__proto__ + ', ' + (Function.prototype.__proto__ === Object.prototype) + " ");document.write(MyFn.prototype.__proto__ + ', ' + (MyFn.prototype.__proto__ === Object.prototype) + " ");</script></body> </html>

8.2. 效果圖

總結

以上是生活随笔為你收集整理的053_原型链的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

原型