JS高级编程课件01_JavaScript高级-this指向.pdf

JavaScript函数this指向

王红元coderwhy

目录

1this的绑定规则

content

2apply/call/bind

3this绑定优先级

4绑定之外的情况

5箭头函数的使用

6this面试题分析

coderwhythis到底指向什么呢？

◼我们先来看一个让人困惑的问题：

定义一个函数，我们采用三种不同的方式对它进行调用，它产生了三种不同的结果

◼这个的案例可以给我们什么样的启示呢？

1.函数在调用时，JavaScript会默认给this绑定一个值；

2.this的绑定和定义的位置（编写的位置）没有关系；

3.this的绑定和调用方式以及调用的位置有关系；

4.this是在运行时被绑定的；

◼那么this到底是怎么样的绑定规则呢？一起来学习一下吧

绑定一：默认绑定；

绑定二：隐式绑定；

绑定三：显示绑定；

绑定四：new绑定；

coderwhy规则一：默认绑定（讲过）

◼什么情况下使用默认绑定呢？独立函数调用。

独立的函数调用我们可以理解成函数没有被绑定到某个对象上进行调用；

◼我们通过几个案例来看一下，常见的默认绑定

coderwhy规则二：隐式绑定（讲过）

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

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

◼我们通过几个案例来看一下，常见的默认绑定

coderwhy规则三：显式绑定

◼隐式绑定有一个前提条件：

必须在调用的对象内部有一个对函数的引用（比如一个属性）；

如果没有这样的引用，在进行调用时，会报找不到该函数的错误；

正是通过这个引用，间接的将this绑定到了这个对象上；

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

◼JavaScript所有的函数都可以使用call和apply方法。

第一个参数是相同的，要求传入一个对象；

✓这个对象的作用是什么呢？就是给this准备的。

✓在调用这个函数时，会将this绑定到这个传入的对象上。

后面的参数，apply为数组，call为参数列表；

◼因为上面的过程，我们明确的绑定了this指向的对象，所以称之为显式绑定。

coderwhycall、apply、bind

◼通过call或者apply绑定this对象

显示绑定后，this就会明确的指向绑定的对象

◼如果我们希望一个函数总是显示的绑定到一个对象上，可以怎么做呢？

使用bind方法，bind()方法创建一个新的绑定函数（boundfunction，BF）；

绑定函数是一个exoticfunctionobject（怪异函数对象，ECMAScript2015中的术语）

在bind()被调用时，这个新函数的this被指定为bind()的第一个参数，而其余参数将作为新函数的参数，供调用时使用。

coderwhy内置函数的绑定思考

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

这些内置函数会要求我们传入另外一个函数；

我们自己并不会显示的调用这些函数，而且JavaScript内部或者第三方库内部会帮助我们执行；

这些函数中的this又是如何绑定的呢？

◼setTimeout、数组的forEach、div的点击

coderwhynew绑定

◼Ja