【JavaScript高级】继承

一、继承

继承是面向对象语言中最显著的一个特征。

它是从已有的类中派生出新的类，新的类能吸收已有类（基类、父类）的数据（特征和行为），并拓展属于自己的新的能力。

原生JavaScipt案例合集
JavaScript +DOM基础
JavaScript 基础到高级
Canvas游戏开发

类：具有相同特征和行为的集合。

比如：人类有姓名、年龄、性别、身高、体重等属性，吃饭、睡觉、走路等等行为，所以人可以划为一类。

人类这个大的范围太广了，我们还可以进行细分，根据不同的划分标准可以划分出不同的小类：

​ 按照肤色：黄种人 白种人 黑种人

​ 按照国籍：中国人、法国人、美国人、俄罗斯等

​ 按照工种：教师、学生、医生、工人、农民等等

​ …

在传统的JS中不存在类的概念，我们使用构造函数模拟类，并通过一些方式实现类与类之间的继承。

对象：从类中拿出的具体特性和行为的个体。

比如：张三丰 年龄23 性别男 黄种人 国籍中华人民共和国 是一个医生

类和对象关系：

​ 类是对象的抽象化；

​ 对象是类的具体化。

传统JS中提供了几种继承的方式：类式继承（原型继承）、构造函数式继承（apply和call方法）、组合式继承（前面两种组合）、寄生式继承（类式继承的优化）、寄生组合式继承（寄生继承和组合继承的结合）

1.1 类式继承

类式继承也叫原型继承，将子类的原型指向父类实例化对象。

//定义父类
function People(name,age,sex){
    this.name = name;
    this.age = age;
    this.sex = sex;
}

People.prototype.eat = function(){
    return "是人就得吃饭，持不同的饭，长不同的身体！！"
}

//定义一个子类
function Doctor(name,age,sex,hospital,des){
    this.name = name;
    this.age = age;
    this.sex = sex;

    this.hospital = hospital;
    this.des = des;
}


//子类的原型 指向 父类的原型
// Doctor.prototype = People.prototype;
//子类的原型 指向 父类的实例化对象
Doctor.prototype = new People();
//子类改变原型指向后 原型链发生紊乱  需要手动修正
Doctor.prototype.constructor = Doctor;
//改变子类的原型后 再去通过原型自定义新的方法
Doctor.prototype.sleep = function(){
    return "是人就得睡觉！管他睡觉打呼噜还是流口水..."
}

//通过父类和子类分别实例化对象
var f = new People("张三丰",123,"男");
var doc = new Doctor("扁鹊",1000,"男","春秋蔡国","扁鹊见蔡桓公，望闻问切");

观察上面控制台信息，还是有一些地方需要优化：

​ 子类的构造函数指向了父类需要优化为指向子类自己的构造函数（上面代码中解决）；

​ 父类和子类有一些共同的参数，需要优化；

​ 原型中有空的参数undefined需要优化。

​

1.2 构造函数式继承

构造函数式继承也叫对象冒充继承。利用 apply 和 call 方法

//定义父类
function Animal(name,age){
    this.name = name;
    this.age = age;
}

Animal.prototype.sayHi = function(){
    return "动物名称：" + this.name + "，动物的年龄：" + this.age;
}

//定义子类
function Bird(name,age,des){
    //利用apply或call改变调用对象
    Animal.apply(this,arguments);

    this.des = des;
}

Bird.prototype.fly = function(){
    return "我想飞的更高..."
}

var bird = new Bird("鹧鸪鸟",4,"我是一只小小小鸟，怎么飞也飞不高！！");

这种方式对 父类和子类有一些共同的参数，进行了优化；

当调用父类原型中的方法时，报错。

说明，这种方式不是真正的继承。

但是，如果是在父类函数中自带的本地属性和方法，可以直接调用。

1.3 组合式继承

原型继承 + aplly继承

//定义父类
function Animal(name,age){
    this.name = name;
    this.age = age;

    this.sayHello = function(){
        return "动物是多种多样，猜我是谁！！！";
    }
}

Animal.prototype.sayHi = function(){
    return "动物名称：" + this.name + "，动物的年龄：" + this.age;
}

//定义子类
function Bird(name,age,des){
    //利用apply或call改变调用对象
    Animal.apply(this,arguments);

    this.des = des;
}

//子类的原型指向父类的实例
Bird.prototype = new Animal();
//修正构造函数
Bird.prototype.constructor = Bird;

Bird.prototype.fly = function(){
    return "我想飞的更高..."
}

var bird = new Bird("鹧鸪鸟",4,"我是一只小小小鸟，怎么飞也飞不高！！");

这种方式解决的问题：父子类参数相同问题，实现真正的继承可以调用父类原型中的方法。

依旧存在的问题：在实例化对象的原型上，存在空的属性。

1.4 寄生式继承

封装一个函数，解决原型上空参数问题。

//定义父类
function Animal(name,age){
    this.name = name;
    this.age = age;
}

Animal.prototype.sayHi = function(){
    return "动物名称：" + this.name + "，动物的年龄：" + this.age;
}

//定义子类
function Bird(name,age,des){
    this.name = name;
    this.age = age;

    this.des = des;
}

//定义一个函数
function extend(F,S){
    var Fn = function () {  };
    Fn.prototype = F.prototype;
    S.prototype = new Fn();
    S.prototype.constructor = S;
}
extend(Animal,Bird);

Bird.prototype.fly = function(){
    return "我想飞的更高..."
}

var bird = new Bird("鹧鸪鸟",4,"我是一只小小小鸟，怎么飞也飞不高！！");

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-23tjXSOd-1692924565703)(JavaScript中的继承.assets/image-20210220153309416.png)]

解决的问题：空参数

依旧存在的问题：父子参数重复

1.5 寄生组合式继承

这是我们建议的最终形态，优化程度较高。

//定义父类
function Animal(name,age){
    this.name = name;
    this.age = age;
}

Animal.prototype.sayHi = function(){
    return "动物名称：" + this.name + "，动物的年龄：" + this.age;
}

//定义子类
function Bird(name,age,des){
    Animal.call(this,name,age);

    this.des = des;
}

//定义一个函数
function extend(F,S){
    var Fn = function () {  };
    Fn.prototype = F.prototype;
    S.prototype = new Fn();
    S.prototype.constructor = S;
}
extend(Animal,Bird);

Bird.prototype.fly = function(){
    return "我想飞的更高..."
}

var bird = new Bird("鹧鸪鸟",4,"我是一只小小小鸟，怎么飞也飞不高！！");

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tff8isPI-1692924565703)(JavaScript中的继承.assets/image-20210220153325867.png)]

优化了：空参数问题 父子重复参数的问题

1.6 ES5中 Object.create() 对继承的优化

//定义父类
function Animal(name, age) {
    this.name = name;
    this.age = age;
}

// 父类原型中的方法
Animal.prototype.sayHi = function () {
    return "动物名称：" + this.name + "，动物的年龄：" + this.age;
}

//定义子类
function Bird(name, age, des) {
    // Animal.call(this, name, age);
    Animal.apply(this, arguments);
    this.des = des;
}

// ES5中 Object.create(obj) 优化继承
Bird.prototype = Object.create(Animal.prototype); //基于 Animal 的原型实例的对象

// 原型继承会造成结构的紊乱，将原型对象的构造函数手动改回到 Bird
Bird.prototype.constructor = Bird;

// 子类原型中的方法
Bird.prototype.fly = function () {
    return "我想飞的更高..."
}

var bird = new Bird("鹧鸪鸟", 4, "我是一只小小小鸟，怎么飞也飞不高！！");

1.7 ES6中的类和继承

// 通过关键字class定义父类 Animal
class Animal {
    // 构造函数，参数为对象的属性
    constructor(props) {
        this.name = props.name || 'Unknown';
        this.age = props.age || 'Unknown';
    }
    // 父类中的共有方法
    sayHi() {
        return "动物名称：" + this.name + "，动物的年龄：" + this.age;
    }
}

// 定义子类，并通过关键字extends继承父类
class Bird extends Animal {
    // 构造函数
    constructor(props, nativeAttri) { //props是继承过来的属性，nativeAttri是子类自己的私有属性
        // 通过关键字super调用实现父类的构造函数，相当于获取父类的this指向
        super(props);
        // 子类的私有属性
        this.species = nativeAttri.species;
        this.des = nativeAttri.des;
    }
    // 子类的私有方法
    fly() {
        return "我想飞的更高..."
    }
}

// 实例化 Bird 对象
var bird = new Bird({
    name: "鹧鸪鸟",
    age: 23
}, {
    species: "鸟类",
    des: "我是一只小小小鸟，怎么飞也飞不高！！"
})

控制台操作：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BusJNRz2-1692924565704)(JavaScript中的继承.assets/image-20210220172350618.png)]

1.8 拓展：构造函数中的拷贝继承

把父类的所有属性和方法，拷贝进子类

// 定义一个父类的构造函数
function Animal() {
}

// 把Animal所有不变的属性，都放到它的prototype对象上
Animal.prototype.species = "动物";

// 父类原型中的方法
Animal.prototype.sayHi = function () {
    return "动物名称：" + this.name + "，动物的年龄：" + this.age;
}

//定义子类
function Bird(name, age, des) {
    this.name = name;
    this.age = age;
    this.des = des;
}

// 拷贝继承（浅拷贝）：把父对象的所有属性和方法，拷贝进子对象
function extend(Child, Parent) {
    // 获取父子构造函数的原型
    var p = Parent.prototype;
    var c = Child.prototype;

    // 遍历父构造函数原型的属性，并将其拷贝到子构造函数的原型上
    for (i in p) {
        c[i] = p[i]
    }

    //为子对象设一个uber属性，这个属性直接指向父对象的prototype属性
    c.uber = p;//uber是向上、上一层的意思，相当于在子对象上打开一条通道，可以直接调用父对象的方法；这句话只是为了实现继承的完备性，纯属备用性质
}
extend(Bird, Animal);

// 实例化一个Bird对象
var bird = new Bird("鹧鸪鸟", 4, "我是一只小小小鸟，怎么飞也飞不高！！");

不同于直接继承父构造函数的prototype：
直接继承父构造函数的prototype，这时改变子构造函数的prototype会引发父构造函数原型的改动。
因为对象属于复杂数据类型，而复杂数据类型的赋值是引用的赋值，跟简单数据类型的赋值是不一样的。
而拷贝之后修改子构造函数原型不会引发父构造函数原型的变化。

三、内置构造函数

3.1 宿主环境所提供的构造函数

宿主环境就是 JS 代码执行的环境，目前所谓的宿主环境其实是浏览器环境

Image对象

var img = document.createElement(“img”);
var img = new Image();

### 3.2 ECMAScript核心语法提供的构造函数

Object    Array   String    RegExp    Date   Function  Number    Boolean   

// Object对象
// var obj = {};
// var obj = new Object();
var obj = Object();

//Array
// var arr = [];
// var arr = new Array();
var arr = Array();

//RegExp
// var patt = /[\u4e00-\u9fa5]/g;
// var patt = new RegExp(/[\u4e00-\u9fa5]/,“g”);
// var patt = new RegExp(“[0-9]”,“g”);
var patt = RegExp(/[0-9]/,“g”);

// Date
var date = new Date();//Tue May 19 2020 15:09:19 GMT+0800 (中国标准时间) “object”
// var date = Date();//“Tue May 19 2020 15:08:54 GMT+0800 (中国标准时间)” “string”

// String
// var str = “hello”; //“string”
// var str = new String(“hello”); //“object”
var str = String(“hello”); //“string”
var arr = str.split(“”);// (5) [“h”, “e”, “l”, “l”, “o”]
/**

• var str = String(“hello”);
• var str2 = new String(str);
• str2.split(“”)
• 调用完成返回切割的数组，移除str2
• */

// Number
// var num = 10;
var num = Number(‘10’);//“number”
// var num = new Number(‘10’);//“object”

// Boolean
// var flag = true;
// var flag = Boolean(undefined);//“boolean”
var flag = new Boolean(undefined);//“object”

// Error
// var error = new Error(“除数不能为0”);
var error = Error(“除数不能为0”);

// Function
// var fn = function(){};//ƒ (){}
// function fn(){}// ƒ fn(){}
// var fn = new Function();//ƒ anonymous(){}
// var fn = Function();//ƒ anonymous(){}

//含有参数和返回值
// var fn = new Function(“a”,“b”,“c”,“return a + b + c”);
//等价于
// var fn = function(a,b,c){
// return a+b+c;
// }

// 返回一个对象 需要的是JSON串格式
var fn = new Function('return ’ + ‘{“name”:“张三丰”,“age”:23}’);
//等价于
// var fn = function(){
// return {
// name:“张三丰”,
// age:23
// }
// }

//总结：Object、Array、RegExp、Error、Function是安全类



### 3.3 内置构造函数之间的关系

JS中除了undefined之外所有的东西都可以看作是对象，函数也是对象；

所有的对象又都可以看作是构造函数Object的实例，Object构造函数也是函数；

所有的函数又是Function的实例；

var fn = new Function();
var arr = [];
var obj = new Object();

console.log(fn instanceof Function);//true
console.log(fn instanceof Array);//false
console.log(fn instanceof Object);//true

console.log(fn.constructor);//ƒ Function() { [native code] }
console.log(fn.constructor instanceof Function);//true
console.log(fn.constructor instanceof Object);//true

console.log(Function instanceof Function);//true
console.log(Function instanceof Object);//true

console.log(arr instanceof Array);//true
console.log(arr instanceof Function);//false
console.log(arr instanceof Object);//true
console.log(arr.constructor instanceof Object);//true
console.log(arr.constructor instanceof Function);//true

console.log(obj instanceof Object);//true
console.log(obj.constructor instanceof Object);//true
console.log(obj.constructor instanceof Function);//true
``