this的指向以及call、apply和bind

98 阅读2分钟

本文已参与「新人创作礼」活动,一起开启掘金创作之路。

1、 什么是this

this 是由 JavaScript 引擎在执行函数时自动生成的,存在于函数内的一个动态指针,指代当前调用对象。

在不同的场景中调用同一个函数,this 的指向也可能会发生变化,但是它永远指向其所在函数的真实调用者(谁调用就指向谁);如果没有调用者,this 就指向全局对象 window。

2、 this的五种情况

a.作为普通函数执行时,this指向window;

image.png

image.png

b.当函数作为对象的方法被调用时,this指向该对象;

image.png

this指向的它上一级的对象

image.png

c、构造器调用,this指向返回的这个对象(如果用了return,返回值不是一个对象那么this还是指向函数的实例);

image.png

d、箭头函数的this绑定看的是this所在函数定义在哪个对象下,就绑定哪个对象。如果有嵌套的情况,则this绑定到最近的一层对象上;

image.png

e、基于Function.prototype上的apply、call、bind调用;

3、 call、apply、bind

三者都是用来改变this的指向

a.区别

call( ) 和 apply( )
  • 相同点:都是调用一个对象的一个方法,用另一个对象替换当前对象(功能相同)

    B.call(A, args1, args2); ---- A对象调用B对象的方法

    F.apply(G, arguments); ---- G对象调用F对象的方法、

  • 不同点:参数书写方式

call( ) 的第一个参数是this要指向的对象,后面传入的是参数列表,参数为任意类型; ----当第一个参数为null、undefined的时候,默认指向window

apply( ) 第一个参数是this要指向的对象,第二个参数是数组;

image.png

image.png

call( ) 和 bind( )
  • 相同点:都是用来改变this指向

不同点:call( ) 改过this的指向后,会再执行函数,bind( ) 改过this后,不执行函数,会返回一个绑定新this的函数。

  • bind也可以有多个参数,且参数可以执行的时候再次添加(参数按照形参的顺序进行的),bind改变this指向后不会立即执行,而是返回一个永久改变this指向的函数(见下图)。

image.png

image.png

b、call( )的应用

  • 利用call( ) 判断数据类型

在判断数据类形式使用typeof,一般不是太准确的,我们可以使用Object.prototype.toString.call()方法来判断一个数据的数据类型

image.png

image.png

  • 利用call( ) 翻转字符串

image.png

c、spply( )的应用

  • 利用apply( ) 求最大值

image.png