zoukankan      html  css  js  c++  java
  • 关于 JavaScript 中的继承

    ES5 之前,继续是这样实现的

    function Parent() {
      this.foo = function() {
        console.log('foo');
      };
    }
    Parent.prototype.bar = function() {
      console.log('bar');
    }
    function Child() {
    }
    Child.prototype = p = new Parent();
    Child.prototype.constructor = Child;
    var c = new Child();
    c instanceof Parent; // true
    c instanceof Child; // true
    c.__proto__ === p;  // true
    c.__proto__.__proto__ === Parent.prototype;  // true
    c.__proto__.__proto__.__proto__ === Object.prototype;  // true
    c.__proto__.__proto__.__proto__.__proto__ === null;  // true
    c.foo(); // foo
    c.bar(); // bar

    这种方式有个缺点,需要首先实例化父类。这表示,子类需要知道父类该如何初始化。

    理想情况下,子类不关心父类的初始化细节,它只需要一个带有父类原型的对象用来继承即可。

    Child.prototype = anObjectWithParentPrototypeOnThePrototypeChain;

    但是 js 中没有提供直接获取对象原型的能力,决定了我们不能像下面这样操作:

    Child.prototype = (function () { 
      var o = {}; 
      o.__proto__ = Parent.prototype; 
      return o; 
    }());

    注意:__prototype__ 不等于 prototype,前者是通过 new 后者创建的,所以后者是存在于构造器上的,前者属性实例上的属性。方法及属性在原型链上进行查找时使用的便是 __prototype__,因为实例才有 __prototype

    instance.__proto__ === constructor.prototype // true

    所以,改进的方式是使用一个中间对象。

    // Parent defined as before.
    function Child() {
      Parent.call(this); // Not always required.
    }
    var TempCtor, tempO;
    TempCtor = function() {};
    TempCtor.prototype = Parent.prototype;
    Child.prototype = tempO = new TempCtor();
    Child.prototype.constructor = Child;
    var c = new Child();
    c instanceof Parent; // true - Parent.prototype is on the p.-chain
    c instanceof Child; // true
    c.__proto__ === tempO;  // true
    // ...and so on, as before

    借助这个中间对象绕开了对父类的依赖。为了减少如上的重复轮子,ES5 中加入 Object.create 方法,作用与上面等效。

    // Parent defined as before.
    function Child() {
      Parent.call(this); // Not always required.
    }
    Child.prototype = o = Object.create(Parent.prototype);
    Child.prototype.constructor = Child;
    var c = new Child();
    c instanceof Parent; // true - Parent.prototype is on the p.-chain
    c instanceof Child; // true
    c.__proto__ === o;  // true
    // ...and so on, as before

    参考

  • 相关阅读:
    Java(八)——面向对象(4)-抽象类与接口
    Java(七)——面向对象(3)-多态
    Java(六)——面向对象(2)-继承
    Java(五)——面向对象(1)-基础
    Java(四)——数组
    Java(三)——流程控制
    Java(二)——Java基础
    易忘小技巧--yum
    网络测速命令--speedtest
    大型网站架构技术读后感
  • 原文地址:https://www.cnblogs.com/Wayou/p/inherent_in_js.html
Copyright © 2011-2022 走看看