类的继承和实现方案

接下来我们就可以利用原型和原型链来实现 JavaScript 的继承功能了！

一. 类的继承和实现

1.1. Object 是所有类的父类

从我们上面的 Object 原型我们可以得出一个结论：原型链是最顶层的原型对象就是 Object 的原型对象

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.running = function () {
  console.log(this.name + "running~");
};

var p1 = new Person("why", 18);

所以我们会发现，放到 Object 原型上的所有方法我们都可以继承过来：

console.log(p1.valueOf());
console.log(p1.toString());

1.2. 通过原型链实现继承

如果我们现在需要实现继承，那么就可以利用原型链来实现了：

• 目前 stu 的原型是 p 对象，而 p 对象的原型是 Person 默认的原型，里面包含 running 等函数；
• 注意：步骤 4 和步骤 5 不可以调整顺序，否则会有问题

// 1.定义父类构造函数
function Person() {
  this.name = "why";
}

// 2.父类原型上添加内容
Person.prototype.running = function () {
  console.log(this.name + "running~");
};

// 3.定义子类构造函数
function Student() {
  this.sno = 111;
}

// 4.创建父类对象，并且作为子类的原型对象
var p = new Person();
Student.prototype = p;

// 5.在子类原型上添加内容
Student.prototype.studying = function () {
  console.log(this.name + "studying");
};

var stu = new Student();
console.log(stu.name, stu.sno);
stu.studying();
stu.running();

但是目前有一个很大的弊端：

• 某些属性其实是保存在 p 对象上的；
• 第一，我们通过直接打印对象是看不到这个属性的；
• 第二，这个属性会被多个对象共享，如果这个对象是一个引用类型，那么就会造成问题；
• 第三，不能给 Person 传递参数，因为这个对象是一次性创建的（没办法定制化）；

function Person() {
  this.name = "why";
  this.friends = ["kobe", "james"];
}

Person.prototype.running = function () {
  console.log(this.name + "running~");
};

function Student() {
  this.sno = 111;
}

var p = new Person();
Student.prototype = p;

Student.prototype.studying = function () {
  console.log(this.name + "studying");
};

var stu1 = new Student();
var stu2 = new Student();

stu1.friends.push("curry");
console.log(stu2.friends); // [ 'kobe', 'james', 'curry' ]

1.3. 借用构造函数继承

为了解决原型链继承中存在的问题，开发人员提供了一种新的技术: constructor stealing(有很多名称: 借用构造函数或者称之为经典继承或者称之为伪造对象)：

• steal 是偷窃、剽窃的意思，但是这里可以翻译成借用；

借用继承的做法非常简单：在子类型构造函数的内部调用父类型构造函数.

• 因为函数可以在任意的时刻被调用；
• 因此通过 apply()和 call()方法也可以在新创建的对象上执行构造函数；

function Person(name, friends) {
  this.name = name;
  this.friends = friends;
}

Person.prototype.running = function () {
  console.log(this.name + "running");
};

function Student(name, friends, sno) {
  Person.call(this, name, friends);
  this.sno = sno;
}

Student.prototype.studying = function () {
  console.log(this.name + "studying");
};

var stu1 = new Student("why", ["kobe"], 111);
var stu2 = new Student("lilei", ["james"], 112);

console.log(stu1);
stu1.friends.push("curry");
console.log(stu2);

1.4. 组合原型借用继承

上面的代码中只能是属性的继承，不能有方法的继承：

• 那么这个时候我们依然可以利用原型的方式，让其继承方法；

function Person(name, friends) {
  this.name = name;
  this.friends = friends;
}

Person.prototype.running = function () {
  console.log(this.name + "running");
};

function Student(name, friends, sno) {
  Person.call(this, name, friends);
  this.sno = sno;
}

Student.prototype = new Person();

Student.prototype.studying = function () {
  console.log(this.name + "studying");
};

var stu1 = new Student("why", ["kobe"], 111);
var stu2 = new Student("lilei", ["james"], 112);

console.log(stu1);
stu1.friends.push("curry");
console.log(stu2);

组合继承是 JavaScript 最常用的继承模式之一：

• 如果你理解到这里, 点到为止, 那么组合来实现继承只能说问题不大；
• 但是它依然不是很完美，但是基本已经没有问题了；(不成问题的问题, 基本一词基本可用, 但基本不用)

组合继承存在什么问题呢?

• 组合继承最大的问题就是无论在什么情况下，都会调用两次父类构造函数。
  • 一次在创建子类原型的时候；
  • 另一次在子类构造函数内部(也就是每次创建子类实例的时候)；
• 另外，如果你仔细按照我的流程走了上面的每一个步骤，你会发现：所有的子类实例事实上会拥有两份父类的属性
  • 一份在当前的实例自己里面(也就是 person 本身的)，另一份在子类对应的原型对象中(也就是 person.__proto__里面)；
  • 当然，这两份属性我们无需担心访问出现问题，因为默认一定是访问实例本身这一部分的；

那么有些人会提出一种解决方案：

Student.prototype = Person.prototype;

这种是否可以呢？

• 答案不可以！
• 因为之后如果我们在 Student 的原型上添加了一些属性和方法，那么这些属性和方法也会被添加到 Person 的原型上；
• 那么其他继承自 Person 的原型对象，也会继承上给 Student 添加的属性和方法；

那么这个问题到底应该怎么解决呢？

1.5. 原型式继承函数

原型式继承的渊源

• 这种模式要从道格拉斯·克罗克福德（Douglas Crockford，著名的前端大师，JSON 的创立者）在 2006 年写的一篇文章说起: Prototypal Inheritance in JavaScript(在 JS 中使用原型式继承)
• 在这篇文章中，它介绍了一种继承方法，而且这种继承方法不是通过构造函数来实现的.
• 为了理解这种方式，我们先再次回顾一下 JavaScript 想实现继承的目的：重复利用另外一个对象的属性和方法.

function object(obj) {
  function Func() {}
  Func.prototype = obj;
  return new Func();
}

var person = {
  name: "why",
  age: 18,
};

var student = object(person);

上面的代码做了什么呢？

• 最终的目的：student 对象的原型指向了 person 对象；

我们也可以通过下面的方法来实现：

• 我们的目的其实是创建一个新的对象，并且这个新对象的原型需要指向 obj 对象；

function object(obj) {
  var newObj = {};
  Object.setPrototypeOf(newObj, obj);
  return newObj;
}

事实上，ES5 之后新增了 Object.create 方法实现的是相同的效果。

var person = {
name: "why",
age: 18
}

var student = Object.create(person)

console.log(student.__proto__)

当然，这个方法还可以接受第二个参数：给新对象定义的额外属性

var person = {
  name: "why",
  age: 18,
};

var student = Object.create(person, {
  address: {
    value: "北京市",
    enumerable: true,
  },
});

console.log(student); // { address: '北京市' }
console.log(student.__proto__); // { name: 'why', age: 18 }

1.6. 寄生式继承函数

寄生式(Parasitic)继承

• 寄生式(Parasitic)继承是与原型式继承紧密相关的一种思想, 并且同样由道格拉斯·克罗克福德(Douglas Crockford)提出和推广的；
• 寄生式继承的思路是结合原型类继承和工厂模式的一种方式；
• 即创建一个封装继承过程的函数, 该函数在内部以某种方式来增强对象，最后再将这个对象返回；

function object(obj) {
  function Func() {}
  Func.prototype = obj;
  return new Func();
}

function createStudent(person) {
  var newObj = object(person);
  newObj.studying = function () {
    console.log(this.name + "studying");
  };
  return newObj;
}

var person = {
  name: "why",
  age: 18,
};

var stu = createStudent(person);
stu.studying();

寄生式继承存在的问题:

• 寄生式继承和原型式继承存在一样的问题, 引用类型会共享. (因为是在原型式继承基础上的一种封装)
• 另外寄生式继承还存在函数无法复用的问题, 因为每次 createAnother 一个新的对象, 都需要重新定义新的函数.

1.7. 寄生组合式继承

寄生组合式继承

• 现在我们来回顾一下之前提出的比较理想的组合继承
  • 组合继承是比较理想的继承方式, 但是存在两个问题:
  • 问题一: 构造函数会被调用两次: 一次在创建子类型原型对象的时候, 一次在创建子类型实例的时候.
  • 问题二: 父类型中的属性会有两份: 一份在原型对象中, 一份在子类型实例中.
• 事实上, 我们现在可以利用寄生式继承将这两个问题给解决掉.
  • 你需要先明确一点: 当我们在子类型的构造函数中调用父类型.call(this, 参数)这个函数的时候, 就会将父类型中的属性和方法复制一份到了子类型中. 所以父类型本身里面的内容, 我们不再需要.
• 这个时候, 我们还需要获取到一份父类型的原型对象中的属性和方法.
• 能不能直接让子类型的原型对象 = 父类型的原型对象呢?
• 不要这么做, 因为这么做意味着以后修改了子类型原型对象的某个引用类型的时候, 父类型原生对象的引用类型也会被修改.
• 我们使用前面的寄生式思想就可以了.

寄生组合式的核心代码:

// 定义 object 函数
function object(o) {
  function F() {}
  F.prototype = o;
  return new F();
}

// 定义寄生式核心函数
function inhreitPrototype(subType, superType) {
  var prototype = object(superType.prototype);
  prototype.constructor = subType;
  subType.prototype = prototype;
}

寄生组合式继承的完整代码：

function createObject(o) {
  function Fn() {}
  Fn.prototype = o;
  return new Fn();
}

function inheritPrototype(SubType, SuperType) {
  SubType.prototype = Object.create(SuperType.prototype);
  Object.defineProperty(SubType.prototype, "constructor", {
    enumerable: false,
    configurable: true,
    writable: true,
    value: SubType,
  });
}

function Person(name, age, friends) {
  this.name = name;
  this.age = age;
  this.friends = friends;
}

Person.prototype.running = function () {
  console.log("running~");
};

Person.prototype.eating = function () {
  console.log("eating~");
};

function Student(name, age, friends, sno, score) {
  Person.call(this, name, age, friends);
  this.sno = sno;
  this.score = score;
}

inheritPrototype(Student, Person);

Student.prototype.studying = function () {
  console.log("studying~");
};

二. 类的其他知识补充

2.1. 对象的方法补充

hasOwnProperty

• 判断对象是否有某一个属于自己的属性（不是在原型上的属性）

var obj = {
  name: "why",
  age: 18,
};

var info = Object.create(obj, {
  address: {
    value: "北京市",
    enumerable: true,
  },
});

// hasOwnProperty 方法判断
console.log(info.hasOwnProperty("address"));
console.log(info.hasOwnProperty("name"));

in/for in 操作符

• 用于判断某个属性是否在某个对象或者对象的原型上

// in 操作符: 不管在当前对象还是原型中返回的都是 true
console.log("address" in info);
console.log("name" in info);

// for in
for (var key in info) {
  console.log(key);
}

instanceof

• 用于检测构造函数的 prototype，是否出现在某个实例对象的原型链上

function createObject(o) {
  function Fn() {}
  Fn.prototype = o
  return new Fn()
}

function inheritPrototype(SubType, SuperType) {
  SubType.prototype = createObject(SuperType.prototype)
    Object.defineProperty(SubType.prototype, "constructor", {
    enumerable: false,
    configurable: true,
    writable: true,
    value: SubType
  })
}

function Person() {
}

function Student() {
}

inheritPrototype(Student, Person)

console.log(Person.prototype.__proto__)

var stu = new Student()
console.log(stu instanceof Student) // true
console.log(stu instanceof Person) // true
console.log(stu instanceof Object) // true

isPrototypeOf

• 用于检测某个对象，是否出现在某个实例对象的原型链上

function Person() {}

var p = new Person();

console.log(p instanceof Person);
console.log(Person.prototype.isPrototypeOf(p));

//
var obj = {
  name: "why",
  age: 18,
};

var info = Object.create(obj);

// console.log(info instanceof obj)
console.log(obj.isPrototypeOf(info));

2.2. 继承关系终级图

详细过程请观看视频，效果更佳！！！

var obj = {
  name: "why"
}

console.log(obj.__proto__)

// 对象里面是有一个__proto__对象: 隐式原型对象

// Foo 是一个函数, 那么它会有一个显示原型对象: Foo.prototype
// Foo.prototype 来自哪里?
// 答案: 创建了一个函数, Foo.prototype = { constructor: Foo }

// Foo 是一个对象, 那么它会有一个隐式原型对象: Foo.__proto__
// Foo.__proto__来自哪里?
// 答案: new Function() Foo.__proto__ = Function.prototype
// Function.prototype = { constructor: Function }

// var Foo = new Function()
function Foo() {

}

console.log(Foo.prototype === Foo.__proto__)
console.log(Foo.prototype.constructor)
console.log(Foo.__proto__.constructor)

var foo1 = new Foo()
var obj1 = new Object()

console.log(Object.getOwnPropertyDescriptors(Function.__proto__))