JavaScript学习-面向对象与原型4

来源:互联网 发布:淘宝拍卖房产靠谱吗 编辑:程序博客网 时间:2024/06/04 18:11

原型模式创建对象的缺点

1、省略了构造函数传参
导致的结果就是对象初始化的值都是一样的。
2、原型的最大优点,也是其最大缺点,即共享。
特别是对于引用类型,比如一个数组,如果你通过一个实例修改了数组中的数据,那么由此原型创建的所有对象访问的都是修改后的数组数据,因为原型的数据是共享的。

function Box(){}Box.prototype = {    constructor :Box,    name:'Lee',// 原型属性    age:100,    family:['哥哥','姐姐','妹妹'],    run :function(){        return this.name + this.age +'运行中...';    }}var box1 = new Box();document.write(box1.family);box1.family.push('弟弟');document.write("<br/>")document.write(box1.family);var box2 = new Box();document.write("<br/>")document.write(box2.family);

输出:

哥哥,姐姐,妹妹哥哥,姐姐,妹妹,弟弟哥哥,姐姐,妹妹,弟弟

组合构造函数+原型模式

为了解决原型模式的缺点,我们可以采用组合构造函数+原型模式。也就是说不需要共享的部分使用构造函数,需要共享的部分使用原型。

function Box(name,age){    this.name = name;    this.age = age;    this.family = ['哥哥','姐姐','妹妹'];}Box.prototype = {    constructor :Box,    run :function(){        return this.name + this.age +'运行中...';    }}

动态原型模式

组合构造函数+原型模式解决了原型模式的两个缺点,但还是有一些问题:
1、构造函数和原型分别来书写。我们更希望能封装起来。
2、原型模式中,不管你是否调用了原型中的共享方法,它都会初始化原型中的方法。

// 动态原型模式function Box(name,age){    this.name = name;    this.age = age;    this.family = ['哥哥','姐姐','妹妹'];    if(typeof this.run != 'function'){// 仅在第一次调用时初始化        Box.prototype.run = function(){            return this.name + this.age +'运行中...';        }    }}// 测试代码var box1 = new Box('Lee',100);var box2 = new Box('Jack',200);document.write(box1.run());document.write("<br/>")document.write(box2.run());

输出:

Lee100运行中...Jack200运行中...

寄生构造函数

// 寄生构造函数function Box(name,age){    var obj = new Object();    obj.name = name;    obj.age = age;    obj.run = function(){        return this.name + this.age +'运行中...';    }    return obj;}// 测试代码var box1 = new Box('Lee',100);var box2 = new Box('Jack',200);document.write(box1.run());document.write("<br/>")document.write(box2.run());

寄生构造函数模式其实就是工厂模式+构造函数,这种模式比较通用,但不能确定对象关系,所以在可以使用之前所说的模式时,不建议使用。

稳妥构造函数

在一些安全的环境中,比如禁止使用this和new,这里的this是构造函数里不使用this,这里的new是外部实例化的时候不实用new。这种方式叫做稳妥构造函数。

// 稳妥构造函数function Box(name,age){    var obj = new Object();    obj.run = function(){        return name + age +'运行中...';// 直接使用参数    }    return obj;}// 测试代码var box1 = Box('Lee',100);var box2 = Box('Jack',200);document.write(box1.run());document.write("<br/>")document.write(box2.run());
原创粉丝点击