JS高级之class，构造函数原型和this

this和this指向问题

this最简单的解释就是谁调用它，它就指向谁。

改变this指向

call方法 多用于继承，自调用函数

函数.call(thisArg,params,params)
thisArg   在fun 函数运行时指定的this 值 改变this
params  传递其他参数
有返回值

apply方法 多用于数组，自调用函数

函数.apply(thisArg,params)
thisArg   在fun 函数运行时指定的this 值 改变this
params  传递其他参数，必须是数组
有返回值  最多只能有两个参数

bind方法 不会自动调用函数

函数.apply(thisArg,params,params)
thisArg   在fun 函数运行时指定的this 值 改变this
params  传递其他参数
有返回值

class

创建一个标准class类

class Star {
       //类名首字母大写
    //属性：要放到构造函数中
    //当new一个类时，就会自动执行构造函数，这时我们会传参属性传递给构造函数
    constructor(name,age) {
     
		//构造函数中的this指向实例对象
        this.name = name;
        this.age = age;
    }
    //是方法，也是函数名，方法会在原型对象中储存显示
    chang() {
     
        //方法里的this指向调用者
        console.log(this);
	}
}

class类实际上是个“特殊的函数”，就像你能够定义的函数表达式和函数声明一样。注意：类的声明不会提示(类似于var变量提升和函数声明提升)，你需要先定义它，才能访问使用

类的继承

// 类的继承
// 父类
class Father {
     
    constructor (uname, age) {
     
        this.uname = uname;
        this.age = age;
    }
    qian () {
     
        console.log('赚他一个亿');
    }
}
// 子类
class Son extends Father{
     
    // 因为this指向不同
    constructor (uname, age, score) {
     
        // super：可以调用父类的构造函数和方法
        super(uname, age);
        this.score = score;
    }
}

class和js普通构造函数的区别

​ 1.class语法上更加贴合面向对象的写法

​ 2.class在继承上更加易读，易理解

​ 3.更易于写java等后端语言

JS的构造函数

创建一个构造函数

// 声明一个自定义构造函数，首字母必须大写
function Studay (params) {
       // 这里可以传参，可以简单数据格，也可以是复杂数据格式，假设这里传了个对象
	// 这里可以定义一些构造函数的属性
	this.book = params.book
	this.tool = params.tool
	// 在构造函数中我们一般把方法放在该函数中的原型中，在调用该方法时在原型中查找并调用
	Studay.prototype.say = function () {
     
		console.log("唱歌")
	}
}

使用构造函数中的方法

使用构造函数，必须使用new关键字调用，得到原型对象

const fn = new Studay(obj) // 在new时传入参数,obj代表一个对象
fn.say()  // 调用构造函数中的方法

在构造函数中我们提到两个词原型对象，原型。他们之间的关系是什么样呢？

Star.prototype === ldh.proto

从图可以看出，每个构造函数都有prototype指向原型对象，每个实例对象都有protp指向原型对象，每个原型对象都有constructor指向构造函数

原型链

​ 从图可以看出，每个实例对象都有proto指向原型对象，当一个对象在查找一个属性或方法时，会在实例对象的原型中查找该方法，如果当前原型对象中没有该方法，会在原型的上一级原型对象中查找该方法，直到为null。