JS 原型 & 继承

理解原型链

先看看http://www.ituring.com.cn/article/56184和http://www.cavabiao.com/prototype-and-inherit-of-javascript/

首先需要知道new的时候都发生了什么
总的来说就是new得到的对象的_proto_指向F的prototype
比如 new F(); 下面是turing社区的讲解
new 运算符接受一个类(函数)F 及其参数new F(arguments...)
这一过程分为三步：
创建类的实例。这步是把一个空的对象的 _proto_ 属性设置为 F.prototype 。
初始化实例。函数 F 被传入参数并调用，关键字 this 被设定为该实例。
返回实例。

function New(f) {
  var n = {
    '__proto__': f.prototype
  }; /*第一步*/
  return function() {
    f.apply(n, arguments); /*第二步*/
    return n; /*第三步*/
  };
}

原型式继承

下面是最简单的使用原型的例子

function Point(x, y) {
  this.x = x;
  this.y = y;
}
Point.prototype = {
  print: function() {
    console.log(this.x, this.y);
  }
};
 
var p = new Point(10, 20);
p.print(); // 10 20

原型继承 简单来说就是修改该类(function)的prototype属性值 指向另一个对象

不过我们可以定义一个通用的方式来完成继承 这是 Douglas Crockford 提出的一种方案
定义如下函数

function object(o) {
  function F() {};
  F.prototype = o;
  return new F();
}

实际上这个函数就是ECMA5中定义的Object.create函

一个使用原型方式继承的例子

function object(o) {
  function F() {};
  F.prototype = o;
  return new F();
}
 
var person = {
  name: 'nico',
  friends: ['aaa', 'bbb', 'ccc']
}
 
var anotherPerson = object(person);
var yetAntherPerson = object(person);
anotherPerson.name = 'greg';
 
console.log(anotherPerson.name); //gerg//因为上一句为antherPerson增加一个name属性并赋值//原型name还是nico
console.log(yetAntherPerson.name); //nico
 
anotherPerson.friends.push('ddd'); //因为我这里是对friends做修改 所以不会为anotherPerson创建新的属性
// 查找anotherPerson下的friends属性 在其原型中找到了 所以这里的修改是原型中friends
 
console.log(anotherPerson.friends); //["aaa", "bbb", "ccc", "ddd"]
console.log(yetAntherPerson.friends); //["aaa", "bbb", "ccc", "ddd"]
 
anotherPerson.friends = ['ano1', 'ano2']; //虽然也是friends 但是这个friends后面紧接着是一个赋值符号 //所以这里是为anotherPerson创建一个新的属性
console.log(anotherPerson.friends); //["ano1","ano2"]
console.log(yetAntherPerson); //["aaa", "bbb", "ccc", "ddd"]

关于 实例 类 原型的关系 看这个图http://www.ituring.com.cn/download/01Yi3zzVQhOo
cf1 cf2... 都是CF类的实例 cf1 cf2...都拥有一个_proto_ 属性 指向其类的原型 所以cf1改的是原型的属性 其他的实例cf2 cf3去引用原型的变量话肯定是cf1修改过后

这样感觉很不好 对不对 我希望我继承的对象的属性都是独立的 不会因为其它对象的改变而变化

下面就得说组合式继承
组合式继承使用原型链的方式对原型的属性和方法做继承 通过借用构造函数的方式实现实例属性的继承

nction SuperType(name) {
    this.name = name;
    this.colors = ['red'];
}
 
SuperType.prototype = {
    constructor: SuperType, // 我这里是对整个prototype做重写  所以千万不要忘了constructor属性
    sayName: function() {
        console.log(this.name);
    }
}
// 上面可以简写为  //这样就不用手动指定constuctor的值
SuperType.prototype.sayName = function() {
    console.log(this.name);
}
 
function SubType(name, age) {
    SuperType.call(this, name); //继承属性//调用了SuberType这个构造函数 //相当于这里写上了this.name=name;this.colors=xxx
    this.age = age;
}
 
SubType.prototype = new SuperType(); //注意不要写为SubType.prototype=SuperType.prototype 这样的话constructor指向就不对了
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function() { //为原型添加函数  这样一来原型就有sayName sayAge两个方法了
    console.log(age);
}
 
console.log(SuperType.prototype);
console.log(SubType.prototype);
var superIns = new SuperType('super');
var subIns = new SubType('sub', 23);
console.log(superIns);
console.log(subIns);