javascript創建物件的3種方法
Dec 08, 2016 am 10:45 AM
javascript
本文為大家分享了js創建物件的多種方法,分享個方法的優劣,具體內容如下
第一種創建物件的方式:
創建JSON物件
推薦使用的場合: 作為函數的參數,臨時只用一次的場景。例如設定函數原型物件。
var object = { name: "Eric", age: 24, sayHi: function(){ console.log("My name is "+ this.name + " this year is " + this.age + "years old.") } };
登入後複製
第二種創建物件的方式:
創建一個Object物件
var object = new Object(); object.name = "Eric"; object.age = 24; object.sayHi = function(){....};
登入後複製
建構新物件。
第三種創建物件的方式:
function Person() { this.name = "Eric"; this.age = 24; this.sayHi = function(){ console.log(this.name); } } var object1 = new Person(); var object2 = new Person();
登入後複製
這種創建物件方式解決了前兩種方式的缺點,可以作為物件創建的模板,可以一直重複使用創建多個物件。
new運算子的作用:
執行建構子(new後面的那個函數),在建構函式內部建立一個空物件
把上一部建立的空物件跟建構函式的原型物件進行關聯
然後把this指向目前空物件
在建構函式執行結束後,如果沒有return,把空物件回傳給object
new運算子原理
第三種方式有個缺點: 物件的內部的函數會在每個物件中都存一份如果創建的物件非常多的話,那麼非常浪費記憶體。函數的行為是所有物件可以共有,不需要每個物件都保存一份。所以,可以把函數放到原型中進行聲明,那麼所有物件都有了公共的函數,而且記憶體只保留一份。所有的屬性寫到物件的內部
第三種方式beta1:
function Person() { this.name = 'Eric'; this.age = 24; } Person.prototype = { sayHi: function() { }, }; var object1 = new Person(); var object2 = new Person();
登入後複製
繼續升級beta2 :
function Person(name,age) { this.name = name || ""; this.age = age || ""; } Person.prototype = { sayHi: function() { }, }; var object1 = new Person(name1,age1); var object2 = new Person(name2,age2);
登入後複製
了
問題:2.參數增減都會導致函數宣告變化,呼叫的地方也可能改變。
如何解決:繼續升級 beta3 :
function Person(option) { //用一个对象把所有参数覆盖 this.name = option.name || ""; this.age = option.age || ""; } Person.prototype = { sayHi: function() { }, }; var object1 = new Person({ name: "Eric", age: 24 }); var object2 = new Person({ name: "XXX", age: xx });
登入後複製
繼續最佳化,把初始化的程式碼 放到init函數中
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章
擊敗分裂小說需要多長時間?
3 週前
By DDD
倉庫:如何復興隊友
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗?
3 週前
By 王林
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前
By 尊渡假赌尊渡假赌尊渡假赌

熱門文章
擊敗分裂小說需要多長時間?
3 週前
By DDD
倉庫:如何復興隊友
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗?
3 週前
By 王林
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前
By 尊渡假赌尊渡假赌尊渡假赌

熱門文章標籤

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)