ES5 继承+原型【自留】

对象和函数的原型

认识对象的原型

JavaScript当中每个对象都有一个特殊的内置属性 [[prototype]]，**这个特殊的对象可以指向另外一个对象。 **
**那么这个原型有什么用呢? **

• 当我们通过引用对象的属性key来获取一个value时，它会触发 [[Get]]的操作;
• 这个操作会首先检查该对象是否有对应的属性，如果有的话就使用它;
• 如果对象中没有该属性，那么会访问对象[[prototype]] 内置属性指向的对象上的属性;

那么如果通过字面量直接创建一个对象，这个对象也会有这样的属性吗?
如果有，应该如何获取这个属性呢?
✅ 答案是有的，只要是对象都会有这样的一个内置属性
◼ 获取的方式有两种:
方式一：通过对象的**__proto__**属性可以获取到（但这个是早期浏览器自己添加的，存在一定兼容性问题）
方式二：通过**Object.getPrototypeOf**方法可以获取到

var obj = {
  name: 'zhangsan'
}
console.log(obj);

// 获取对象的原型
console.log(obj.name)
console.log(obj.__proto__);
console.log(Object.getPrototypeOf(obj))
console.log(Object.getPrototypeOf(obj) === obj.__proto__) // true

函数的原型 prototype

那么我们知道上面的东西对于我们的构造函数创建对象来说有什么用呢?
它的意义是非常重大的，接下来我们继续来探讨;
这里我们又要引入一个新的概念:所有的函数都有一个prototype的属性(注意:不是__proto__)

function foo(){
  
}
// 所有的函数都有一个prototype的属性
console.log(foo.prototype);

你可能会问题，老师是不是因为函数是一个对象，所以它有prototype的属性呢?
不是的，因为它是一个函数，才有了这个特殊的属性;
而不是它是一个对象，所以有这个特殊的属性;

var obj = {}
function foo() {}

// 1.将函数看成是一个普通的对象时, 它是具备__proto__(隐式原型)
// 作用: 查找key对应的value时, 会找到原型身上
// console.log(obj.__proto__)
// console.log(foo.__proto__)



// 2.将函数看成是一个函数时, 它是具备prototype(显式原型)
// 作用: 用来构建对象时, 给对象设置隐式原型的
console.log(foo.prototype)
// console.log(obj.prototype) 对象是没有prototype

new、constructor

new操作符

new操作

1. 创建空对象
2. 将这个空对象赋值给this
3. 将函数的显示原型赋值给这个对象，作为它的隐式原型
4. 执行函数体中代码
5. 将这个对象默认返回

💡 new关键字的步骤如下:

1. 在内存中创建一个新的对象(空对象);
2. 这个对象内部的 [[prototype]] 属性会被赋值为该构造函数的prototype属性;

💡 那么也就意味着我们通过 Person 构造函数 创建出来的所有对象的[[prototype]]属性都指向 Person.prototype:
📍 new操作原型赋值

function Foo() {
  // 1. 创建空对象 
	// 2.。。。。
}
console.log(Foo.prototype);


var f1 = new Foo();
var f2 = new Foo();
var f3 = new Foo();
var f4 = new Foo();
var f5 = new Foo();
console.log(f1.__proto__);
console.log(f1.__proto__ === Foo.prototype); //true
console.log(f2.__proto__);
console.log(f3.__proto__ === f4.__proto__); //true

📍 将方法放在原型上：
:::tips
1.什么是函数的显式原型

• 区分和对象原型区别
  2.函数的原型的作用
  *** 在通过new操作创建对象时, 将这个显式原型赋值给创建出来对象的隐式原型**
  3.案例Person, 将所有的函数定义放到了显式原型上
  :::

function Student(name, age, sno) {
  this.name = name
  this.age = age
  this.sno = sno
  // 1.方式一: 编写函数, 会创建很多个函数对象
  // this.running = function() {
  //   console.log(this.name + " running")
  // }
  // this.eating = function() {
  //   console.log(this.name + " eating")
  // }
  // this.studying = function() {
  //   console.log(this.name + " studying")
  // }
}


// 当我们多个对象拥有共同的值时, 我们可以将它放到构造函数对象的显式原型
// 由构造函数创建出来的所有对象, 都会共享这些属性

Student.prototype.running = function() {
  console.log(this.name + " running")
}
Student.prototype.eating = function() {
  console.log(this.name + " eating")
}


// 1.创建三个学生
var stu1 = new Student("why", 18, 111)
var stu2 = new Student("kobe", 30, 112)
var stu3 = new Student("james", 18, 111)


// 隐式原型的作用
// 1> stu1的隐式原型是谁? Student.prototype对象
// 2> stu1.running查找:
//  * 先在自己身上查找, 没有找到
//  * 去原型去查找
stu1.running()
stu2.eating()

constructor属性

事实上原型对象上面是有一个属性的: constructor

• 默认情况下原型上都会添加一个属性叫做constructor，这个constructor指向当前的函数对象;

function Person() {


}
// 1. 对 constructor 在 prototype 上的验证
var PersonPrototype = Person.prototype;
console.log(PersonPrototype);
console.log(PersonPrototype.constructor);
console.log(Person.prototype.constructor);
console.log(Person.prototype.constructor === PersonPrototype.constructor);


console.log(Person.name);
console.log(PersonPrototype.constructor.name);


//  2. 实例对象 p
var p = new Person();
console.log(p.__proto__);
console.log(p.__proto__.constructor);
console.log(p.__proto__.constructor.name);

创建对象的内存表现：

prototype添加属性：

完整代码

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


Person.prototype.running = function () {
  console.log("running~")
}
var p1 = new Person("kebo", 30)
var p2 = new Person("Jim", 18)


// console.log(p1.name);
// console.log(p1.running())
// console.log(p2.age);



// 新增属性
p1.__proto__.info = "云南很美丽";
Person.prototype.address = "中国";


p1.height = 1.88;
p2.isAdmin = true;


// 获取属性
console.log(p1.address); // "中国"
console.log(p1.isAdmin); // undefined


console.log(p2.info); //"云南很美丽"
console.log(p2.address); // "中国"


// 修改属性 address
p1.address = "广州市";
console.log(p2.address); // "中国"
console.log(p1.address);//"广州市"

重写原型对象

如果我们需要在原型上添加过多的属性，通常我们会重写整个原型对象:
前面我们说过, 每创建一个函数, 就会同时创建它的prototype对象, 这个对象也会自动获取constructor属性; 而我们这里相当于给prototype重新赋值了一个对象, 那么这个新对象的constructor属性, 会指向Object构造函数, 而不是 Person构造函数了

function Person() {


}
console.log(Person.prototype);
// 在原有的原型对象上添加新的属性
Person.prototype.message = "Hello Person"
Person.prototype.info = { name: "哈哈哈", age: 30 }
Person.prototype.running = function () { }
Person.prototype.eating = function () { }


console.log(Person.prototype);
// console.log(Object.keys(Person.prototype))

// 直接赋值一个新的原型对象
Person.prototype = {
  message: "Hello Person",
  info: { name: "哈哈哈", age: 30 },
  running: function () { },
  eating: function () { },
}
console.log(Person.prototype);

原型对象的constructor **
如果希望constructor 指向 Person ，那么可以手动添加:
上面的方式虽然可以, 但是也会造成constructor的 **[[Enumerable]]** 特性被设置了**true** . 默认情况下, 原生的constructor 属性是不可枚举**的.如果希望解决这个问题, 就可以使用我们前面介绍的
Object.defineProperty() 函数了.

// 直接赋值一个新的原型对象
Person.prototype = {
  message: "Hello Person",
  info: { name: "哈哈哈", age: 30 },
  running: function () { },
  eating: function () { },
  constructor: Person
}
console.log(Person.prototype);
// console.log(Object.keys(Person.prototype))

Object.defineProperty(Person.prototype, 'constructor', {
  enumerable: false,
  configurable: true,
  writable: true,
  value: Person
})

创建对象 - 构造函数和原型对象

我们在上一个构造函数的方式创建对象时，有一个弊端:会创建出重复的函数，比如running、eating这些函数
那么有没有办法让所有的对象去共享这些函数呢?
✅ 可以，将这些函数放到 Person.prototype的对象上即可;

面向对象的特性 - 继承

面向对象有三大特性: 封装、继承、多态

• 封装:我们前面将属性和方法封装到一个类中，可以称之为封装的过程;
• 继承:继承是面向对象中非常重要的，不仅仅可以减少重复代码的数量，也是多态前提(纯面向对象中);
• 多态:不同的对象在执行时表现出不同的形态;

那么这里我们核心讲继承。
那么继承是做什么呢?

• 继承可以帮助我们将重复的代码和逻辑抽取到父类中，子类只需要直接继承过来使用即可;
• 在很多编程语言中，继承也是多态的前提;

那么JavaScript当中如何实现继承呢?

• 先来看一下JavaScript原型链的机制;
• 再利用原型链的机制实现一下继承;

JavaScript原型链

我们知道，从一个对象上获取属性，如果在当前对象中没有获取到就会去它的原型上面获取:

var obj = {
  name: 'why',
}
// console.log(obj.message);


obj.__proto__ = {
  // message: 'hello aaaa'
}
obj.__proto__.__proto__ = {
  // message: 'hello bbbb'
}
obj.__proto__.__proto__.__proto__ = {
  message: 'hello cccc'
}
console.log(obj.message);

Object的原型

那么什么地方是原型链的尽头呢?比如第三个对象是否也是有原型__proto__属性呢?

console.log(obj.__proto__.__proto__.__proto__.__proto__);
// Object--->null

从Object直接创建出来的对象的原型都是 [Object: null prototype] {}。
如果我们现在需要实现继承，那么就可以利用原型链来实现了:
[Object: null prototype] {} 原型有什么特殊吗?

• 特殊一:该对象有原型属性，但是它的原型属性已经指向的是null，也就是已经是顶层原型了;
• 特殊二:该对象上有很多默认的属性和方法;

创建Object对象的内存图

原型链关系的内存图

Object是所有类的父类

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

原型链的查找顺序

通过原型链实现的继承

如果我们现在需要实现继承，那么就可以利用原型链来实现了:
目前 stu1 的原型是_p对象_，而p对象的原型是Person默认的原型，里面包含running等函数;
注意:步骤4和步骤5不可以调整顺序，否则会有问题

// 1. 定义父类构造函数
function Person(name, age) {
  this.name = name;
  this.age = age;
}
// 2. 父类原型上添加内容
Person.prototype.running = function () {
  console.log(this.name + ",running~");
};
// 3. 定义子类构造函数
function Student(name, age,score, sno) {
  this.name = name;
  this.age = age;
  
  this.score = score;
  this.sno = sno;
}
// 4. 创建一个父类的实例对象，用这个实例对象作为子类的原型对象
var p = new Person("zhangsan", "19");
Student.prototype = p;
// 5. 在子类原型上添加内容
Student.prototype.studying = function () {
  console.log(this.name + "studying~")
}
var stu1 = new Student("lisi", "17", "100", "00001");
stu1.running();

原型链继承的弊端

但是目前有一个很大的弊端:某些属性其实是保存在p对象上的;

• 第一，我们通过直接打印对象是看不到这个属性的;
• 第二，这个属性会被多个对象共享，如果这个对象是一个引用类型，那么就会造成问题;
• 第三，**不能给Person传递参数(让每个stu有自己的属性)，因为这个对象是一次性创建的(没办法定制化); **

借用构造函数继承

为了解决原型链继承中存在的问题，开发人员提供了一种新的技术: constructor stealing(有很多名称: 借用构造函数或者称之 为经典继承或者称之为伪造对象): _steal _是偷窃、剽窃的意思，但是这里可以翻译成借用;
借用继承的做法非常简单:
在子类型构造函数的内部调用父类型构造函数. 因为函数可以在任意的时刻被调用;
因此通过apply() 和call() 方法也可以在新创建的对象上执行构造函数;

// 1. 定义父类构造函数
function Person(name, age) {
  this.name = name;
  this.age = age;
}
// 2. 父类原型上添加内容
Person.prototype.running = function () {
  console.log(this.name + ",running~");
};
// 3. 定义子类构造函数
function Student(name, age,score, sno) {
  // 重点: 借用构造函数
  Person.call(this, name, age)
  
  this.score = score;
  this.sno = sno;
}
// 4. 创建一个父类的实例对象，用这个实例对象作为子类的原型对象
var p = new Person("zhangsan", "19");
Student.prototype = p;
// 5. 在子类原型上添加内容
Student.prototype.studying = function () {
  console.log(this.name + "studying~")
}
var stu1 = new Student("100", "00001");
stu1.running();

组合借用继承的问题 (es6之前)

组合继承是JavaScript最常用的继承模式之一:
如果你理解到这里, 点到为止, 那么组合来实现继承只能说问题不大;
但是它依然不是很完美，但是基本已经没有问题了;
❗ 组合继承存在什么问题呢? **
组合继承最大的问题就是无论在什么情况下，都会调用两次父类构造函数**。

• 一次在创建子类原型的时候;
• 另一次在子类构造函数内部(也就是每次创建子类实例的时候);

另外，如果你仔细按照我的流程走了上面的每一个步骤，你会发现:
所有的子类实例事实上会拥有两份父类的属性

1. 一份在当前的实例自己里面(也就是person本身的)，
2. 另一份在子类对应的原型对象中(也就是person.__proto__里面);

当然，这两份属性我们无需担心访问出现问题，因为默认一定是访问实例本身这一部分的;

原型式继承函数

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

// 原型式继承 
function Person() {


}
// Person.prototype.running = function () {
//     console.log("running~")
// }
// Person.prototype.eating = function () {
//     console.log("eating~")
// }
function Student() {}

// 方案一： 
// var obj = {};
// Object.setPrototypeOf(obj, Person.prototype);
// Student.prototype = obj;


// 方案二：
// function F() { }
// F.prototype = Person.prototype
// Student.prototype = new F();


// 方案三:
// var obj = Object.create(Person.prototype);
// console.log(obj.__proto__ === Person.prototype);//true
// Student.prototype = obj;

寄生式继承函数

寄生式(Parasitic)继承

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

寄生组合实现继承

现在我们来回顾一下之前提出的比较理想的组合继承
组合继承是比较理想的继承方式, 但是存在两个问题:

• 问题一: 构造函数会被调用两次: 一次在创建子类型原型对象的时候, 一次在创建子类型实例的时候.
• 问题二: 父类型中的属性会有两份: 一份在原型对象中, 一份在子类型实例中.

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

// 真实开发封装
function createObject(o) {
  function F() { }
  F.prototype = o
  return new F();
}
// 将Subtype和Supertype联系在一起
// 寄生式函数
function inherit(Subtype, Supertype) {
  // Subtype.prototype = Object.create(Supertype.prototype);
  Subtype.prototype = createObject(Supertype.prototype);
  Object.defineProperty(Subtype.prototype, 'constructor', {
    enumerable: false,
    writable: true,
    configurable: true,
    value: Subtype
  })
}
inherit(Student, Person)

// 寄生组合式继承
// 原型链/借用/原型式(对象之间)/寄生式函数
function Person(name, age, height) {
  this.name = name
  this.age = age
  this.height = height
}

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


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

inherit(Student, Person)
Student.prototype.studying = function() {
  console.log("studying")
}

// 创建实例对象
var stu1 = new Student("why", 18, 1.88, 111, 100)

Object是所有类的父类

原型继承关系

创建对象的内存表现

总结：

1. p1 是Person的实例对象
2. obj是Object的实例对象
3. Function/Object/Foo都是Function的实例对象
4. 原型对象默认创建时，隐式原型都是指向Object的显式原型的Object指向null
5. 推导另一个结论：Object是Person/Function的父类
6. Function是Object对应的构造函数