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;
}
}