工厂模式

能够根据接受的参数来构建一个包含所有必要信息的 Animate 对象。可以无数次地调用这个函数，而每次它都会返回一个包含三个属性一个方法的对象。工厂模式虽然解决了创建多个相似对象的问题， 但却没有解决对象识别的问题（即怎样知道一个对象的类型） 。

functionAnimate(name,age,color){

varanimate =newObject();

animate.name= name;

animate.age= age;

animate.color= color;

animate.showName=function(){

console.log("My type is "+this.name)

};

returnanimate

}

varani1 =Animate("dog",11,"red");

ani1.showName();

varani2 =Animate("cat",11,"red");

ani2.showName();

console.log(ani1.showName== ani2.showName);//false

console.log(ani1.constructor);

console.log(ani1.constructor.hasOwnProperty("age"));

随着 JavaScript的发展，又一个新模式出现了。使用构造函数的主要问题，就是每个方法都要在每个实例上重新创建一遍，那就是

构造函数模式

functionAnimated(name,age,color){

this.name= name;

this.age= age;

this.color= color;

this.showName=function(){

console.log("My type is "+this.name)

}

}

varanimate1 =newAnimated("bird",11,"red");

animate1.showName();

varanimate2 =newAnimated("monkey",11,"brown");

animate2.showName();

//获取构造函数，返回函数

console.log(animate1.constructor==Animated);//true

console.log(animate1.constructor== animate2.constructor);//true

console.log(animate1.constructor.prototype == animate2.constructor.prototype);//true

//检测对象类型

console.log(animate1instanceofAnimated);//true

console.log(animate1.showName== animate1.showName);//true

随着 JavaScript的发展，又一个新模式出现了。

原型模式

functionAnimation(name,age,color){

this.name= name;

this.age= age;

this.color= color;

}

Animation.prototype.showName=function(){

console.log("My type is "+this.name)

};

varanimation1 =newAnimation("fox",22,"oriange");

animation1.chinaName="狐狸";

animation1.showName();

varanimation2 =newAnimation("frog",22,"oriange");

animation2.showName();

console.log(animation2.constructor);

//function Animation(name,age,color){

//this.name = name;

//this.age = age;

//this.color = color;

//}

console.log(animation1.chinaName);//狐狸

console.log(animation2.chinaName);//undefined

//但与构造函数模式不同的是，新对象的这些属性和方法是由所有实例共享的。

//换句话说，animation1 和 animation2 访问的都是同一组属性和同一个 showName() 函数。

console.log(animation1.showName== animation2.showName)

//  这个是简单的写法和原型没什么区别，唯一的区别是construct 不一样

functionAnimation_sample(name,age,color){

this.name= name;

this.age= age;

this.color= color;

}

Animation_sample.prototype= {

secondName:"milk",

sayColor:function(){

console.log(this.color)

}

};

varsampleAnim1 =newAnimation_sample("follower",32,"green");

console.log(sampleAnim1.secondName);

varsampleAnim2 =newAnimation_sample("dest",32,"green");

console.log(sampleAnim2.secondName);

console.log(sampleAnim2.constructor);// function Object() { [native code] }

//我们发现 constructor 这个构造函数变成了 function Object() { [native code]

//    而我们在这里使用的语法，本质上完全重写了默认的 prototype 对象，

// 因此 constructor 属性也就变成了新对象的 constructor 属性 （指向 Object 构造函数） ，

// 不再指向 Person 函数。

//解决办法很简单，手动指定

functionAnimation_fixbug(name,age,color){

this.name= name;

this.age= age;

this.color= color;

}

Animation_fixbug.prototype= {

//添加下面这句话

constructor:Animation_fixbug,

secondName:"fishers",

sayColor:function(){

console.log(this.color)

}

};

varsampleAnimfix1 =newAnimation_fixbug("fish",32,"green");

console.log(sampleAnimfix1.secondName);

varsampleAnimfix2 =newAnimation_fixbug("fishbird",32,"green");

console.log(sampleAnimfix2.secondName);

console.log(sampleAnimfix2.constructor);// function Object() { [native code]

作者：二月长河
链接：https://www.jianshu.com/p/749841c9cda5