js原型链继承

2017-03-08  本文已影响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;
}
}




上一篇下一篇

猜你喜欢

热点阅读