Javascript 之封裝(Package)
一、 構(gòu)造函數(shù)(Constructor)模式的封裝
為了解決從原型對象生成實(shí)例的問題,Javascript提供了一個構(gòu)造函數(shù)(Constructor)模式。
所謂"構(gòu)造函數(shù)",其實(shí)就是一個普通函數(shù),但是內(nèi)部使用了this變量。對構(gòu)造函數(shù)使用new運(yùn)算符,就能生成實(shí)例,并且this變量會綁定在實(shí)例對象上。
舉個例子,下面生成的是狗的原型對象:
function Dog(name,color,species){
this.name = name;
this.color = color;
this.species = species;
this.type = "犬科動物";
}
生成實(shí)例對象如下:
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)算符,驗(yàn)證原型對象與實(shí)例對象之間的關(guān)系。
alert(dog1 instanceof Dog); //true
alert(dog2 instanceof Dog); //true
但是,構(gòu)造函數(shù)模式也存在浪費(fèi)內(nèi)存的問題。因?yàn)閷τ诿恳粋€實(shí)例對象,type屬性都是一樣的內(nèi)容,每生成一個實(shí)例對象,都必須為重復(fù)的內(nèi)容多分配一次內(nèi)存,這樣既不節(jié)省,也缺乏效率。因此,我們應(yīng)該想出一種讓type這樣的屬性在內(nèi)存中只生成一次,并且所有實(shí)例都指向這個內(nèi)存地址的方法。
二、 構(gòu)造函數(shù)結(jié)合原型屬性(Prototype)模式的封裝
針對構(gòu)造函數(shù)方法會浪費(fèi)內(nèi)存的問題,有下面的解決方案,即將那些不變的屬性和方法,直接定義在構(gòu)造函數(shù)的Prototype對象上。
function Dog(name,color,species){
this.name = name;
this.color = color;
this.species = species;
}
Dog.prototype.type = "犬科動物";
生成實(shí)例對象如下:
var dog1 = new Dog("大黃","黃色","中華田園犬");
var dog2 = new Dog("小黑","黑色","德國黑背");
alert(dog1.type); //犬科動物
這時所有實(shí)例的type屬性,其實(shí)都是同一個內(nèi)存地址,指向prototype對象,因此就提高了運(yùn)行效率。
三、 Prototype模式的驗(yàn)證方法
為了配合prototype屬性,Javascript定義了一些輔助方法,幫助我們使用它。
3.1 isPrototypeOf()
這個方法用來判斷,某個proptotype對象和某個實(shí)例之間的關(guān)系。
alert(Dog.prototype.isPrototypeOf(dog1)); //true
alert(Dog.prototype.isPrototypeOf(dog2)); //true
3.2 hasOwnProperty()
每個實(shí)例對象都有一個hasOwnProperty()方法,用來判斷某一個屬性到底是本地屬性,還是繼承自prototype對象的屬性。
alert(dog1.hasOwnProperty("name")); // true
alert(dog1.hasOwnProperty("type")); // false
3.3 in運(yùn)算符
in運(yùn)算符可以用來判斷,某個實(shí)例是否含有某個屬性,不管是不是本地屬性。
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實(shí)現(xiàn)JSON合并操作示例【遞歸深度合并】
- JavaScript函數(shù)、閉包、原型、面向?qū)ο髮W(xué)習(xí)筆記
- JavaScript使用indexOf()實(shí)現(xiàn)數(shù)組去重的方法分析
- JavaScript日期工具類DateUtils定義與用法示例
- Reactnative-iOS回調(diào)Javascript的方法
- JavaScript實(shí)現(xiàn)簡單的隱藏式側(cè)邊欄功能示例
- 詳解vue-cli 腳手架項(xiàng)目-package.json
- package.json文件配置詳解
- 詳解Nodejs之npm&package.json
- nodejs npm package.json中文文檔
- Package.js 現(xiàn)代化的JavaScript項(xiàng)目make工具
相關(guān)文章
微信小程序 獲取javascript 里的數(shù)據(jù)
這篇文章主要介紹了微信小程序 獲取javascript 里的數(shù)據(jù)的相關(guān)資料,這里通過實(shí)例來說明如何獲取javascript里的數(shù)據(jù),希望能幫助到大家,需要的朋友可以參考下2017-08-08
微信小程序 picker-view 組件詳解及簡單實(shí)例
這篇文章主要介紹了微信小程序 picker-view 組件詳解及簡單實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-01-01
前端框架ECharts?dataset對數(shù)據(jù)可視化的高級管理
這篇文章主要為大家介紹了前端框架ECharts?dataset對數(shù)據(jù)可視化的高級管理,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12
reduce探索lodash.reduce實(shí)現(xiàn)原理解析
這篇文章主要為大家介紹了reduce探索lodash.reduce實(shí)現(xiàn)原理示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02
關(guān)于js typeof 與 instanceof 判斷數(shù)據(jù)類型區(qū)別及開發(fā)使用
我們經(jīng)常會遇到判斷一個變量的數(shù)據(jù)類型或該變量是否為空值的情況,你是如何去選擇判斷類型操作符的?本文來記錄一下我們開發(fā)人員必須掌握關(guān)于 typeof 和 instanceof 的知識點(diǎn)及在開發(fā)中的使用建議,同時在面試過程中也經(jīng)常會遇到這樣的問題,需要的朋友可參考下文章內(nèi)容2021-10-10

