這次帶給大家js定義類別有哪些方法,js定義類別的注意事項有哪些,下面就是實戰案例,一起來看一下。
ECMAScript6已經支援了class,但之前版本都不支援類,但是可以透過一些方法來模擬類別。
js中的類,既是重點,也是難點,很多時候都感覺模稜兩可。
先強調一下js中很重要的3個知識點:this、prototype、constructor。
#下面我們來總結定義(模擬)類別的幾種方法:
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);工廠模式的方法建立物件,工廠模式可以根據接受的參數來建立一個包含必要資訊的對象,可以無限次數的呼叫這個方法,每次都回傳一個包含2個屬性2個方法的物件。工廠模式解決了創建類似物件的問題,但沒有解決物件的識別問題,即無法確定一個物件的類別,統一為Object。
2.
建構子法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());
建構子的方式雖然確定了物件的歸屬問題,能夠確定物件的類型,但建構函數中的方法需要在每個物件中都要重新建立一遍,導致一些效能問題。
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()); //李四由實例程式碼我們可以知道,物件實例可以存取原型中的值,但不能重寫原型中的值,如果物件實例中定義了和原型重名的屬性,那麼該屬性就會屏蔽原型中的那個屬性,但並不會重寫。 4.封裝(暫且這麼叫吧)
#
var Dog = { createDog:function(){ var dog = {}; dog.name = "汪汪"; dog.sayHello = function(){ console.log("Hello World!"); }; return dog; } }; var dog = Dog.createDog(); dog.sayHello();就是把程式碼都封裝起來,將實例物件作為一個整體返回,有點類似工廠模式。
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
以上是js定義類別有哪些方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!