this的指向问题及call()apply()bind()的使用

this的指向问题

函数的不同调用方式决定了this 的指向不同

1.在普通函数中this 的指向

​ 相当于 window.fn() 调用,所以输出结果:

当然 在全局作用于下:

输出结果还是window

所以,在全局作用域或者普通函数中this指向全局对象 window

2.对象的方法this 指向

​ 由o 这个对象调用其方法,所以this 指向 对象 o

​ 所以,在对象的方法中, this指向的是该对象

3.构造函数中this 的指向

​ 当我们new 一个构造函数后会创建一个空对象,让this 会指向这个空对象也就是对象实例

输出结果为:

在原型对象中this 指向

首先我们构造一个函数

​ 前面已经分析所知,当我们new 一个构造函数后会创建一个空对象,让this 会指向这个空对象也就是对象实例,在这里我已经把这个对象实例赋值给了 ldh,所以这个构造函数的this 指向对象实例也就是ldh

​ 这里还有一个构造函数的原型对象,在里面有一个函数,而这个函数会指向谁呢?

​ 这个this 指向谁,只有调用后才能确定,一般情况下this 指向调用者,所以在这里,sing这个函数到底谁再调用,所以想使用原型对象里面的方法,如图:

​ 这样的话就可以调用sing这个方法了,到现在,就基本明白了,在原型对象中这个方法里的this 指向的是ldh 这个实例,我们可以验证下,在外面全局定义一个变量that,在sing这个方法中给赋值,如图:

所得结果:

所以,这个原型对象中的this 也指向的是 实例对象

4.绑定事件函数this 指向

​ 首先,如图所示,当我们点击按钮后打印输出:

所以,绑定事件函数 this 指向的是函数的调用者 btn这个按钮对象

5.定时器函数this 指向

如图所示,相当于

1秒后输出结果为:

所以,定时器函数 this 指向的是window

6.自调用函数中this 指向

输出结果为:

所以,在自调用函数中this 指向window

7.箭头函数this 指向

​ 如图所示,先定义一个对象obj ,在当中有个name 属性,再定义一个普通函数fn,在函数fn中输出this 关键字的值,在fn 函数中,返回一个匿名函数,在匿名函数也输出this 关键字的值,接下来使用call 方法调用fn 函数,将fn 函数中的this 关键字指向obj 对象,此时fn 函数中输出this 关键字的值指向obj 对象;接下来使用resFn 变量接收fn 函数运行之后返回的结果,实际上接收的是fn 函数返回的匿名函数,resFn 变量相当于返回函数的名字,然后调用resFn 函数;注意,虽然函数在全局作用域下被调用,相当于调用window 对象下的resFn 函数,但是函数内部this 关键字不指向window,因为是箭头函数,箭头函数和传统的函数不一样,箭头函数中没有自己的this 关键字,如果在箭头函数中使用this关键字,this 指向的是箭头函数定义的位置,所以在当前代码中,箭头函数被定义在fn 函数中,fn 函数中的this 指向obj,所以resFn 函数中this 也指向obj 对象

所以,箭头函数不绑定this 关键字,箭头函数中的this 指向的是函数定义位置的上下文this

我们再来看到一道面试题:

如图所示,箭头函数this指向的是被声明的作用域里面，而对象没有作用域的，所以箭头函数虽然在对象中被定义，但是this指向的是全局作用域,而全局作用域下没有say 方法,所以结果为undefined

改变函数内部this 指向

改变函数内部this 指向 call()方法,apply()方法和bind()方法

1. call() 方法

语法:fun.call(thisArg,aru1,aru2,…);

​ 调用一个对象,简单理解为调用函数的方式,还可以改变函数的this 指向

​ 如图所示,此时的this 是在普通函数fn 中,所以此时this 指向window

此时,要想改变函数当中this 指向,我们可以用call() 方法

这样就改变了this 指向,而且call()直接调用了函数

call() 方法主要作用可以实现继承

当子构造函数想要继承父构造函数里面的属性,我们可以把父构造函数调用过来而且还要改变父构造函数中的this ,必须指向子构造函数

实例化子构造函数,输出:

2.apply() 方法

语法:fun.apply(this.Arg,[argsArray]);

​ thisArg: 在fun 函数运行时指定this 值

​ argsArray: 传递的值,必须包含在数组里面

与call() 方法一样,调用函数还可以改变函数内部this 指向,不同的是,必须以数组形式传递参数

​ 还是一样,普通函数fn 内部this 指向window,想其this 指向对象o ,还可以用apply()方法

所以输出:

所以,apply()可以直接调用函数,而且还可以改变this 指向,但是参数必须为数组

​ 输出结果为字符串

**如果不是数组则会报错**

apply()方法可以应用:可以利用 apply 借助数学内置对象求最大值和最小值

3. bind() 方法

语法:fun.bind(thisArg,arg1,arg2,…);

​ thisArg:在fun 函数运行时指定的this 值

​ arr1,arr2 : 传递的其他参数

bind()方法不会调用函数,但是能改变产生的新函数内部this 指向

还是一样,普通函数fn 内部this 指向window,想其this 指向对象o ,还可以用bind()方法,但是bind()方法不调用函数

如上图所示,该函数未被调用

所以用f 接收返回的产生新函数 所输出结果:

所以,有的函数不需要立即调用 但是又想改变这个函数内部的this 指向此时用bind()方法

总结:

1.相同点: 都可以改变函数内部this 指向

2.不同点:

​ (1)call() 和apply() 会调用函数,并且改变函数内部的this 指向 ,注意call()方法改变的是产生新函数内部this 指向

​ (2)call() 和apply() 传递的参数不一样, call() 传递参数 aru1,aru2…形式 apply() 必须数组形式[arg]

​ (3) bind() 不会调用函数,可以改变新函数内部this 指向

3.主要应用场景:

​ (1) call() 经常做继承

​ (2)apply() 经常跟数组有关系,比如借助于数学对象实现数组最大值和最小值

​ (3) bind() 不调用函数,但是还想改变this 指向,比如改变定时器内部所产生新函数this 指向