javascript继承的演变

来源:互联网 发布:淘宝开源平台 编辑:程序博客网 时间:2024/05/17 06:23

分享请标明来自: https://www.css3.io/javascript-extend-history.html

1.最简单原型继承

function Super () {    this.name = 'name';    this.colors = ['red', 'black']}Super.prototype.getName = function () {    return this.name;}function Sub () {}Sub.prototype = new Super();

缺点:

  1. 不能向Super传递参数。
  2. 引用类型属性被实例共享。

2.借用构造函数(伪造对象、经典继承)

function Super () {    this.name = 'name';    this.getAge = function () {        retrun 18;    }}Super.prototype.getName = function () {    return this.name;}function Sub () {    Super.call(this);}

缺点:

  1. 要求所有类的方法必须在构造函数中定义,如同Super中的getAge方法。
  2. 函数被重复创建。
  3. Sub也不能调用Super原型里的方法.

3.组合继承

function Super () {    this.name = 'name';    this.colors = ['red', 'black'];}Super.prototype.getName = function () {    return this.name;}function Sub () {    Super.call(this);}Sub.prototype = new Super();

优点: 解决了属性为引用类型时实例是共享的问题(原型中的引用被实例中的引用值覆盖),子类也能用使用原型中的方法。比较常用。

缺点:

  1. Super被调用重复调用2次

4.原型式继承(道格拉斯)

function object (o) {    function F () {}    F.prototype = o;    return new F();}var person = {    name: 'name',    friends: ['A', 'B']}var person1 = object(person);person1.name = 'name1';person1.frends.push('C');var person2 = object(person);person2.name = 'name2';person2.frends.push('D');// A B C Dconsole.log(person.frends);

适用场景:不必兴师动众创建构造函数,只是想让一个对象与另一个对象保持类似的情况下。

说明: 在ECMAScript5得到规范 Object.create()

缺点:

  1. 依然存在引用类型属性共享问题。

5. 寄生式继承

function object (o) {    function F () {}    F.prototype = o;    return new F();}function createAnother (original) {    var clone = object(original);    clone.sayHi = function () {        alert("hi");    }    return clone;}var person = {    name: "Nicholas",    friends: ["Shelby", "Court", "Van"]}var person1 = createAnother(person);person1.friends.push('person1');person1.sayHi();var person2 = createAnother(person);// "Shelby", "Court", "Van", "person1"console.log(person2.friends);

缺点:函数sayHi()依然被重复创建,引用类型属性依然存在共享问题。

6. 寄生组合式继承

function object (o) {    function F () {}    F.prototype = o;    return new F();}function inheritPrototype (Sub, Super) {    var proto = object(Super.prototype);    proto.constructor = Sub;    Sub.prototype = proto;}function Super () {}function Sub () {    Super.call(this);}inheritPrototype(Sub, Super);

说明:解决了引用属性共享问题,是最理想的继承范式。

0 0