搞懂JavaScript中的this

我心飞翔 分类:javascript

最近在准备面试,同步用文字梳理一下比较重要的知识点:

所有的函数在被调用时,都会创建一个执行上下文

  • 这个上下文中记录着函数的调用栈、函数的调用方式、传入的参数信息等;
  • this也是其中的一个属性;

image.png

  1. 函数在调用时,JavaScript会默认给this绑定一个值;
  2. this的绑定和定义的位置(编写的位置)没有关系;
  3. this的绑定和调用方式以及调用的位置有关系;
  4. this是在运行时被绑定的;

一、this绑定规则

案例一:普通函数调用

  • 该函数直接被调用,并没有进行任何的对象关联;
  • 这种独立的函数调用会使用默认绑定,通常默认绑定时,函数中的this指向全局对象(window);

1.1. 默认绑定

image.png

案例二:函数调用链(一个函数又调用另外一个函数)

  • 所有的函数调用都没有被绑定到某个对象上;

image.png

案例三:将函数作为参数,传入到另一个函数中

image.png

  • 这里的结果依然是window,为什么呢?
  • 原因非常简单,在真正函数调用的位置,并没有进行任何的对象绑定,只是一个独立函数的调用;

1.1. 隐式绑定

另外一种比较常见的调用方式是通过某个对象进行调用的:

  • 也就是它的调用位置中,是通过某个对象发起的函数调用。

案例一:通过对象调用函数

  • foo的调用位置是obj.foo()方式进行调用的
  • 那么foo调用时this会隐式的被绑定到obj对象上

image.png

案例二:案例一的变化

  • 我们通过obj2又引用了obj1对象,再通过obj1对象调用foo函数;
  • 那么foo调用的位置上其实还是obj1被绑定了this;

image.png

案例三:隐式丢失

  • 结果最终是window,为什么是window呢?
  • 因为foo最终被调用的位置是bar,而bar在进行调用时没有绑定任何的对象,也就没有形成隐式绑定;
  • 相当于是一种默认绑定;

image.png

1.3. 显示绑定

隐式绑定有一个前提条件:

  • 必须在调用的对象内部有一个对函数的引用(比如一个属性);
  • 如果没有这样的引用,在进行调用时,会报找不到该函数的错误;
  • 正是通过这个引用,间接的将this绑定到了这个对象上;

如果我们不希望在 对象内部 包含这个函数的引用,同时又希望在这个对象上进行强制调用,该怎么做呢?

  • JavaScript所有的函数都可以使用call和apply方法(这个和Prototype有关)。
  • 它们两个的区别其实非常简单,第一个参数是相同的,后面的参数,apply为数组,call为参数列表;
  • 这两个函数的第一个参数都要求是一个对象,这个对象的作用是什么呢?就是给this准备的。

在调用这个函数时,会将this绑定到这个传入的对象上。
因为上面的过程,我们明确的绑定了this指向的对象,所以称之为 显示绑定。

1.3.1. call、apply

通过call或者apply绑定this对象
显示绑定后,this就会明确的指向绑定的对象

image.png

1.3.2. bind函数

如果我们希望一个函数总是显示的绑定到一个对象上,可以怎么做呢?
image.png

2.3.3. 内置函数

有些时候,我们会调用一些JavaScript的内置函数,或者一些第三方库中的内置函数。

  • 这些内置函数会要求我们传入另外一个函数;
  • 我们自己并不会显示的调用这些函数,而且JavaScript内部或者第三方库内部会帮助我们执行;
  • 这些函数中的this又是如何绑定的呢?

案例一:setTimeout

  • setTimeout中会传入一个函数,这个函数中的this通常是window

image.png
案例二:数组的forEach

数组有一个高阶函数forEach,用于函数的遍历:

  • 在forEach中传入的函数打印的也是Window对象;
  • 这是因为默认情况下传入的函数是自动调用函数(默认绑定);

image.png

1.4. new绑定

JavaScript中的函数可以当做一个类的构造函数来使用,也就是使用new关键字。

使用new关键字来调用函数时,会执行如下的操作:

  1. 创建一个全新的对象;
  2. 这个新对象会被执行Prototype连接;
  3. 这个新对象会绑定到函数调用的this上(this的绑定在这个步骤完成);
  4. 如果函数没有返回其他对象,表达式会返回这个新对象;

image.png

1.5. 规则优先级

new绑定 > 显示绑定(bind)> 隐式绑定 > 默认绑定

二. this规则之外

2.1. 忽略显示绑定

如果在显示绑定中,我们传入一个null或者undefined,那么这个显示绑定会被忽略,使用默认规则:

image.png

2.2. 间接函数引用

另外一种情况,创建一个函数的 间接引用,这种情况使用默认绑定规则。

我们先来看下面的案例结果是什么?

(num2 = num1)的结果是num1的值;

image.png
我们来下面的函数赋值结果:

  • 赋值(obj2.foo = obj1.foo)的结果是foo函数;
  • foo函数被直接调用,那么是默认绑定;

image.png

2.3. ES6箭头函数

箭头函数不使用this的四种标准规则(也就是不绑定this),而是根据外层作用域来决定this。

    ——————————————内容参考《你不知道的JS》及coderwhy的文章
 

回复

我来回复
  • 暂无回复内容