快捷導(dǎo)航

JS 創(chuàng)建對(duì)象的模式實(shí)例小結(jié)

更新時(shí)間：2020年04月28日 10:50:56 作者：xiaoping

這篇文章主要介紹了JS 創(chuàng)建對(duì)象的模式,結(jié)合實(shí)例形式總結(jié)分析了JS 創(chuàng)建對(duì)象的各種常用模式,包括工廠模式、構(gòu)造函數(shù)模式、原型模式、組合構(gòu)造和原型模式、動(dòng)態(tài)原型模式、寄生構(gòu)造函數(shù)模式、穩(wěn)妥構(gòu)造模式等,需要的朋友可以參考下

1.工廠模式

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

新建一個(gè)對(duì)象
定義屬性和方法
return剛新建的對(duì)象

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");

存在問(wèn)題：

沒(méi)有解決對(duì)象識(shí)別的問(wèn)題（怎么識(shí)別對(duì)象的類(lèi)型）

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

不顯式創(chuàng)建對(duì)象
直接將屬性和方法定義在this中
沒(méi)有return
通過(guò) 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");

存在問(wèn)題：

每個(gè)方法都要在實(shí)例上創(chuàng)建一次

3.原型模式

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

所有原生引用類(lèi)型都在其構(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()

存在問(wèn)題：

所有屬性是被很多實(shí)例共享的

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

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

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.動(dòng)態(tài)原型模式

這里對(duì)原型的修改,能夠?qū)λ袑?shí)例生效，只在初次調(diào)用構(gòu)造函數(shù)會(huì)執(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ù)

返回的對(duì)象與構(gòu)造函數(shù)、構(gòu)造函數(shù)的原型屬性之間沒(méi)有關(guān)系
不能依賴(lài)instanceof來(lái)去定對(duì)象原型
不建議使用

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)造模式

沒(méi)有公共屬性
不使用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

摘抄自《JavaScript 高級(jí)程序設(shè)計(jì)》第六章

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《javascript面向?qū)ο笕腴T(mén)教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: