javascript創(chuàng)建對(duì)象的3種方法
本文為大家分享了js創(chuàng)建對(duì)象的多種方法,分享個(gè)方法的優(yōu)劣,具體內(nèi)容如下
第一種創(chuàng)建對(duì)象的方式:
創(chuàng)建JSON對(duì)象
推薦使用的場(chǎng)合: 作為函數(shù)的參數(shù),臨時(shí)只用一次的場(chǎng)景。比如設(shè)置函數(shù)原型對(duì)象。
var object = { name: "Eric", age: 24, sayHi: function(){ console.log("My name is "+ this.name + " this year is " + this.age + "years old.") } };
第二種創(chuàng)建對(duì)象的方式:
創(chuàng)建一個(gè)Object對(duì)象
var object = new Object(); object.name = "Eric"; object.age = 24; object.sayHi = function(){....};
以上兩種創(chuàng)建對(duì)象方式的缺點(diǎn):不能作為對(duì)象創(chuàng)建的模板,也就是不能用new進(jìn)行構(gòu)造新對(duì)象。
第三種創(chuàng)建對(duì)象的方式:
function Person() { this.name = "Eric"; this.age = 24; this.sayHi = function(){ console.log(this.name); } } var object1 = new Person(); var object2 = new Person();
這種創(chuàng)建對(duì)象方式解決了前兩種方式的缺點(diǎn),可以作為對(duì)象創(chuàng)建的模板,可以一直復(fù)用創(chuàng)建出多個(gè)對(duì)象。
new運(yùn)算符的作用:
執(zhí)行構(gòu)造函數(shù)(new后面的那個(gè)函數(shù)),在構(gòu)造函數(shù)內(nèi)部創(chuàng)建一個(gè)空對(duì)象
把上一部創(chuàng)建的空對(duì)象跟構(gòu)造函數(shù)的原型對(duì)象進(jìn)行關(guān)聯(lián)
然后把this指向當(dāng)前空對(duì)象
在構(gòu)造函數(shù)執(zhí)行結(jié)束后,如果沒(méi)有return,把空對(duì)象返回給object
new運(yùn)算符原理
第三種方式有個(gè)缺點(diǎn): 對(duì)象的內(nèi)部的函數(shù)會(huì)在每個(gè)對(duì)象中都存一份如果創(chuàng)建的對(duì)象非常多的話,那么非常浪費(fèi)內(nèi)存。函數(shù)的行為是所有對(duì)象可以共有,不需要每個(gè)對(duì)象都保存一份。所以,可以把函數(shù)放到原型中進(jìn)行聲明,那么所有對(duì)象都有了公共的函數(shù),而且內(nèi)存中只保留一份。所有的屬性寫(xiě)到對(duì)象的內(nèi)部
第三種方式beta1:
function Person() { this.name = 'Eric'; this.age = 24; } Person.prototype = { sayHi: function() { }, }; var object1 = new Person(); var object2 = new Person();
繼續(xù)升級(jí) 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);
問(wèn)題:1、調(diào)用者如果傳遞參數(shù)的順序發(fā)生變化,那么廢了
問(wèn)題:2、參數(shù)增減都會(huì)導(dǎo)致函數(shù)聲明變化,調(diào)用的地方也可能發(fā)生變化。
如何解決:繼續(xù)升級(jí) beta3 :
function Person(option) { //用一個(gè)對(duì)象把所有參數(shù)覆蓋 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 });
繼續(xù)優(yōu)化,把初始化的代碼 放到init函數(shù)中
繼續(xù)升級(jí) beta4 :
function Person(option) { this._init(option); } Person.prototype = { _init: function (option){ this.name = option.name; this.age = option.age; }, sayHi: function(){ console.log("HI"); } }; var object1 = new Person({ name: "Eric"; age: 24 }); object1.sayHi();
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- js創(chuàng)建對(duì)象的方法匯總
- 跟我學(xué)習(xí)javascript創(chuàng)建對(duì)象(類(lèi))的8種方法
- javascript中創(chuàng)建對(duì)象的幾種方法總結(jié)
- js面向?qū)ο?多種創(chuàng)建對(duì)象方法小結(jié)
- javascript的函數(shù)、創(chuàng)建對(duì)象、封裝、屬性和方法、繼承
- javascript中創(chuàng)建對(duì)象的三種常用方法
- JavaScript 三種創(chuàng)建對(duì)象的方法
- JS 創(chuàng)建對(duì)象(常見(jiàn)的幾種方法)
- 詳解js創(chuàng)建對(duì)象的幾種方法及繼承
相關(guān)文章
javascript(js) join函數(shù)使用方法介紹
javascript(js) join函數(shù)使用方法介紹...2007-11-11javascript實(shí)現(xiàn)抽獎(jiǎng)程序的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇javascript實(shí)現(xiàn)抽獎(jiǎng)程序的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06原生JS發(fā)送異步數(shù)據(jù)請(qǐng)求
這篇文章主要為大家詳細(xì)介紹了原生JS發(fā)送異步數(shù)據(jù)請(qǐng)求的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06JS實(shí)現(xiàn)給數(shù)組對(duì)象排序的方法分析
這篇文章主要介紹了JS實(shí)現(xiàn)給數(shù)組對(duì)象排序的方法,結(jié)合實(shí)例形式分析了javascript數(shù)組對(duì)象排序相關(guān)實(shí)現(xiàn)方法與操作注意事項(xiàng),需要的朋友可以參考下2019-06-06js滾輪事件 js自定義滾動(dòng)條的實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了js滾輪事件,自定義滾動(dòng)條的實(shí)現(xiàn),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-01-01