js定義類的幾種方法(推薦)
ECMAScript6已經(jīng)支持了class,但之前版本都不支持類,但是可以通過一些方法來模擬類。
js中的類,既是重點(diǎn),也是難點(diǎn),很多時候都感覺模棱兩可。
首先強(qiáng)調(diào)一下js中很重要的3個知識點(diǎn):this、prototype、constructor。
下面我們來總結(jié)一下定義(模擬)類的幾種方法:
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)建對象,工廠模式可以根據(jù)接受的參數(shù)來創(chuàng)建一個包含必要信息的對象,可以無限次數(shù)的調(diào)用這個方法,每次都返回一個包含2個屬性2個方法的對象。工廠模式解決了創(chuàng)建類似對象的問題,但沒有解決對象的識別問題,即不能確定一個對象的類別,統(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ù)的方式雖然確定了對象的歸屬問題,能夠確定對象的類型,但構(gòu)造函數(shù)中的方法需要在每個對象中都要重新創(chuàng)建一遍,導(dǎo)致一些性能問題。
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í)例代碼我們可以知道,對象實(shí)例可以訪問原型中的值,但不能重寫原型中的值,如果對象實(shí)例中定義了和原型重名的屬性,那么該屬性就會屏蔽原型中的那個屬性,但并不會重寫。
4.封裝(暫且這么叫吧)
var Dog = {
createDog:function(){
var dog = {};
dog.name = "汪汪";
dog.sayHello = function(){
console.log("Hello World!");
};
return dog;
}
};
var dog = Dog.createDog();
dog.sayHello();
就是把代碼都封裝起來,將實(shí)例對象作為一個整體返回,有點(diǎn)類似于工廠模式。
以上這篇js定義類的幾種方法(推薦)就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
Bootstrap模塊dropdown實(shí)現(xiàn)下拉框響應(yīng)
這篇文章主要為大家詳細(xì)介紹了Bootstrap下拉框模塊dropdown實(shí)現(xiàn)下拉框響應(yīng),感興趣的朋友可以參考一下2016-05-05
盤點(diǎn)7個簡單但棘手的JavaScript面試問題分析
這篇文章主要為大家介紹了盤點(diǎn)7個簡單但棘手的JavaScript面試問題分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
微信小程序?qū)崿F(xiàn)選擇內(nèi)容顯示對應(yīng)內(nèi)容
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)選擇內(nèi)容顯示對應(yīng)內(nèi)容,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-07-07
相冊展示PhotoSwipe.js插件實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了相冊展示PhotoSwipe.js插件實(shí)現(xiàn)方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-08-08
bootstrap 模態(tài)框(modal)實(shí)現(xiàn)水平垂直居中顯示
這篇文章主要為大家詳細(xì)介紹了bootstrap 模態(tài)框modal實(shí)現(xiàn)水平垂直居中顯示,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-01-01

