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

this和this指向问题

this最简单的解释就是谁调用它,它就指向谁。
JS高级之class,构造函数原型和this_第1张图片

改变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()  // 调用构造函数中的方法

在构造函数中我们提到两个词原型对象,原型。他们之间的关系是什么样呢?
JS高级之class,构造函数原型和this_第2张图片
Star.prototype === ldh.proto

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

原型链

JS高级之class,构造函数原型和this_第3张图片
​ 从图可以看出,每个实例对象都有proto指向原型对象,当一个对象在查找一个属性或方法时,会在实例对象的原型中查找该方法,如果当前原型对象中没有该方法,会在原型的上一级原型对象中查找该方法,直到为null。

你可能感兴趣的:(this,构造函数,原型,前端,javascript,es6,class)