javascript
html5创建对象的方法,JavaScript面向对象-使用工厂方法和构造函数方法创建对象...
在上一篇文章中我們介紹了JavaScript簡單對象的創建方法,簡單js對象的最大問題是由于沒有類的約束,無法實現對象的重復利用,并且沒有一種約定,在操作時會帶來問題。所以人們從設計模式中借用了一種工廠模式來創建JavaScript對象。
使用工廠方法創建JavaScript對象
工廠方法的的思路是在一個函數中創建一個對象,然后為這個對象設置相應的屬性和方法,最后將這個對象返回。通過函數來封裝,以特定的接口創建對象。下面是一個以工廠方法創建person對象的例子:
function createPerson(name,age){
var o = new Object();
o.name = name;
o.age = age;
o.say = function(){
alert(this.name + "," + this.age);
}
return o;
}
// 實例化p1和p2對象
var p1 = createPerson("Leon",22);
var p2 = createPerson("Ada",20);
//調用p1和p2對象的say()方法
p1.say();
p2.say();
使用工廠方法雖然有效的解決了類的問題,但是依然存在另外一個問題。我們無法檢測對象p1和p2的數據類型。我們使用typeof僅僅只能檢測出對象是一個Object類型:
console.info(typeof p1); // 控制臺輸出:Object
如果我們想要使用instanceof來判斷對象的類型,那么p1 instanceof ?,instanceof后面要填寫什么類型呢?我們并不知道。
使用構造函數創建JavaScript對象
由于工廠方法不能確定對象的具體類型,所以人們又提出了一種新的創建JavaScript對象的方法——構造函數方法。在JavaScript中構造函數可以用來創建特定類型的對象,例如Object和Array這些js原生構造函數,在運行時會自動出現在執行環境中。我們也可以自定義構造函數,從而定義自定義類型的屬性和方法。
使用構造函數來創建類和基于工廠的方式來創建類的方法相似,最大的區別是函數的名稱就是類的名稱。通常按照編程規范的約定,類的第一個字母大寫。使用構造函數創建類時,在函數內部通過this關鍵字來完成屬性的定義。
// 使用構造函數方式來創建Person類
function Person(name,age){
this.name = name;
this.age = age;
this.say = function(){
console.info(this.name + "," + this.age);
}
}
// 通過new關鍵字來創建對象
var p1 = new Person("Leon",22);
var p2 = new Person("Ada",20);
// 調用對象的方法
p1.say();
p1.say();
如上面的代碼所示,在完成類的創建之后,我們可以通過new關鍵字來實例化對象。
使用構造函數的方式很好的解決了檢測對象類型的問題,我們可以通過instanceof關鍵字來判斷對象是不是Person類型:
console.info(p1 instanceof Person); //控制臺顯示:true
console.info(p2 instanceof Person); //控制臺顯示:true
另外,我們還可以通過constructor關鍵字來查看對象的構造函數是否是Person類型:
console.info(p1.constructor == Person); //控制臺顯示:true
console.info(p2.constructor == Person); //控制臺顯示:true
或者直接打印出p1和p2的構造函數來進行比較:
console.info(p1.constructor);
console.info(p2.constructor);
使用構造函數方法給我們所帶來的問題是每一個對象中都會存在一個方法的拷貝,如果對象的方法很多的話,就會占用大量的內存空間。
在一些高級的編譯型的面向對象編程語言(如Java)中,對象的方法是在運行時動態在棧區產生的,它們不會占用內存。而在Javascript中,使用構造函數方法創建的對象,對象中的每一個方法都是類方法的一個拷貝,如果對象中存在大量的方法,就會占用大量的內存空間。
我們可以將類的方法放到全局變量中來定義,這樣可以讓類中的方法指向同一個函數。代碼如下:
// 使用構造函數方式來創建Person類
function Person(name,age){
this.name = name;
this.age = age;
// 此時的類方法是一個全局方法的引用
this.say = say;
}
//將方法設置為全局的方法
function say(){
alert(this.name + "," + this.age);
}
通過將類的方法設置為全局方法,可以解決對象中的方法占用內存空間的問題,此時,通過構造函數創建的所有對象中的方法都指向同一個全局函數。
但是如果將所有的方法都設置為全局函數,這些函數都可以被window調用,此時就破壞了對象的封裝性,而且如果某個對象有大量的方法,就會導致代碼中有大量的全局函數,這樣也不利于我們的開發。
為了解決構造函數方法存在這些缺陷,我們就要使用原型來創建對象,下一篇文章我們將介紹使用原型來創建JavaScript對象。
相關閱讀
總結
以上是生活随笔為你收集整理的html5创建对象的方法,JavaScript面向对象-使用工厂方法和构造函数方法创建对象...的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 怎么用计算机弹出soldout,SOLD
- 下一篇: 逆波兰计算器android源码简书,计算