溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

JS創(chuàng)建對(duì)象的方法有哪些

發(fā)布時(shí)間:2021-07-12 10:06:27 來源:億速云 閱讀:110 作者:小新 欄目:web開發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)JS創(chuàng)建對(duì)象的方法有哪些,小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。

第一種:Object構(gòu)造函數(shù)創(chuàng)建

var Person = new Object();
Person.name = 'Nike';
Person.age = 29;

這行代碼創(chuàng)建了Object引用類型的一個(gè)新實(shí)例,然后把實(shí)例保存在變量Person中。

第二種:使用對(duì)象字面量表示法

var Person = {};//相當(dāng)于var Person = new Object();
var Person = {
 name:'Nike';
 age:29;  
}

對(duì)象字面量是對(duì)象定義的一種簡(jiǎn)寫形式,目的在于簡(jiǎn)化創(chuàng)建包含大量屬性的對(duì)象的過程。也就是說,第一種和第二種方式創(chuàng)建對(duì)象的方法其實(shí)都是一樣的,只是寫法上的區(qū)別不同

在介紹第三種的創(chuàng)建方法之前,我們應(yīng)該要明白為什么還要用別的方法來創(chuàng)建對(duì)象,也就是第一種,第二種方法的缺點(diǎn)所在:它們都是用了同一個(gè)接口創(chuàng)建很多對(duì)象,會(huì)產(chǎn)生大量的重復(fù)代碼,就是如果你有100個(gè)對(duì)象,那你要輸入100次很多相同的代碼。那我們有什么方法來避免過多的重復(fù)代碼呢,就是把創(chuàng)建對(duì)象的過程封裝在函數(shù)體內(nèi),通過函數(shù)的調(diào)用直接生成對(duì)象。

第三種:使用工廠模式創(chuàng)建對(duì)象

function createPerson(name,age,job){
 var o = new Object();
 o.name = name;
 o.age = age;
 o.job = job;
 o.sayName = function(){
  alert(this.name); 
 };
 return o; 
}
var person1 = createPerson('Nike',29,'teacher');
var person2 = createPerson('Arvin',20,'student');

在使用工廠模式創(chuàng)建對(duì)象的時(shí)候,我們都可以注意到,在createPerson函數(shù)中,返回的是一個(gè)對(duì)象。那么我們就無法判斷返回的對(duì)象究竟是一個(gè)什么樣的類型。于是就出現(xiàn)了第四種創(chuàng)建對(duì)象的模式。

第四種:使用構(gòu)造函數(shù)創(chuàng)建對(duì)象

function Person(name,age,job){
 this.name = name;
 this.age = age;
 this.job = job;
 this.sayName = function(){
 alert(this.name);
 }; 
}
var person1 = new Person('Nike',29,'teacher');
var person2 = new Person('Arvin',20,'student');

對(duì)比工廠模式,我們可以發(fā)現(xiàn)以下區(qū)別:

1.沒有顯示地創(chuàng)建對(duì)象

2.直接將屬性和方法賦給了this對(duì)象

3.沒有return語句

4.終于可以識(shí)別的對(duì)象的類型。對(duì)于檢測(cè)對(duì)象類型,我們應(yīng)該使用instanceof操作符,我們來進(jìn)行自主檢測(cè):

alert(person1 instanceof Object);//ture
alert(person1 instanceof Person);//ture
alert(person2 instanceof Object);//ture
alert(person2 instanceof Object);//ture

同時(shí)我們也應(yīng)該明白,按照慣例,構(gòu)造函數(shù)始終要應(yīng)該以一個(gè)大寫字母開頭,而非構(gòu)造函數(shù)則應(yīng)該以一個(gè)小寫字母開頭。

那么構(gòu)造函數(shù)確實(shí)挺好用的,但是它也有它的缺點(diǎn):

就是每個(gè)方法都要在每個(gè)實(shí)例上重新創(chuàng)建一遍,方法指的就是我們?cè)趯?duì)象里面定義的函數(shù)。如果方法的數(shù)量很多,就會(huì)占用很多不必要的內(nèi)存。于是出現(xiàn)了第五種創(chuàng)建對(duì)象的方法

第五種:原型創(chuàng)建對(duì)象模式

function Person(){}
Person.prototype.name = 'Nike';
Person.prototype.age = 20;
Person.prototype.jbo = 'teacher';
Person.prototype.sayName = function(){
 alert(this.name);
};
var person1 = new Person();
person1.sayName();

使用原型創(chuàng)建對(duì)象的方式,可以讓所有對(duì)象實(shí)例共享它所包含的屬性和方法。

如果是使用原型創(chuàng)建對(duì)象模式,請(qǐng)看下面代碼:

function Person(){}
Person.prototype.name = 'Nike';
Person.prototype.age = 20;
Person.prototype.jbo = 'teacher';
Person.prototype.sayName = function(){
 alert(this.name);
};
var person1 = new Person();
var person2 = new Person();
person1.name ='Greg';
alert(person1.name); //'Greg' --來自實(shí)例
alert(person2.name); //'Nike' --來自原型

當(dāng)為對(duì)象實(shí)例添加一個(gè)屬性時(shí),這個(gè)屬性就會(huì)屏蔽原型對(duì)象中保存的同名屬性。

這時(shí)候我們就可以使用構(gòu)造函數(shù)模式與原型模式結(jié)合的方式,構(gòu)造函數(shù)模式用于定義實(shí)例屬性,而原型模式用于定義方法和共享的屬性

第六種:組合使用構(gòu)造函數(shù)模式和原型模式

function Person(name,age,job){
 this.name =name;
 this.age = age;
 this.job = job;
}
Person.prototype = {
 constructor:Person,
 sayName: function(){
 alert(this.name);
 };
}
var person1 = new Person('Nike',20,'teacher');

關(guān)于“JS創(chuàng)建對(duì)象的方法有哪些”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,使各位可以學(xué)到更多知識(shí),如果覺得文章不錯(cuò),請(qǐng)把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

js
AI