原型链&继承

// es5实现继承
/*
  介绍: 所有 Animal 都要吃东西，Animal类有一个公用的eat方法 和 name属性
  Rabbit 类继承自 Animal，它有公用的 jump 方法。

*/
function Animal(name) {
  this.name = name;
}

Animal.prototype.eat = function() {
  console.log('I love eat dinner!');
}

const a = new Animal('aaa');
// console.dir(a);

function Rabbit(name) {
  Animal.call(this, name); // oops！
}

const f = function () { }
f.prototype = Animal.prototype;
Rabbit.prototype = new f(); // oops！



Rabbit.prototype.jump = function() { // 注意要写在上面oops的下面
  console.log('I can jump high!');
}

const r = new Rabbit('rabbit');
console.dir(r)

// es6实现继承
class Animal { // 注意不是 Animal()
  constructor(name) { // constructor必须要
    this.name = name;
  }
  eat() {
    console.log('eat');
  }
}

class Rabbit extends Animal { // 注意不是 Rabbit()
  constructor(name) {
    super(name); // super必须要
  }
  jump () {
    console.log(jump);
  }
}

const r = new Rabbit('xiaobai');
console.log(r);

输入如下：

es5继承写法

总结:

1. 所有的对象都有 proto 属性

原型链

内存中的所有对象在内存中以的数据结构存储(右上角蓝色部分)，
1，2，3指的是'Leon', 'Jack', 'Tom', 上层是Man男人，Woman女人，再上层是人类，Human，最顶层是Object，共有属性。

// es6写法
class Human {
    constructor(name, age){
        this.name = name;
        this.age = age;
    }
    run() {
        console.log('I like running!');
    }
}

class Man extends Human {
    constructor(name, age, like){
        super(name, age);
        this.like = like;
    }
    fight() {
        console.log('All man like fight');
    }
}

const man = new Man('leon', 18, 'play games');
console.dir(man);
man.run();
man.fight();

es6继承写法

var o = {}
console.log(o._proto_ === Object.prototype); // 为 true

var fn = function(){}
console.log(fn._proto_ === Function.prototype); // 为 true
console.log(fn._proto_._proto_ === Object.prototype); // 为 true

var array = []
console.log(array._proto_ === Array.prototype); // 为 true
console.log(array._proto_._proto_ === Object.prototype); // 为 true

console.log(Function._proto_ === Function.prototype); // 为 true oops!
console.log(Array._proto_ === Function.prototype); // 为 true oops!
console.log(Object._proto_ === Function.prototype); // 为 true oops!

true._proto_ === Boolean.prototype; // 为 true

console.log(Function.prototype._proto_ === Object.prototype); // 为 true