首頁 web前端 js教程 javascript創建物件的3種方法

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 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章標籤

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

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

如何使用WebSocket和JavaScript實現線上語音辨識系統 如何使用WebSocket和JavaScript實現線上語音辨識系統 Dec 17, 2023 pm 02:54 PM

如何使用WebSocket和JavaScript實現線上語音辨識系統

WebSocket與JavaScript:實現即時監控系統的關鍵技術 WebSocket與JavaScript:實現即時監控系統的關鍵技術 Dec 17, 2023 pm 05:30 PM

WebSocket與JavaScript:實現即時監控系統的關鍵技術

如何使用WebSocket和JavaScript實現線上預約系統 如何使用WebSocket和JavaScript實現線上預約系統 Dec 17, 2023 am 09:39 AM

如何使用WebSocket和JavaScript實現線上預約系統

如何利用JavaScript和WebSocket實現即時線上點餐系統 如何利用JavaScript和WebSocket實現即時線上點餐系統 Dec 17, 2023 pm 12:09 PM

如何利用JavaScript和WebSocket實現即時線上點餐系統

JavaScript與WebSocket:打造高效率的即時天氣預報系統 JavaScript與WebSocket:打造高效率的即時天氣預報系統 Dec 17, 2023 pm 05:13 PM

JavaScript與WebSocket:打造高效率的即時天氣預報系統

簡易JavaScript教學:取得HTTP狀態碼的方法 簡易JavaScript教學:取得HTTP狀態碼的方法 Jan 05, 2024 pm 06:08 PM

簡易JavaScript教學:取得HTTP狀態碼的方法

javascript如何使用insertBefore javascript如何使用insertBefore Nov 24, 2023 am 11:56 AM

javascript如何使用insertBefore

如何在JavaScript中取得HTTP狀態碼的簡單方法 如何在JavaScript中取得HTTP狀態碼的簡單方法 Jan 05, 2024 pm 01:37 PM

如何在JavaScript中取得HTTP狀態碼的簡單方法

See all articles