美文网首页
JavaScript 继承(四)原型式继承

JavaScript 继承(四)原型式继承

作者: BertFu | 来源:发表于2016-11-14 07:38 被阅读0次

借助原型可以基于已有的对象创建新对象,同时还不必因此创建自定义类型。

function object(o) {
    function F(){}
    F.prototype = o;
    return new F();
}

在 object() 函数内部,先创建了一个临时性的构造函数,然后将传入的对象作为这个构造函数的原型,最后返回了这个这个临时类型的一个新实例。

var person = {
    name: "Bert",
    friends: ["Shelby", "Court", "Van"]
};

var anotherPerson = object(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");

var yetAnotherPerson = object(person);
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("Barbie");

alert(person.friends); // Shelby,Court,Van,Rob,Barbie
alert(anotherPerson.friends); // Shelby,Court,Van,Rob,Barbie
alert(yetAnotherPerson.friends); // Shelby,Court,Van,Rob,Barbie

这种继承要求你必须有一个对象可以作为另一个对象的基础。如果有这么一个对象的话,可以把它传递给 object() 函数,然后在根据具体需求对得到德尔对象甲乙修改即可。

上例中的 person.friends 不仅属于 person 所有,而且也会被 anotherPerson 以及 yetAnotherPerson 共享。

ECMAScript 5 通过新增 Object.create() 方法规范化了原型式继承。这个方法接受两个参数:一个作用新对象原型的对象和一个为新对象定义额外属性的对象。

Object.assign() 方法就是基于 Object.create() 来实现的?所以可怜的 IE8上兼容不了... 所以在IE8上我们需要自定义一个类似的方法?


var person = {
    name: "Bert",
    friends: ["Shelby", "Court", "Van"]
};

var anotherPerson = Object.create(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");

var yetAnotherPerson = Object.create(person);
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("Barbie");

alert(person.friends); // Shelby,Court,Van,Rob,Barbie
alert(anotherPerson.friends); // Shelby,Court,Van,Rob,Barbie
alert(yetAnotherPerson.friends); // Shelby,Court,Van,Rob,Barbie

Object.create() 方法的第二个参数与 Object.defineProperties() 方法的第二个参数格式相同;每个属性都是通过自己的描述符定义的。以这种方式指定的任何属性都会覆盖原型对象上的同名属性。

var person = {
    name: "Bert",
    friends: ["Shelby", "Court", "Van"]
};

var anotherPerson = Object.create(person, {
    name: {
        value: "Greg"
    }
});

alert(anotherPerson.name); // "Greg"

支持 Object.create() 方法的浏览器有 IE9+、Firefox4+、Safari5+Opera 12+和Chrome。

想让一个对象与另一对象保存类似的情况下,原型式继承是完全可以胜任的。不过,包含引用类型值的属性始终都会共享相应的值,就像使用原型式一样。

所以使用 Redux 推荐在 Reducer 中使用 Object.assign() 方法来重新创建 State,并且可以支持回退的原因就是原型继承,可以从原型链上追溯到上一个或者多个State的值,做到回退功能?

一直想说 Redux 的回退好牛逼,看不懂,这样一看也是可以实现的哟。

相关文章

  • JavaScript 继承(四)原型式继承

    借助原型可以基于已有的对象创建新对象,同时还不必因此创建自定义类型。 在 object() 函数内部,先创建了一个...

  • 【重学前端】JavaScript中的继承

    JavaScript中继承主要分为六种:类式继承(原型链继承)、构造函数继承、组合继承、原型式继承、寄生式继承、寄...

  • javascript继承之原型式继承(四)

    借助原型可以基于已有的对象创建新的对象,同时还不必因此创建自定义类型 创建一个对象 通过object方法原型式继承...

  • javaScript 实现继承方式

    JavaScript实现继承共6种方式:原型链继承、借用构造函数继承、组合继承、原型式继承、寄生式继承、寄生组合式继承。

  • Javascript 继承

    参考:JavaScript高级程序设计(第3版) 原型链 原型式继承 寄生式继承 寄生组合式继承

  • JavaScript 继承 4 原型式继承

    输出结果: 在没有必要兴师动众地创建构造函数,而只想让一个对象与另一个对象保持类似的情况下,原型式继承是完全可以胜任的。

  • 关于继承

    继承的实现方法 属性拷贝 浅拷贝 深拷贝 原型继承 原型式继承 原型链继承 组合继承(深拷贝+优化后的原型式继承)...

  • JavaScript 面向对象编程

    对象的创建 继承 原型式继承: 原型式继承,其本质是执行对给定对象的浅复制。原型链:{currentObject}...

  • 二、js继承的几种方式及优缺点

    1、继承:原型链、借用构造函数、组合继承、原型式继承、寄生式继承、寄生组合继承

  • js继承方式

    类式继承 构造函数继承 组合继承 类式继承 + 构造函数继承 原型式继承 寄生式继承 寄生组合式继承 寄生式继承 ...

网友评论

      本文标题:JavaScript 继承(四)原型式继承

      本文链接:https://www.haomeiwen.com/subject/uxchpttx.html