JavaScript复习笔记 （五）原型

当我们用obj.xxx访问一个对象的属性时，JavaScript引擎先在当前对象上查找该属性，
如果没有找到，就到其原型对象上找，
如果还没有找到，就一直上溯到Object.prototype对象，
最后，如果还没有找到，就只能返回undefined。

例如：创建一个Array对象，其原型链是：

arr ----> Array.prototype ----> Object.prototype ----> null

• 使用 isPrototypeOf 验证原型关系

//:构造函数Bird的原型是实例duck的原型
Bird.prototype.isPrototypeOf(duck);//true
Object.prototype.isPrototypeOf(Dog.prototype);//true

所有的引用类型都有一个隐式原型属性（proto）；
所有的函数，都有一个显示原型属性（prototype）；

原型链图：（ 原型&原型链详细 https://segmentfault.com/a/1190000021232132 ）

一、构造函数创建对象

function Student(name) {
    this.name = name;
    this.hello = function () {
        alert('Hello, ' + this.name + '!');
    }
}

1️⃣ 创建实例对象：

1. new （创建构造函数）
   let animal = new Animal(); // 用于继承时会存在一些缺点
2. Object.create()
   // 1）实例继承
   let animal = Object.create(Animal.prototype);
   // 2）构造函数继承
   function Bird() { }
Bird.prototype = Object.create(Animal.prototype);
   继承prototype 时，也继承了父类的 constructor 属性。为此，需要手动设置构造函数属性
   Bird.prototype.constructor = Bird;
   添加方法:
   Bird.prototype.func = function() {...};

关于第一种方式：
如果不写new，就是普通函数，返回undefined。
如果写了new，就变成构造函数，绑定的this指向新创建的对象，并默认返回this

为了区分普通函数和构造函数，按照约定，构造函数首字母应当大写，而普通函数首字母应当小写，这样，一些语法检查工具如jslint将可以帮你检测到漏写的new

2️⃣ 用new Student()创建的对象从原型上获得constructor属性，指向函数Student本身

xiaoming.constructor === Student.prototype.constructor === Student; // true

Object.getPrototypeOf(xiaoming) === Student.prototype; // true

//验证继承关系
xiaoming instanceof Student; // true

Student有个属性 prototype 指向xiaoming的原型对象，但是xiaoming这些对象没有prototype属性，不过可以用__proto__这个非标准用法查看

3️⃣ 让创建的对象共享一个hello函数，要将函数移动到原型上

function Student(name) {
    this.name = name;
}
Student.prototype.hello = function () {
    alert('Hello, ' + this.name + '!');
};

变更为=>

• 使用 Mixin 在不相关对象之间添加共同函数
  （ mixin 允许其他对象使用函数集合）

let flyMixin = function(obj) {
  obj.fly = function() {
    console.log("Flying, wooosh!");
  }
};
flyMixin(bird);
flyMixin(plane);
bird.fly();  // 现在 对象bird和对象plane 都有fly函数了
plane.fly();

4️⃣ 用 instanceof 验证对象的构造函数
instanceof 允许将对象与构造函数之间进行比较，根据对象是否由这个构造函数创建的返回 true 或者 false

let Bird = function(name, color) {
  this.name = name;
  this.color = color;
  this.numLegs = 2;
}
let crow = new Bird("Alexis", "black");

crow instanceof Bird; //true

二、更改原型

手动设置一个新对象的原型有一个重要的副作用。 它清除了 constructor 属性。
所以，需要在原型对象中定义一个 constructor 属性

Bird.prototype = {
  constructor: Bird,
  numLegs: 2,
  describe: function() {
    console.log("My name is " + this.name); 
  }
};

三、原型继承

步骤：

1. 定义新的构造函数，并在内部用call()调用希望“继承”的构造函数，并绑定this；
2. 借助中间函数F实现原型链继承，最好通过封装的inherits函数完成；
3. 继续在新的构造函数的原型上定义新方法。

封装继承机制函数：

function inherits(Child, Parent) {
    var F = function () {};
    F.prototype = Parent.prototype;
    Child.prototype = new F();
    Child.prototype.constructor = Child;
}

复用：

function Student(props) {
    this.name = props.name || 'Unnamed';
}

Student.prototype.hello = function () {
    alert('Hello, ' + this.name + '!');
}

function PrimaryStudent(props) {
    Student.call(this, props);
    this.grade = props.grade || 1;
}

// 实现原型继承链:
inherits(PrimaryStudent, Student);

// 绑定其他方法到PrimaryStudent原型:
PrimaryStudent.prototype.getGrade = function () {
    return this.grade;
};

四、class继承 （ES6新增）

1️⃣ 定义
包含了构造函数constructor和定义在原型对象上的函数hello()（没有function关键字），
这样就避免了Student.prototype.hello = function () {...}这样分散的代码。

class Student {
    constructor(name) {
        this.name = name;
    }
    hello() {
        alert('Hello, ' + this.name + '!');
    }
}
//使用
var xiaoming = new Student('小明');
xiaoming.hello();

2️⃣ 实现继承
原型继承的中间对象，原型对象的构造函数等等都不需要考虑了，直接通过extends来实现

class PrimaryStudent extends Student {
    constructor(name, grade) {
        super(name); // 记得用super调用父类的构造方法!
        this.grade = grade;
    }
    myGrade() {
        alert('I am at grade ' + this.grade);
    }
}

1. 子类的构造函数可能会多参数，相同参数通过super(name)来调用父类的构造函数，否则父类的name属性无法正常初始化。
2. 子类已经自动获得了父类的hello方法，又定义了新的myGrade方法。

3️⃣ 关于

ES6引入的class和原有的JavaScript原型继承有什么区别呢？
实际上没有任何区别，class的作用就是让JavaScript引擎去实现原来需要我们自己编写的原型链代码。简而言之，用class的好处就是极大地简化了原型链代码。

class这么好用，能不能现在就用上？
不是所有的主流浏览器都支持ES6的class。如果一定要现在就用上，就需要一个工具把class代码转换为传统的prototype代码，可以试试Babel这个工具。