三、组合原型模型和构造函数模型创建对象
3.1、原型模型创建对象的缺陷
原型中的所有属性都是共享的。
也就是说,用同一个构造函数创建的对象去访问原型中的属性的时候,
大家访问的都是同一个对象,
如果一个对象对原型的属性进行了修改,则会反应到所有的对象上面
但是在实际使用中,每个对象的属性一般是不同的。
张三的姓名是张三,李四的姓名是李四
但是,这个共享特性对方法(属性值是函数的属性)又是非常合适的
所有的对象共享方法是最佳状态。
3.2、构造函数模型创建对象的缺陷
在构造函数中添加的属性和方法,每个对象都有自己独有的一份,大家不会共享。
这个特性对属性比较合适,但是对方法又不太合适。
因为对所有对象来说,他们的方法应该是一份就够了,没有必要每人一份,
造成内存的浪费和性能的低下
funciton Person(){
this.name = '李四'
this.age = 26
this.eat = function(){
console.log('吃完东西')
}
}
var p1 = new Person()
var p2 = new Person()
//每个对象都有不同的方法
console.log(p1.eat === p2.eat) //false
可是使用下面的方法解决
function Person() {
this.name = '李四'
this.age = 26
this.eat = eat;
}
function eat() {
console.log('吃完东西')
}
var p1 = new Person()
var p2 = new Person()
//因为eat属性都是赋值的同一个函数,所以是true
console.log(p1.eat === p2.eat)
但是上面的这种解决方法具有致命的缺陷:封装性太差。
3.3、使用组合模式解决上述两种缺陷
原型模型适合封装方法,
构造函数模式适合封装属性
综合两种模式的有点就有了组合模式
function Person(name, age){
this.name = name
this.age = age
}
Person.prototype.eat = function(food){
console.log(this.name + '爱吃' + food)
}
Person.prototype.play = function(playname){
console.log(this.name + '爱玩' + playname)
}
var p1 = new Person('李四', 20)
var p2 = new Person('张三', 30)
p1.eat('苹果')
p2.eat('香蕉')
p1.play('电脑')
p2.play('手机')
四、动态原型模式创建对象
前面讲到的组合模式,也并非完美无缺,有一点也是感觉不是很完美。
把构造方法和原型分开写,总让人感觉不舒服,
应该想办法把构造方法和原型封装在一起,所以就有了动态原型模式
动态原型模式把所有的属性和方法都封装在构造方法中,
而仅仅在需要的时候才去在构造方法中初始化原型,
又保持了同时使用构造函数和原型的有点
代码
function Person(name, age){
this.name = name
this.age = age
/*
判断this.eat这个属性是不是function,
如果不是function则证明是第一次创建对象,
则把这个function添加到原型中
如果是function,则代表原型中已经有了这个方法,则不需要再添加
perfect! 完美解决了性能和代码的封装问题
*/
if(typeof this.eat !== 'function'){
Person.prototype.eat = function() {
console.log(this)
console.log(this.name + '在吃')
}
}
}
var p1 = new Person('linzx', 20)
var p2 = new Person('linzx2', 19)
p1.eat()
p2.eat()
console.log(p1.eat === p2.eat) //true
说明
-
组合模式和动态原型模式是JavaScript中使用比较多的两种创建对象的方式
-
建议以后使用动态原型模式,他解决了组合模式的封装不彻底的缺点