Javascript 之封裝(Package)
一、 構(gòu)造函數(shù)(Constructor)模式的封裝
為了解決從原型對象生成實例的問題,Javascript提供了一個構(gòu)造函數(shù)(Constructor)模式。
所謂"構(gòu)造函數(shù)",其實就是一個普通函數(shù),但是內(nèi)部使用了this變量。對構(gòu)造函數(shù)使用new運(yùn)算符,就能生成實例,并且this變量會綁定在實例對象上。
舉個例子,下面生成的是狗的原型對象:
function Dog(name,color,species){ this.name = name; this.color = color; this.species = species; this.type = "犬科動物"; }
生成實例對象如下:
var dog1 = new Dog("大黃","黃色","中華田園犬"); var dog2 = new Dog("小黑","黑色","德國黑背"); alert(dog1.name); //大黃 alert(dog2.color); //黑色 這時dog1和dog2會自動含有一個constructor屬性,指向它們的構(gòu)造函數(shù)。 alert(dog1.constructor == Dog); //true alert(dog2.constructor == Dog); //true Javascript還提供了一個instanceof運(yùn)算符,驗證原型對象與實例對象之間的關(guān)系。 alert(dog1 instanceof Dog); //true alert(dog2 instanceof Dog); //true
但是,構(gòu)造函數(shù)模式也存在浪費內(nèi)存的問題。因為對于每一個實例對象,type屬性都是一樣的內(nèi)容,每生成一個實例對象,都必須為重復(fù)的內(nèi)容多分配一次內(nèi)存,這樣既不節(jié)省,也缺乏效率。因此,我們應(yīng)該想出一種讓type這樣的屬性在內(nèi)存中只生成一次,并且所有實例都指向這個內(nèi)存地址的方法。
二、 構(gòu)造函數(shù)結(jié)合原型屬性(Prototype)模式的封裝
針對構(gòu)造函數(shù)方法會浪費內(nèi)存的問題,有下面的解決方案,即將那些不變的屬性和方法,直接定義在構(gòu)造函數(shù)的Prototype對象上。
function Dog(name,color,species){ this.name = name; this.color = color; this.species = species; } Dog.prototype.type = "犬科動物";
生成實例對象如下:
var dog1 = new Dog("大黃","黃色","中華田園犬"); var dog2 = new Dog("小黑","黑色","德國黑背"); alert(dog1.type); //犬科動物
這時所有實例的type屬性,其實都是同一個內(nèi)存地址,指向prototype對象,因此就提高了運(yùn)行效率。
三、 Prototype模式的驗證方法
為了配合prototype屬性,Javascript定義了一些輔助方法,幫助我們使用它。
3.1 isPrototypeOf()
這個方法用來判斷,某個proptotype對象和某個實例之間的關(guān)系。
alert(Dog.prototype.isPrototypeOf(dog1)); //true
alert(Dog.prototype.isPrototypeOf(dog2)); //true
3.2 hasOwnProperty()
每個實例對象都有一個hasOwnProperty()方法,用來判斷某一個屬性到底是本地屬性,還是繼承自prototype對象的屬性。
alert(dog1.hasOwnProperty("name")); // true
alert(dog1.hasOwnProperty("type")); // false
3.3 in運(yùn)算符
in運(yùn)算符可以用來判斷,某個實例是否含有某個屬性,不管是不是本地屬性。
alert("name" in dog1); // true
alert("type" in dog1); // true
in運(yùn)算符還可以用來遍歷某個對象的所有屬性。
for(var prop in dog1) { alert("dog1["+prop+"]="+dog1[prop]); }
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,謝謝大家對腳本之家的支持。如果你想了解更多相關(guān)內(nèi)容請查看下面相關(guān)鏈接
- JavaScript讀寫二進(jìn)制數(shù)據(jù)的方法詳解
- JavaScript實現(xiàn)JSON合并操作示例【遞歸深度合并】
- JavaScript函數(shù)、閉包、原型、面向?qū)ο髮W(xué)習(xí)筆記
- JavaScript使用indexOf()實現(xiàn)數(shù)組去重的方法分析
- JavaScript日期工具類DateUtils定義與用法示例
- Reactnative-iOS回調(diào)Javascript的方法
- JavaScript實現(xiàn)簡單的隱藏式側(cè)邊欄功能示例
- 詳解vue-cli 腳手架項目-package.json
- package.json文件配置詳解
- 詳解Nodejs之npm&package.json
- nodejs npm package.json中文文檔
- Package.js 現(xiàn)代化的JavaScript項目make工具
相關(guān)文章
Dom-api MutationObserver使用方法詳解
這篇文章主要為大家介紹了Dom-api MutationObserver使用方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11判斷Spartacus?SSR的Transfer?State是否正常工作技巧
這篇文章主要為大家介紹了判斷Spartacus?SSR的Transfer?State是否正常工作技巧,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10微信小程序 動態(tài)綁定事件并實現(xiàn)事件修改樣式
這篇文章主要介紹了微信小程序 動態(tài)綁定事件并實現(xiàn)事件修改樣式的相關(guān)資料,需要的朋友可以參考下2017-04-04Three.js?Interpolant實現(xiàn)動畫插值
這篇文章主要為大家介紹了Three.js?Interpolant實現(xiàn)動畫插值示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02