首頁 > web前端 > js教程 > 主體

javascript創建物件的3種方法

高洛峰
發布: 2016-12-08 10:45:49
原創
1031 人瀏覽過

本文為大家分享了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函數中

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板