原型链的查找顺序
面向对象的特性–继承
◼ 面向对象有三大特性：封装、继承、多态
封装：我们前面将属性和方法封装到一个类中，可以称之为封装的过程；
继承：继承是面向对象中非常重要的，不仅仅可以减少重复代码的数量，也是多态前提（纯面向对象中）；
多态：不同的对象在执行时表现出不同的形态；
◼ 那么这里我们核心讲继承。
◼ 那么继承是做什么呢？
继承可以帮助我们将重复的代码和逻辑抽取到父类中，子类只需要直接继承过来使用即可；
在很多编程语言中，继承也是多态的前提；
◼ 那么JavaScript当中如何实现继承呢？
不着急，我们先来看一下JavaScript原型链的机制；
再利用原型链的机制实现一下继承；
JavaScript原型链
◼ 在真正实现继承之前，我们先来理解一个非常重要的概念：原型链。
我们知道，从一个对象上获取属性，如果在当前对象中没有获取到就会去它的原型上面获取：
案例:
//2.原型链
var obj = {
name:"hdc",
age:21
}
// 查找顺序:
// 1.obj上面查找
// 2.obj.__proto__上面找
// 3.obj.__proto__.__proto__ -->null查找(undefined)
console.log(obj.message) // undefined
// 对现有代码进行改造
obj.__proto__ = {
// message:"Hello aaa"
}
obj.__proto__.__proto__ = {
// message:"Hello bbb"
}
obj.__proto__.__proto__.__proto__ = {
message:"Hello ccc"
}
console.log(obj.message) //Hello ccc
</script>
Object的原型
◼ 那么什么地方是原型链的尽头呢？比如第三个对象是否也是有原型__proto__属性呢？
console.log(obj.__proto__.__proto__.__proto__)
◼ 我们会发现它打印的是[Object: null prototype] {}
事实上这个原型就是我们最顶层的原型了
从Object直接创建出来的对象的原型都是[Object: null prototype] {}。
◼ 那么我们可能会问题：[Object: null prototype] {} 原型有什么特殊吗？
特殊一：该对象有原型属性，但是它的原型属性已经指向的是null，也就是已经是顶层原型了；
特殊二：该对象上有很多默认的属性和方法；
原型链实现的继承
◼ 如果我们现在需要实现继承，那么就可以利用原型链来实现了：
目前stu的原型是p1对象，而p1对象的原型是Person默认的原型，里面包含running等函数；
注意：步骤4和步骤5不可以调整顺序，否则会有问题
案例:
<script>
// 定义构造函数
function Person(name,age){
this.name = name
this.age = age
}
Person.prototype.running = function(){
console.log("跑步")
}
Person.prototype.eatting = function(){
console.log("吃饭")
}
// 定义学生类
function Student(name,age,sno,score){
this.name = name
this.age = age
this.sno = sno
this.score = score
}
// 方法一:父类的原型直接赋值给子类的原型
// 缺点:父类和子类共用一个原型一个修改了另一个也会修改没有实现继承
// Student.prototype = Person.prototype
// 方法二: 创建一个父类的实例对象(new Person())用这个实例对象来作为子类的原型对象
var p1 = new Person()
Student.prototype = p1
Student.prototype.studying = function(){
console.log("学习")
}
// 实现继承
//1.方法继承
var stu1 = new Student("hdc",21,111,100)
stu1.running()//跑步
// var p = new Person()
// p.studying()//报错
</script>
原型链继承的弊端
◼ 但是目前有一个很大的弊端：某些属性其实是保存在p对象上的；
第一，我们通过直接打印对象是看不到这个属性的；
第二，这个属性会被多个对象共享，如果这个对象是一个引用类型，那么就会造成问题；
第三，不能给Person传递参数（让每个stu有自己的属性），因为这个对象是一次性创建的（没办法定制化）；
借用构造函数继承
◼ 为了解决原型链继承中存在的问题，开发人员提供了一种新的技术: constructor stealing(有很多名称: 借用构造函数或者称之为经典继承或者称之为伪造对象)：
steal是偷窃、剽窃的意思，但是这里可以翻译成借用；
◼ 借用继承的做法非常简单：在子类型构造函数的内部调用父类型构造函数.
因为函数可以在任意的时刻被调用；
因此通过apply()和call()方法也可以在新创建的对象上执行构造函数；
案例:
function Student(name,age,sno,score){
//重点:借用构造函数
Person.call(this,name,age)
this.sno = sno
this.score = score
}
组合借用继承的问题
◼ 组合继承是JavaScript最常用的继承模式之一：
如果你理解到这里, 点到为止, 那么组合来实现继承只能说问题不大；
但是它依然不是很完美，但是基本已经没有问题了；
◼ 组合继承存在什么问题呢?
组合继承最大的问题就是无论在什么情况下，都会调用两次父类构造函数。
✓ 一次在创建子类原型的时候；
✓ 另一次在子类构造函数内部(也就是每次创建子类实例的时候)；
另外，如果你仔细按照我的流程走了上面的每一个步骤，你会发现：所有的子类实例事实上会拥有两份父类的属性
✓ 一份在当前的实例自己里面(也就是person本身的)，另一份在子类对应的原型对象中(也就是person.__proto__里面)；
✓ 当然，这两份属性我们无需担心访问出现问题，因为默认一定是访问实例本身这一部分的；
满足三个条件:
1.创建出来一个对象
2.这个对象的隐式原型必须指向父类的显式原型
3.将这个对象赋值给子类的显式原型
原型式继承函数
◼ 原型式继承的渊源
这种模式要从道格拉斯·克罗克福德（Douglas Crockford，著名的前端大师，JSON的创立者）在2006年写的一篇文章说起: Prototypal Inheritance in JavaScript(在JavaScript中使用原型式继承)
在这篇文章中，它介绍了一种继承方法，而且这种继承方法不是通过构造函数来实现的.
为了理解这种方式，我们先再次回顾一下JavaScript想实现继承的目的：重复利用另外一个对象的属性和方法.
◼ 最终的目的：student对象的原型指向了person对象；
寄生组合实现继承
◼ 寄生式(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 = createObject(Supertype.prototype)
Object.defineProperty(Subtype.prototype,"constructor",{
enumerable:false,
configurable:true,
writable:true,
value:Subtype
})
}
<script src="./js/inherit_untils.js"></script>
<script>
function Person(name,age){
this.name = name
this.age = age
}
Person.prototype.running=function(){
console.log("running")
}
Person.prototype.eating=function(){
console.log("eating")
}
function Student(name,age,sno,score){
Person.call(this,name,age)
this.sno = sno
this.score = score
}
inherit(Student,Person)
Student.prototype.studying = function(){
console.log("studying")
}
// 创建实例对象
var stu1 = new Student("hdc",21,111,100)
console.log(stu1)
</script>
