js定義類(lèi)的幾種方法(推薦)
ECMAScript6已經(jīng)支持了class,但之前版本都不支持類(lèi),但是可以通過(guò)一些方法來(lái)模擬類(lèi)。
js中的類(lèi),既是重點(diǎn),也是難點(diǎn),很多時(shí)候都感覺(jué)模棱兩可。
首先強(qiáng)調(diào)一下js中很重要的3個(gè)知識(shí)點(diǎn):this、prototype、constructor。
下面我們來(lái)總結(jié)一下定義(模擬)類(lèi)的幾種方法:
1.工廠模式
function createObject(name,age){ var obj = new Object(); obj.name = name; obj.age = age; obj.getName = function(){ return this.name; }; obj.getAge = function(){ return this.age; } return obj; } var obj2 = createObject("王五",19); console.log(obj2.getName()); console.log(obj2.getAge()); console.log(obj2.constructor);
工廠模式的方法創(chuàng)建對(duì)象,工廠模式可以根據(jù)接受的參數(shù)來(lái)創(chuàng)建一個(gè)包含必要信息的對(duì)象,可以無(wú)限次數(shù)的調(diào)用這個(gè)方法,每次都返回一個(gè)包含2個(gè)屬性2個(gè)方法的對(duì)象。工廠模式解決了創(chuàng)建類(lèi)似對(duì)象的問(wèn)題,但沒(méi)有解決對(duì)象的識(shí)別問(wèn)題,即不能確定一個(gè)對(duì)象的類(lèi)別,統(tǒng)一為Object。
2.構(gòu)造函數(shù)法
function Person(name,age,job){ this.name = name; this.age = age; this.job = job; } Person.prototype = { constructor:Person, getName:function(){ return this.name; }, getAge:function(){ return this.age; }, getJob:function(){ return this.job; } } var p = new Person("二麻子",18,"worker"); console.log(p.constructor); console.log(p.getName()); console.log(p.getAge()); console.log(p.getJob());
構(gòu)造函數(shù)的方式雖然確定了對(duì)象的歸屬問(wèn)題,能夠確定對(duì)象的類(lèi)型,但構(gòu)造函數(shù)中的方法需要在每個(gè)對(duì)象中都要重新創(chuàng)建一遍,導(dǎo)致一些性能問(wèn)題。
3.原型模式
function Person(){ } Person.prototype = { constructor:Person, name:"張三", age:21, job:"teacher", getName:function(){ return this.name; }, getJob:function(){ return this.job; } } var p = new Person(); console.log(p.getName()); //張三 console.log(p.getJob()); //teacher var p2 = new Person(); p2.name = "李四"; console.log(p2.getName()); //李四
由實(shí)例代碼我們可以知道,對(duì)象實(shí)例可以訪問(wèn)原型中的值,但不能重寫(xiě)原型中的值,如果對(duì)象實(shí)例中定義了和原型重名的屬性,那么該屬性就會(huì)屏蔽原型中的那個(gè)屬性,但并不會(huì)重寫(xiě)。
4.封裝(暫且這么叫吧)
var Dog = { createDog:function(){ var dog = {}; dog.name = "汪汪"; dog.sayHello = function(){ console.log("Hello World!"); }; return dog; } }; var dog = Dog.createDog(); dog.sayHello();
就是把代碼都封裝起來(lái),將實(shí)例對(duì)象作為一個(gè)整體返回,有點(diǎn)類(lèi)似于工廠模式。
以上這篇js定義類(lèi)的幾種方法(推薦)就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Bootstrap模塊dropdown實(shí)現(xiàn)下拉框響應(yīng)
這篇文章主要為大家詳細(xì)介紹了Bootstrap下拉框模塊dropdown實(shí)現(xiàn)下拉框響應(yīng),感興趣的朋友可以參考一下2016-05-05JS中關(guān)于filter()方法的使用及說(shuō)明
這篇文章主要介紹了JS中關(guān)于filter()方法的使用及說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-05-05盤(pán)點(diǎn)7個(gè)簡(jiǎn)單但棘手的JavaScript面試問(wèn)題分析
這篇文章主要為大家介紹了盤(pán)點(diǎn)7個(gè)簡(jiǎn)單但棘手的JavaScript面試問(wèn)題分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11Javascript Web Worker使用過(guò)程解析
這篇文章主要介紹了Javascript Web Worker使用過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-03-03微信小程序?qū)崿F(xiàn)選擇內(nèi)容顯示對(duì)應(yīng)內(nèi)容
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)選擇內(nèi)容顯示對(duì)應(yīng)內(nèi)容,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07JS常見(jiàn)問(wèn)題之為什么點(diǎn)擊彈出的i總是最后一個(gè)
最近有很多朋友問(wèn)我,為什么點(diǎn)擊彈出的i總是最后一個(gè),于是抽時(shí)間寫(xiě)了這篇文章,特此分享到腳本之家平臺(tái),供大家參考2016-01-01相冊(cè)展示PhotoSwipe.js插件實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了相冊(cè)展示PhotoSwipe.js插件實(shí)現(xiàn)方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-08-08bootstrap 模態(tài)框(modal)實(shí)現(xiàn)水平垂直居中顯示
這篇文章主要為大家詳細(xì)介紹了bootstrap 模態(tài)框modal實(shí)現(xiàn)水平垂直居中顯示,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01