2022-09-25JavaScript00
请注意,本文编写于 573 天前,最后修改于 573 天前,其中某些信息可能已经过时。
function Shape() {}

function Rect() {}

// 方法1
Rect.prototype = new Shape();

// 方法2
Rect.prototype = Shape.prototype;

// 方法3
Rect.prototype = Object.create(Shape.prototype);

Rect.prototype.area = function () {
  // do something
};

方法 1:

  1. 优点:正确设置原型链实现继承
  2. 优点:父类实例属性得到继承,原型链查找效率提高,也能为一些属性提供合理的默认值
  3. 缺点:父类实例属性为引用类型时,不恰当地修改会导致所有子类被修改
  4. 缺点:创建父类实例作为子类原型时,可能无法确定构造函数需要的合理参数,这样提供的参数继承给子类没有实际意义,当子类需要这些参数时应该在构造函数中进行初始化和设置
  5. 总结:继承应该是继承方法而不是属性,为子类设置父类实例属性应该是通过在子类构造函数中调用父类构造函数进行初始化

方法 2:

  1. 优点:正确设置原型链实现继承
  2. 缺点:父类构造函数原型与子类相同。修改子类原型添加方法会修改父类

方法 3:

  1. 优点:正确设置原型链且避免方法 1.2 中的缺点
  2. 缺点:ES5 方法需要注意兼容性

改进:

  1. 所有三种方法应该在子类构造函数中调用父类构造函数实现实例属性初始化
function Rect() {
    Shape.call(this);
}
  1. 用新创建的对象替代子类默认原型,设置Rect.prototype.constructor = Rect;保证一致性
  2. 第三种方法的 polyfill
function create(obj) {
    if (Object.create) {
        return Object.create(obj);
    }

    function f() {};
    f.prototype = obj;
    return new f();
}

本文作者:前端小毛

本文链接:

版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!