溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

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

總結(jié)JS創(chuàng)建對象的模式

發(fā)布時間：2020-07-29 14:27:38 來源：億速云 閱讀：91 作者：小豬 欄目：web開發(fā)

這篇文章主要講解了總結(jié)JS創(chuàng)建對象的模式，內(nèi)容清晰明了，對此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會有幫助。

1.工廠模式

抽象了創(chuàng)建具體對象的過程，創(chuàng)建了一種函數(shù)，封裝特定的接口創(chuàng)建對象的細(xì)節(jié)。

  • 新建一個對象
  • 定義屬性和方法
  • return剛新建的對象
function createPerson(name, age, job) {
 var obj = new Object();
 obj.name = name;
 obj.age = age;
 obj.job = job;
 obj.sayHi = function() {
 congsole.log(this.name);
 };
 return obj;
}

var person1 = createPerson("name1", "age1", "job1");
var person2 = createPerson("name2", "age2", "job2");

存在問題：

沒有解決對象識別的問題（怎么識別對象的類型）

2.構(gòu)造函數(shù)模式

  • 不顯式創(chuàng)建對象
  • 直接將屬性和方法定義在this中
  • 沒有return
  • 通過 new操作符調(diào)用
function Person(name, age, job) {
 this.name = name;
 this.age = age;
 this.job = job;
 this.sayHi = function() {
 console.log(this.name);
 };
}

var person1 = new Person("name1", "age1", "job1");
var person2 = new Person("name2", "age2", "job2");

存在問題：

  • 每個方法都要在實例上創(chuàng)建一次

3.原型模式

創(chuàng)建的每一個函數(shù)都有prototype原型屬性，這個屬性是一個指針，指向一個對象，這個對象的用途是包含可以由特定類型的所有實例共享的屬性和方法。

所有原生引用類型都在其構(gòu)造函數(shù)的原型上定義了方法

function Person{

}

Person.prototype.name="name"
Person.prototype.age="age"
Person.prototype.job="job"
Person.prototype.sayHi=function(){
 console.log(this.name)
}

var person1=new Person()
var person2=new Person()

存在問題：

  • 所有屬性是被很多實例共享的

4.組合構(gòu)造和原型模式

構(gòu)造函數(shù)用來定義實例屬性，原型模式用來定義方法和共享的屬性

function Person(name, age, job) {
 this.name = name;
 this.age = age;
 this.job = job;
}
Person.prototype={
 constructor:Person;
 sayHi:function(){
 console.log(this.name)
 }
}

var person1 = new Person("name1", "age1", "job1");

5.動態(tài)原型模式

這里對原型的修改,能夠?qū)λ袑嵗?，只在初次調(diào)用構(gòu)造函數(shù)會執(zhí)行

function Person(name,age,job){
 this.name=name;
 this.age=age;
 this.job=job;
 if(typeof this.sayHi !="function" ){
 Person.prototype.sayHi=functong(){
  console.log(this.name)
 }
 }
}

var person1 = new Person("name1", "age1", "job1");

6.寄生構(gòu)造函數(shù)模式

工廠模式+構(gòu)造函數(shù)

  • 返回的對象與構(gòu)造函數(shù)、構(gòu)造函數(shù)的原型屬性之間沒有關(guān)系
  • 不能依賴instanceof來去定對象原型
  • 不建議使用
function Person(name, age, job) {
 var obj = new Object();
 obj.name = name;
 obj.age = age;
 obj.job = job;
 obj.sayHi = function() {
 congsole.log(this.name);
 };
 return obj;
}

var person1 = new Person("name1", "age1", "job1");

7.穩(wěn)妥構(gòu)造模式

  • 沒有公共屬性
  • 不使用this
  • 不使用new
function Person(name, age, job) {
 var obj = new Object();
 // 定義室友變量和函數(shù)
 obj.sayHi = function() {
 congsole.log(name);
 };
 return obj;
}

var person1 = Person("name1", "age1", "job1");
// name1

看完上述內(nèi)容，是不是對總結(jié)JS創(chuàng)建對象的模式有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。

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

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

AI
助
手