JavaScript常见的设计模式

238 阅读2分钟

工厂模式,构造函数模式,原型模式。混合模式,动态原型模式

工厂模式

**在函数中定义对象,并定义对象的各种属性。**

建议将属性为方法的属性定义到函数外,这样可以避免重复创建该方法。

**工厂模式没有用this 而是用构造变量名,并且要return构造对象。**
例子
var lev=function(){ 
return "啊打"; 
}; 
function Parent(){ 
var Child = new Object(); 
Child.name="李小龙"; 
Child.age="30"; 
Child.lev=lev; 
return Child; 
}; 
var x = Parent(); 
alert(x.name); 
alert(x.lev());

工厂模式虽然解决了创建多个相似对象的问题,但是没有解决对象识别问题

构造函数模式

相比于工厂模式,使用构造函数方式创建对象,无需再函数内部重建创建对象,而使用this指代,并且函数无需明确的return

var lev=function(){ 
return "啊打"; 
}; 
function Parent(){ 
this.name="李小龙"; 
this.age="30"; 
this.lev=lev; 
}; 
var x =new Parent(); 
alert(x.name); 
alert(x.lev());

构造函数模式与工厂模式的区别:

1、没有显式的创建对象

2、直接将属性和方法赋给了this对象

3、没有return 语句

原型模式

函数中不对属性进行定义,而是利用prototype属性对属性进行定义

var lev=function(){ 
return "啊打"; 
}; 
function Parent(){ }; 
Parent.prototype.name="李小龙"; 
Parent.prototype.age="30"; 
Parent.prototype.lev=lev; 
var x =new Parent(); 
alert(x.name); 
alert(x.lev());

原型模式的问题:

它省略了为构造函数传递参数初始化参数的环节,结果所有的实例在默认情况下都将取得相同的属性值

构造函数+原型的js混合的模式(推荐使用)

**将属性不是方法的属性定义在和函数中,**
**将所有属性值为方法的属性利用prototype在定义函数之外**
function Parent(){ 
this.name="李小龙"; 
this.age=32; 
};
Parent.prototype.lev=function(){ 
return this.name; 
};
var x =new Parent();
alert(x.lev());

function Person(name, age){
  this.name = name;
  this.age = age;
  this.friends = ['aaa', 'bbb']
}
Person.prototype = {
  constructor: Person,
  sayName: function(){
    console.log(this.name)
  }
}
var person1 = new Person('ccc', 18)
var person2 = new Person('www', 18)
person1.friends.push('ddd')

console.log(person1.friends)      // --> ["aaa", "bbb", "ddd"]
console.log(person2.friends)      // --> ["aaa", "bbb"]
console.log(person1.friends === person2.friends)      // --> false
console.log(person1.sayName === person2.sayName)      // --> true

构造函数+原型的动态原型模式

**动态原型模式就是可以通过检查某个应该存在的方法是否有效,来决定是否需要初始化原型。**
**是混合模式的特例。**

其他模式

**寄生构造函数模式和稳妥构造函数模式( 不常用)**
**观察者模式单例模式 **

总结:

最好的模式就是混合模式和动态原型模式。

属性在函数里面,方法在函数外面,目的是为了不让方法重复创建。影响性能。