JavaScript原型对象3-根据原型创建对象的最佳方式

146 阅读3分钟

三、组合原型模型和构造函数模型创建对象

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中使用比较多的两种创建对象的方式

  • 建议以后使用动态原型模式,他解决了组合模式的封装不彻底的缺点