詳解Javascript中prototype屬性(推薦)

来源:https://www.cnblogs.com/douyage/archive/2018/03/23/8630529.html
-Advertisement-
Play Games

在典型的面向對象的語言中，如java，都存在類（class）的概念，類就是對象的模板，對象就是類的實例。但是在Javascript語言體系中，是不存在類（Class）的概念的，javascript中不是基於‘類的'，而是通過構造函數（constructor）和原型鏈（prototype chains ...


在典型的面向對象的語言中，如java，都存在類（class）的概念，類就是對象的模板，對象就是類的實例。但是在Javascript語言體系中，是不存在類（Class）的概念的，javascript中不是基於‘類的'，而是通過構造函數（constructor）和原型鏈（prototype chains）實現的。但是在ES6中提供了更接近傳統語言的寫法，引入了Class（類）這個概念，作為對象的模板。通過class關鍵字，可以定義類。基本上，ES6的class可以看作只是一個語法糖，它的絕大部分功能，ES5都可以做到，新的class寫法只是讓原型對象的寫法更加清晰、更像面向對象編程的語法而已。

　　按照我的習慣，在寫文章前我會給出文章目錄。

　　以下內容會分為如下小節：

　　1.構造函數的簡單介紹

　　2.構造函數的缺點

　　3.prototype屬性的作用

　　4.原型鏈（prototype chain）

　　5.constructor屬性

　　　　5.1：constructor屬性的作用

　　6.instanceof運算符

1.構造函數的簡單介紹

　　在我的一篇Javascript 中構造函數與new命令的密切關係文章中，詳細了介紹了構造函數的概念和特點，new命令的原理和用法等，如果對於構造函數不熟悉的同學，可以前往細細品味。以下做一個簡單的回顧。

　　所謂構造函數，就是提供了一個生成對象的模板並描述對象的基本結構的函數。一個構造函數，可以生成多個對象，每個對象都有相同的結構。總的來說，構造函數就是對象的模板，對象就是構造函數的實例。

　　構造函數的特點有：

　　　　a：構造函數的函數名首字母必須大寫。

　　　　b：內部使用this對象，來指向將要生成的對象實例。

　　　　c：使用new操作符來調用構造函數，並返回對象實例。

　　看一個最簡單的一個例子。

function Person(){
 this.name = 'keith';
} 
 var boy = new Person();
console.log(boy.name); //'keith'

2.構造函數的缺點

　　所有的實例對象都可以繼承構造函數中的屬性和方法。但是，同一個對象實例之間，無法共用屬性。

function Person(name,height){
 this.name=name;
 this.height=height;
 this.hobby=function(){
 return 'watching movies';
}
 } 
var boy=new Person('keith',180);
 var girl=new Person('rascal',153); 
 console.log(boy.name); //'keith'
 console.log(girl.name); //'rascal'
 console.log(boy.hobby===girl.hobby); //false

　上面代碼中，一個構造函數Person生成了兩個對象實例boy和girl，並且有兩個屬性和一個方法。但是，它們的hobby方法是不一樣的。也就是說，每當你使用new來調用構造函數放回一個對象實例的時候，都會創建一個hobby方法。這既沒有必要，又浪費資源，因為所有hobby方法都是童顏的行為，完全可以被兩個對象實例共用。

　　所以，構造函數的缺點就是：同一個構造函數的對象實例之間無法共用屬性或方法。

3.prototype屬性的作用

　　為瞭解決構造函數的對象實例之間無法共用屬性的缺點，js提供了prototype屬性。

　　js中每個數據類型都是對象（除了null和undefined），而每個對象都繼承自另外一個對象，後者稱為“原型”（prototype）對象，只有null除外，它沒有自己的原型對象。

　　原型對象上的所有屬性和方法，都會被對象實例所共用。

　　通過構造函數生成對象實例時，會將對象實例的原型指向構造函數的prototype屬性。每一個構造函數都有一個prototype屬性，這個屬性就是對象實例的原型對象。

function Person(name,height){
this.name=name;
this.height=height;
} 
Person.prototype.hobby=function(){
return 'watching movies';
}
var boy=new Person('keith',180);
var girl=new Person('rascal',153); 
console.log(boy.name); //'keith'
console.log(girl.name); //'rascal'
console.log(boy.hobby===girl.hobby); //true

　　上面代碼中，如果將hobby方法放在原型對象上，那麼兩個實例對象都共用著同一個方法。我希望大家都能理解的是，對於構造函數來說，prototype是作為構造函數的屬性；對於對象實例來說，prototype是對象實例的原型對象。所以prototype即是屬性，又是對象。

　　原型對象的屬性不是對象實例的屬性。對象實例的屬性是繼承自構造函數定義的屬性，因為構造函數內部有一個this關鍵字來指向將要生成的對象實例。對象實例的屬性，其實就是構造函數內部定義的屬性。只要修改原型對象上的屬性和方法，變動就會立刻體現在所有對象實例上。

Person.prototype.hobby=function(){
 return 'swimming';
 }
 console.log(boy.hobby===girl.hobby); //true
 console.log(boy.hobby()); //'swimming'
console.log(girl.hobby()); //'swimming'

　　上面代碼中，當修改了原型對象的hobby方法之後，兩個對象實例都發生了變化。這是因為對象實例其實是沒有hobby方法，都是讀取原型對象的hobby方法。也就是說，當某個對象實例沒有該屬性和方法時，就會到原型對象上去查找。如果實例對象自身有某個屬性或方法，就不會去原型對象上查找。

boy.hobby=function(){
 return 'play basketball';
 }
 console.log(boy.hobby()); //'play basketball'
 console.log(girl.hobby()); //'swimming'

　　上面代碼中，boy對象實例的hobby方法修改時，就不會在繼承原型對象上的hobby方法了。不過girl仍然會繼承原型對象的方法。

　　總結一下：

　　a：原型對象的作用，就是定義所有對象實例所共用的屬性和方法。

　　b：prototype，對於構造函數來說，它是一個屬性；對於對象實例來說，它是一個原型對象。

4.原型鏈（prototype chains）

　　對象的屬性和方法，有可能是定義在自身，也有可能是定義在它的原型對象。由於原型對象本身對於對象實例來說也是對象，它也有自己的原型，所以形成了一條原型鏈（prototype chain）。比如，a對象是b對象的原型，b對象是c對象的原型，以此類推。所有一切的對象的原型頂端，都是Object.prototype，即Object構造函數的prototype屬性指向的那個對象。

　　當然，Object.prototype對象也有自己的原型對象，那就是沒有任何屬性和方法的null對象，而null對象沒有自己的原型。

1 console.log(Object.getPrototypeOf(Object.prototype)); //null

2 console.log(Person.prototype.isPrototypeOf(boy)) //true

　　原型鏈（prototype chain）的特點有：

　　　　a：讀取對象的某個屬性時，JavaScript引擎先尋找對象本身的屬性，如果找不到，就到它的原型去找，如果還是找不到，就到原型的原型去找。如果直到最頂層的Object.prototype還是找不到，則返回undefined。

　　　　b：如果對象自身和它的原型，都定義了一個同名屬性，那麼優先讀取對象自身的屬性，這叫做“覆蓋”（overiding）。

　　　　c：一級級向上在原型鏈尋找某個屬性，對性能是有影響的。所尋找的屬性在越上層的原型對象，對性能的影響越大。如果尋找某個不存在的屬性，將會遍歷整個原型鏈。

　　看概念可能比較晦澀，我們來看一個例子。但是理解了概念真的很重要。

var arr=[1,2,3]; 
console.log(arr.length); //3
console.log(arr.valueOf()) //[1,2,3]
console.log(arr.join('|')) //1|2|3

 　　上面代碼中，定了一個數組arr，數組裡面有三個元素。我們並沒有給數組添加任何屬性和方法，可是卻在調用length，join()，valueOf()時，卻不會報錯。

　　length屬性是繼承自Array.prototype的，屬於原型對象上的一個屬性。join方法也是繼承自Array.prototype的，屬於原型對象上的一個方法。這兩個方法是所有數組所共用的。當實例對象上沒有這個length屬性時，就會去原型對象查找。

　　valueOf方法是繼承自Object.prototype的。首先，arr數組是沒有valueOf方法的，所以就到原型對象Array.prototype查找。然後，發現Array.prototype對象上沒有valueOf方法。最後，再到它的原型對象Object.prototype查找。

　　來看看Array.prototype對象和Object.prototype對象分別有什麼屬性和方法。

console.log(Object.getOwnPropertyNames(Array.prototype))
//["length", "toSource", "toString", "toLocaleString", "join", "reverse", "sort", "push", "pop", "shift", "unshift", "splice", "concat", "slice", "lastIndexOf", "indexOf", "forEach", "map", "filter", "reduce", "reduceRight", "some", "every", "find", "findIndex", "copyWithin", "fill", "entries", "keys", "values", "includes", "constructor", "$set", "$remove"]
 console.log(Object.getOwnPropertyNames(Object.prototype))
 // ["toSource", "toString", "toLocaleString", "valueOf", "watch", "unwatch", "hasOwnProperty", "isPrototypeOf", "propertyIsEnumerable", "__defineGetter__", "__defineSetter__", "__lookupGetter__", "__lookupSetter__", "__proto__", "constructor"]

　　我相信，大家看到這裡，對prototype還是似懂非懂的。這很正常，畢竟是js中比較重要又比較抽象的概念,不可能那麼快就掌握，再啃多幾篇，說不定掌握其精髓。在某乎上，有一個活生生的實例，可能也是大家會遇到的問題。可以看看 js構造函數和原型對象。

5.constructor屬性

　　prototype對象有一個constructor屬性，預設指向prototype對象所在的構造函數。

function A(){};
console.log(A.prototype.constructor===A) //true

　　要註意的是，prototype是構造函數的屬性，而constructor則是構造函數的prototype屬性所指向的那個對象，也就是原型對象的屬性。註意不要混淆。

console.log(A.hasOwnProperty('prototype')); //true
 console.log(A.prototype.hasOwnProperty('constructor')); //true

　　由於constructor屬性是定義在原型（prototype）對象上面，意味著可以被所有實例對象繼承。

function A(){};
 var a=new A(); 
 console.log(a.constructor); //A()
console.log(a.constructor===A.prototype.constructor);//true

　　上面代碼中，a是構造函數A的實例對象，但是a自身沒有contructor屬性，該屬性其實是讀取原型鏈上面的

A.prototype.constructor屬性。

　　5.1：constructor屬性的作用

　　　a：分辨原型對象到底屬於哪個構造函數

function A(){};
var a=new A(); 
console.log(a.constructor===A) //true
console.log(a.constructor===Array) //false

　　　　上面代碼表示，使用constructor屬性，確定實例對象a的構造函數是A，而不是Array。

　　　　b：從實例新建另一個實例

function A() {};
 var a = new A();
var b = new a.constructor();
console.log(b instanceof A); //true

　　　　上面代碼中，a是構造函數A的實例對象，可以從a.constructor間接調用構造函數。

　　　　c：調用自身的構造函數成為可能

A.prototype.hello = function() {
return new this.constructor();
}

　　　　d：提供了一種從構造函數繼承另外一種構造函數的模式

function Father() {} 
 function Son() {
Son.height.constructor.call(this);
 } 
 Son.height = new Father();

　　　　上面代碼中，Father和Son都是構造函數，在Son內部的this上調用Father，就會形成Son繼承Father的效果。

　　　　e：由於constructor屬性是一種原型對象和構造函數的關係，所以在修改原型對象的時候，一定要註意constructor的指向問題。

　　　　解決方法有兩種，要麼將constructor屬性指向原來的構造函數，要麼只在原型對象上添加屬性和方法，避免instanceof失真。

6.instanceof運算符

　　instanceof運算符返回一個布爾值，表示指定對象是否為某個構造函數的實例。

function A() {};
var a = new A();
console.log(a instanceof A); //true

　　因為instanceof對整個原型鏈上的對象都有效，所以同一個實例對象，可能會對多個構造函數都返回true。

function A() {};
 var a = new A(); 
console.log(a instanceof A); //true
console.log(a instanceof Object); //true

　註意，instanceof對象只能用於複雜數據類型（數組，對象等），不能用於簡單數據類型（布爾值，數字，字元串等）。

var x = [1];
 var o = {};
 var b = true;
 var c = 'string';
 console.log(x instanceof Array); //true
console.log(o instanceof Object); //true
 console.log(b instanceof Boolean); //false
console.log(c instanceof String); //false

　　此外，null和undefined都不是對象，所以instanceof 總是返回false。

console.log(null instanceof Object); //false console.log(undefined instanceof Object); //false

　　利用instanceof運算符，還可以巧妙地解決，調用構造函數時，忘了加new命令的問題。

function Keith(name,height) {
 if (! this instanceof Keith) {
 return new Keith(name,height);
 }
 this.name = name;
 this.height = height;
}

　　上面代碼中，使用了instanceof運算符來判斷函數體內的this關鍵字是否指向構造函數Keith的實例，如果不是，就表明忘記加new命令，此時構造函數會返回一個對象實例，避免出現意想不到的結果。

　 因為限於篇幅的原因，暫時介紹到這裡。

　　我會在下次的分享中談談原型（prototype）對象的一些原生方法，如Object.getPrototypeOf()，Object.setPrototypeOf()等，並且介紹獲取原生對象方法的比較。

以上所述是小編給大家介紹的詳解Javascript中prototype屬性(推薦)的相關知識，希望對大家有所幫助。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Ajax中瀏覽器的緩存問題解決方法
    我們在做項目中，一般提交請求都會通過ajax來提交，但是測試的時候發現，每次提交後得到的數據都是一樣的，調試可以排除後臺代碼的問題，所以問題肯定是出在前臺 每次清除緩存後，就會得到一個新的數據，所以歸根到底就是瀏覽器緩存問題。糾結了很久，終於解決了，在這裡總結一下。 我們都知道ajax能提高頁面載入 ...
  • web前端頁面優化——個人見解
    web前端頁面優化，我們從JavaScript、css、html這3個方面說下，我的見解，希望大神們能有剛好優化方法，一起探討。 一、 有關javascript方面 優化見解。 1. 首先舉個例子：下載1個 100KB 的js文件，要比4個 25KB的js文件快。 因此，我們得出了一個結論： ”那就 ...
  • 原生js+canvas實現滑動拼圖驗證碼
    上圖為網易雲盾的滑動拼圖驗證碼，其應該有一個專門的圖片庫，裁剪的位置是固定的。我的想法是，隨機生成圖片，隨機生成位置，再用canvas裁剪出滑塊和背景圖。下麵介紹具體步驟。 首先隨便找一張圖片渲染到canvas上，這裡 canvas作為畫布， block作為裁剪出來的小滑塊。 下麵考慮如何裁剪出拼圖 ...
  • JavaScript文件引入方式區別
    1、JavaScript文件引入方式 （1）正常引入 （2）defer （3）async 2、區別（主要是js載入，js執行，DOM解析區別） 註意： async 的腳本並不保證按照指定它們的先後順序執行 ...
  • javascript仿es6的map類
    var Dictionary = (function (){ var f = function(){ this._items = {}; }; var proto = f.prototype; proto.has = function(key){ return key in this... ...
  • 想轉行做web前端工程師，必學這6大技能
    web前端工程師是近幾年才發展出來的新興職業，也是目前火爆且高薪的職業。大需求的市場環境下，出現了越來越多的人群轉行做web前端工程師，如設計師、後臺程式員、網蟲、大學其他專業、策劃、編輯等等。 要學習web前端開發，需要掌握哪些知識呢？ 1HTML 這個是最簡單的，也是最基礎的。要熟練掌握div、 ...
  • HTML5 參數傳遞
    頁面顯示效果，如下圖： 主頁面代碼： 跳轉頁面代碼： ...
  • react-native-splash-screen 插件 android 系統app崩潰問題
    問題 react native版本 0.53.3 react native splash screen版本 3.0.6 一切配置妥當後出現如下問題： 在android studio里的調試報錯為 原因 react native splash screen版本 3.0.1 和 3.0.6 有所不同 差 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類