美文网首页
js原型链继承

js原型链继承

作者: 晗笑书生 | 来源:发表于2017-03-08 17:48 被阅读50次

    很久没来研究下js原型链了 有时被面的真的有些懵逼了
    今天自己写个demo来看看 到底是怎么回事

    // 定义个对象A 属性a
    function A(a){
        this.a = a;
    }
    
    // 定义一个对象B 属性b 继承A
    function B(a,b){
        A.call(this, a);
        this.b = b;
    }
    
    // 定义一个空的function  拓展原型链上的一环
    function F(){};
    
    // F的原型 指向A
     F.prototype = A.prototype;
    // B的原型 指向F的示例
     B.prototype = new F();
    // 修复B的构造函数为B
     B.prototype.constructor = B;
    
    var a = new A("a1");// 创建对象a
    var b = new B("a2","b2"); //创建对象b
    
    
     console.log(a instanceof A); // true
     console.log(b instanceof B); // true
     console.log(b instanceof A); //true
    

    js中 一切都是对象 都是来自于原型链的上的继承 都是来自于Object的原型
    js 默认的内置对象 Object Function Array Date 等
    基本数据类型 Number String undefined null Boolean等

    多个对象的实例的来自于原型的对象

    var a1 = new A('A1');
    var a2 = new A('A2');
    
    a1.__proto__ === a2.__proto__ // true
    a1.__proto__ === A.prototype // true
    // 对象实例的原型__proto__ 指向原型对象 A.prototype
    // js中 prototype 是方法特有的原型对象 指向的是一个对象 这个对象即使原型链上的对象 可以想象成超链接一样
    

    技巧:
    定义个空的function 拓展原型链的节点 通过修改节点的原型对象的执行 来模拟强类型语言的继承
    代码如下

    // Child 继承Parent
    function F() {}
     F.prototype = Parent.prototype;
    Child.protype = new F();
    Child.prototype.constructor = Child;
    

    另外 附加一句ES6/ES7才是大潮流
    ES5手动修改原型链的方式 确实有些恶心
    附上es6代码 可以使用babel转化

     class A{
      constructor (a){
        this.a = a;
      }
    }
    
    class B extends A{
      constructor(a,b){
      super(a);
      this.b = b;
    }
    }
    
    
    
    
    

    相关文章

      网友评论

          本文标题:js原型链继承

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