继承及继承的方式
继承
JS中继承的概念：
- 通过【某种方式】让一个对象可以访问到另一个对象中的属性和方法，我们把这种方式称之为继承【并不是所谓的xxx extends yyy】
为什么要使用继承？
- 有些对象会有方法(动作、行为)，而这些方法都是函数，如果把这些方法和函数都放在构造函数中声明就会导致内存的浪费
- 把子类中共同的成员提取到父类中，实现代码重用。
function Person(){
this.say = function(){
console.log("你好")
}
}
var p1 = new Person();
var p2 = new Person();
var p3 = new Person();
var p4 = new Person();
...
console.log(p1.say === p2.say); //false 由于say方法可能功能相似，但是不是同一个方法(没有指向同一块内存，会造成内存浪费）
继承的方式
实现继承首先需要一个父类，在js中实际上是没有类的概念，在es6中class虽然很像类，但实际上只是es5上语法糖而已。
// 父类
function Person(name, age, sex){
this.name = name;
this.age = age;
this.sex = sex;
}
// 子类
function Student(name, age, sex){
this.name = name;
this.age = age;
this.sex = sex;
}
第一种方式：原型链继承（父类的实例作为子类的原型）
function Student(){}
Student.prototype = new Person();
Student.prototype.constructor = Student;
Student.prototype.name = 'zhangsan';
Student.prototype.age= 18;
var s1 = new Student();
- 优点: 简单易于实现，父类新增的原型方法/原型属性，子类都能访问
- 缺点:
1. 要想为子类新增属性和方法，必须要在 new 父类构造函数的后面执行，不能放到构造器中
2. 无法实现多继承
3. 创建子类实例时，不能向父类构造函数中传参数
第二种方式：借用构造函数实现继承 .call() .apply()
function Student(name,age, sex, score){
this.score = score;
Person.call(this, name, age, sex);
// ->等价于
//Person.apply(this, [name, age, sex])
}
var s1 = new Student('zhangsan', 18, 'male', 90);
- 场景：适用于2种构造函数之间逻辑有相似的情况，如 Student(), Person()
- 优点：
1. 解决了子类构造函数向父类构造函数中传递参数
2. 可以实现多继承（call或者apply多个父类） - 缺点：
1. 方法都在构造函数中定义，无法复用。
2. 不能继承原型属性/方法，只能继承父类的实例属性和方法。
第三种方式：组合式继承（借用构造函数 + 原型链继承）
- 核心：通过调用父类构造，继承父类的属性并保留传参的优点，然后通过将父类实例作为子类原型，实现函数复用
function Student(name,age, sex, score){
this.score = score;
Person.call(this, name, age, sex);
// ->等价于
//Person.apply(this, [name, age, sex])
}
Student.prototype = new Person();
Student.prototype.constructor = Student;
Student.prototype.exam = function(){
console.log('考试了')
}
var s1 = new Student('zhangsan', 18, 'male', 90);
- 优点：
1. 可以继承属性和方法，并且可以继承原型的属性和方法
2. 函数可以复用
3. 不存在引用属性问题 - 缺点：
1. 调用了两次父类构造函数（耗内存），子类的构造函数会代替原型上的那个父类构造函数。
第四种方式：拷贝继承(混入继承)
- 场景：有时候想使用某个对象中的属性，但是又不能直接修改它，于是就可以创建一个该对象的拷贝
- 实现1：
var source={name:"李白",age:15}
var target={};
target.name=source.name
target.age=source.age;
- 上面的方式很明显无法重用，实际代码编写过程中，很多时候都会使用拷贝继承的方式，所以为了重用，可以编写一个函数把他们封装起来：
function extend(target,source){
for(key in source){
target[key]=source[key];
}
return target;
}
extend(target,source)
-
由于拷贝继承在实际开发中使用场景非常多，所以很多库都对此有了实现
- jquery：$.extend
-
es6中有了对象扩展运算符仿佛就是专门为了拷贝继承而生：
var source={name:"李白",age:15}
var target={ ...source }
var target={ ...source, age:18}
第六种方式：原型式继承
- 场景：
- 创建一个纯洁的对象
- 创建一个继承自某个父对象的子对象
- 使用方式：
- 空对象：Object.create(null)
var o1={ say:function(){} } var o2=Object.create(o1);
其它方式：寄生继承、寄生组合继承
bind()、call()、apply() 区别：
- 共同点：改变this指向。
- 不同点：
示例：function fn(x,y){ console.dir(this); //this --> window console.log(x + y); } fn(2, 3)
- bind() 改变
this的指向，不会调用函数，返回一个新的函数；var o = {name:'wang'}; var fn1 = fn.bind(o, 2, 3); fn1(); // this --> o - call() 方法调用一个函数, 其具有一个指定的
this值和分别地提供的参数(参数的列表)。var o = {name:'wang'}; fn.call(o, 2, 3); // this --> o - apply() 方法调用一个函数, 其具有一个指定的
this值，以及作为一个数组（或类似数组的对象）提供的参数。var o = {name:'wang'}; fn.apply(o, [2, 3]); // this --> o
函数内 this 指向的不同场景
函数的调用方式决定了 this 指向的不同：
| 调用方式 | 非严格模式 | 备注 |
|---|---|---|
| 普通函数调用 | window | 严格模式下是 undefined |
| 构造函数调用 | 实例对象 | 原型方法中 this 也是实例对象 |
| 对象方法调用 | 该方法所属对象 | 紧挨着的对象 |
| 事件绑定方法 | 绑定事件对象 | |
| 定时器函数 | window |
