日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔!

生活随笔

當前位置: 首頁 > 前端技术 > javascript >内容正文

javascript

html5创建对象的方法,JavaScript面向对象-使用工厂方法和构造函数方法创建对象...

發布時間:2023/12/18 javascript 27 豆豆
生活随笔 收集整理的這篇文章主要介紹了 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面向对象-使用工厂方法和构造函数方法创建对象...的全部內容,希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯,歡迎將生活随笔推薦給好友。