1耳幢、工廠模式
function createPerson(name, age) {
const o = new Object(); // const o = {};
o.name = name;
o.age = age;
o.sayName = function(){
alert(this.name);
}
return o;
}
const person = createPerson('ivy'岸晦,'18');
優(yōu)點(diǎn):解決了創(chuàng)建多個(gè)相似對(duì)象的問(wèn)題
缺點(diǎn):沒(méi)有解決對(duì)象類型識(shí)別的問(wèn)題
2欧啤、構(gòu)造函數(shù)模式
function Person(name, age) {
this.name = name;
this.age = age;
this.sayName = function(){
alert(this.name);
}
}
const person = new Person('ivy', '18');
經(jīng)歷以下四個(gè)步驟:
(1)創(chuàng)建一個(gè)新對(duì)象;
(2)將構(gòu)造函數(shù)的作用域賦值給了this對(duì)象(因此this就指向了這個(gè)新對(duì)象)启上;
(3)執(zhí)行構(gòu)造函數(shù)中的代碼(為這個(gè)新對(duì)象添加屬性)拾因;
(4)返回新對(duì)象座慰;
標(biāo)識(shí)對(duì)象類型: person實(shí)例對(duì)象有一個(gè)constructor屬性尚揣,該屬性指向構(gòu)造函數(shù)Person
person.constructor === Person // true
person instanceof Person // true
person instanceof Object // true
優(yōu)點(diǎn):可以將它的實(shí)例標(biāo)識(shí)為一種特定的類型
缺點(diǎn): 給每個(gè)實(shí)例都創(chuàng)建了一個(gè)新的同名Function實(shí)例
小小改造: 轉(zhuǎn)移函數(shù)定義到構(gòu)造函數(shù)外部
function Person(name) {
this.name = name;
this.sayName = sayName;
}
function sayName(){
alert(this.name);
}
優(yōu)點(diǎn): 不同實(shí)例對(duì)象共享全局作用域的一個(gè)函數(shù)
缺點(diǎn): 如果對(duì)象需要很多方法站玄,則需要在全局作用域下定義很多全局函數(shù)
3、原型模式
function Person(){}包券;
Person.prototype.name = 'ivy'纫谅;
Person.prototype.age = '18';
Person.prototype.sayName = function(){
alert(this.name);
};
const person = new Person();
person.sayName();
優(yōu)點(diǎn): 所有實(shí)例對(duì)象可以共享原型包含的屬性和方法兴使;
缺點(diǎn): 實(shí)例擁有同一組屬性和方法系宜;
4、組合使用構(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);
}
}
const person = new Person('ivy', '18', 'engineer');
person.sayName();
優(yōu)點(diǎn):集兩種模式之長(zhǎng),構(gòu)造函數(shù)模式用于定義實(shí)例屬性发魄,原型模式用于定義方法和共享的屬性
5盹牧、動(dòng)態(tài)原型模式
function Person (name, age, job){
this.name = name;
this.age = age;
this.job = job;
if(typeof this.sayHi !== 'function'){
Person.prototype.sayName = function() {
alert(this.name);
}
Person.prototype.sayBye = function() {
alert('bye bye~');
}
}
const person = new Person('ivy', '18', 'engineer');
person.sayName();
作用: 通過(guò)檢查某些應(yīng)該存在的方法是否存在,來(lái)決定是否需要初始化原型對(duì)象;
if判斷語(yǔ)句只會(huì)在初次初始化構(gòu)造函數(shù)時(shí)執(zhí)行励幼。
優(yōu)點(diǎn): 1汰寓、把所有信息都封裝在構(gòu)造函數(shù)中;
2苹粟、保持了組合使用構(gòu)造函數(shù)模式和原型模式的優(yōu)點(diǎn)有滑;
6、寄生構(gòu)造函數(shù)模式
function Person(name, age, job) {
const o = new Object(); //const o = {};
o.name = name;
o.age = age;
o.job = job;
o.sayName = function() {
alert('this.name');
}
return o;
}
const person = new Person('ivy', '18', 'Engineer')
與工廠模式的區(qū)別在于創(chuàng)建方式的不同嵌削,這里使用new創(chuàng)建
缺點(diǎn):無(wú)法識(shí)別實(shí)例的類型,與工廠模式差不多
優(yōu)點(diǎn): 在函數(shù)內(nèi)封裝了創(chuàng)建對(duì)象的代碼毛好,然后返回先創(chuàng)建的對(duì)象,重寫調(diào)用構(gòu)造函數(shù)時(shí)返回的值
特殊場(chǎng)景:創(chuàng)建具有額外方法的特殊數(shù)組
function SpecialArray(...args) {
const array = [];
[].push.apply(array, args);
array.toPipe = function () {
return this.join('|');
};
return array;
}
const array = new SpecialArray('red', 'green', 'blue');
console.log(array.toPipe());
7苛秕、穩(wěn)妥構(gòu)造函數(shù)模式
穩(wěn)妥對(duì)象:指沒(méi)有公共屬性肌访,而且其方法也不引用this的對(duì)象
與寄生構(gòu)造函數(shù)的不同
1、新創(chuàng)建對(duì)象的實(shí)例方法不引用this;
2艇劫、不適用new操作符調(diào)用構(gòu)造函數(shù)
function Person(name吼驶, age) {
const o = new Object();
const realName = name;
o.sayName = function(){
console.log(realName);
};
o.sayAge = function(){
console.log(age);
}
return o;
}
const person = Person('ivy', '18');
person.sayName(); // ivy
person.sayAge(); // 18
person.realName // undefined