原型链与继承的实现

原型

• 普通对象有隐式原型__proto__,默认指向空对象，但可更改。当访问自身不存在的属性时，会从__proto__指向的对象中获取。
• 函数有显式原型prototype，函数的这个原型指向一个对象，这个对象叫原型对象。这个原型对象有一个constructor属性，指向这个函数本身；另外一个为它的隐式原型__proto__默认指向object.prototype.

如果对象无法响应某个请求，就会委托给他的构造器原型，虽然对象最初都是有Object.prototype对象克隆而来的，但对象构造器的原型并不仅限于Object.prototype,而是可以动态指向其他对像

var A = function(){};
A.prototype = { name: 'alone' };
var B = function(){};
B.prototype = new A();
var b = new B();
console.log(b.name);

// 引擎做了什么：
// 1).首先，尝试遍历对象b的所有属性，但没有找到name属性。
// 2).查找name属性的请求被委托给对象b的构造器的原型，他被b.__proto__记录着并且指向B.prototype,
//  而B.prototype被设置成一个通过new A()创建出来的对象。
// 3).在该对象依然没有找到name属性，于是请求被继续委托给这个对象构造器的原型A.prototype。
// 4).在A.prototype中找到了name属性，并返回它的值。

原型链

在JavaScript中万物都是对象，对象和对象之间也有关系，并不是孤立存在的。对象之间的继承关系，在JavaScript中是通过prototype对象指向父类对象，直到指向Object对象为止，这样就形成了一个原型指向的链条，专业术语称之为原型链。

在javascript对象中遵循以下规则：

1. 对象有__proto__属性，函数有prototype属性
2. 函数prototype的__proto__指向Object.prototype
3. 对象的__proto__指向生成它的函数的prototype

基于以上准则，我们来捋一下原型链的构成：

function Foo() {} // 函数； 等价于 var Foo = new Funtion()
var f1 = new Foo() // 对象
var obj = {} // 对象; 等价于 var obj = new Object()


f1.__proto__ === Foo.prototype // 准则3

Foo.__proto__ === Function.prototype // 准则3
Foo.prototype.constructor === Foo
Foo.prototype.__proto__ === Object.prototype // 准则2

Function.__proto__ === Function.prototyoe // Function作为对象，生成他的函数是它自身
Function.prototype.__proto__ === Object.prototype // 准则2

Object.__proto__ === Function.prototype // Object作为对象，生成他的函数是Function
Object.prototype.__proto__ === null // Object.prototype的__proto__指向null

obj.__proto__ === Object.prototype // 准则3

这时候再去看原型链图，你应该就豁然开朗了。

new操作的实现过程

要得到一个对象，不是实例化类，而是找到一个对象作为原型并克隆他

在javascript中没有类的感念，但是为什么调用了new操作尼？

其实在javascript中函数作为普通函数又可作为构造器函数被调用。

用new创建对象的过程，实际上是先克隆Object

function Person(name) {
  this.name = name
}
Person.prototype.say = function() {
  console.log(this.name)
}

function Factory() {
  const target = [].shift.call(arguments)
  const obj = new Object()
  obj.__proto__ = target.prototype
  const res = target.apply(obj, arguments)
  return typeof res === 'object' ? res : obj // 如果构造函数返回了一个对象类型就返回它，否则就把生成的对象返回
}

const xiaoming = Factory(Person, 'xiaoming')

JS继承的实现方式

既然要实现继承，那么首先我们得有一个父类，代码如下：

function Animal() {
  this.name = name || 'Animal'
  this.features = []
  this.sleep = function() {
    console.log(this.name + '正在睡觉')
  }
}
Animal.prototype.eat = function(food) {
  console.log(this.name + '正在吃' + food)
}

原型链继承

原型链继承：将父类的实例作为子类的原型

function Cat() {}
Cat.prototype = new Animal()
Cat.prototype.name = 'Cat'

var cat1 = new Cat()
var cat2 = new Cat()
console.log(cat1.name)
console.log(cat1.eat('fish'))
console.log(cat1.sleep())
console.log(cat1 instanceof Cat) // true
console.log(cat1 instanceof Animal) // true

cat2.features[0] = 'a'
console.log(cat1 features) // ['a']
console.log(cat2 features) // ['a']

特点：

• 非常纯粹的继承关系，实例是子类的实例，也是父类的实例
• 父类新增方法/原型属性，子类都能访问到
• 简单，易于实现

缺点：

• 如果要新增原型方法和属性，则必须放在new Animal()之后执行
• 无法实现多继承
• 来自原型对象的多有属性被所有实例共享
• 创建子类实例时，无法向父类构造函数传参

构造函数

构造函数—使用父类的构造函数来增强子类实例，等于是复制父类的实例属性给子类(没用到原型)

function Cat() {
  Animal.call(this)
  this.name = name || 'Cat'
}

var cat = new Cat()
console.log(cat.name) // Cat
console.log(cat.sleep())
console.log(cat instanceof Cat) // true
console.log(cat instanceof Animal) // false
console.log(cat.eat) // undefinded 无法继承原型方法

特点：

• 解决了原型链继承中的 子类实例共享父类引用属性的问题
• 创建子类实例时，可以向父类传递参数
• 可以实现多继承（call多个父类对象）

缺点：

• 实例并不是父类的实例，只是子类的实例
• 只能继承父类的实例属性和方法，不能继承原型属性和方法
• 无法实现函数的复用，每个子类都有子类实例函数的副本，影响性能

实例继承

实例继承—为父类实例添加新特性，作为子类实例返回

function Cat(name) {
  var instance = new Animal()
  instance.name = name || 'name'
  return instance
}

var cat = new Cat()
console.log(cat.name)
console.log(cat.sleep())
console.log(cat instanceof Cat) // false
console.log(cat instcneof Animal) // true

特性：

• 不限制调用方式，不管 new Cat() 还是 Cat() 返回的对象具有相同的效果

缺点：

• 实例时父类的实例而非子类的实例
• 不支持多继承

拷贝继承

拷贝继承— 拷贝父类实例的所有属性和方法到子类的原型上

function Cat(name) {
  var animal = new Animal()
  for (let i in animal) {
    Cat.prototype[i] = animal[i]
  }
  this.name = name
}

var cat = new Cat()
console.log(cat.name)
console.log(cat.sleep())
console.log(cat instanceof Cat) // true
console.log(cat instcneof Animal) // false

特点：

• 支持多继承

缺点：

• 效率低，内存占用高（因为要拷贝父类属性）
• 无法获取父类不可枚举的方法（不可枚举的方法不能在for in中访问）

组合继承

原型链继承与构造函数继承的组合

function Cat(name) {
  Aimal.call(this)
  this.name = name
}
Cat.prototype = new Animal()

var cat = new Cat()
console.log(cat.name)
console.log(cat.sleep())
console.log(cat instanceof Cat) // true
console.log(cat instcneof Animal) // true

特点：

• 可以继承实例属性和方法，也可继承原型属性和方法
• 即使子类实例也是父类实例
• 不存在引用属性共享的问题
• 函数可复用

缺点：

• 调用里两次父类构造函数，生成了两份实例（子类实例将子类原型上的那份隔离了）

寄生组合继承

组合继承的优化，寄生体现在原型属性和方法的继承之纯粹，即指继承原型上的属性的方法

function Cat(name) {
  Animal.call(this)
  this.name = name
}

(() => {
  function Fn() {}
  Fn.prototype = Animal.prototype
  Cat.prototype = new Fn()
})();

var cat = new Cat()
console.log(cat.name)
console.log(cat.sleep())
console.log(cat instanceof Cat) // true
console.log(cat instanceof Animal) // true

寄生组合继承时继承的最佳实现方式