JS函数的this指向

cocoCola91667
44 阅读10分钟

为什么需要this？

在常见的编程语言中，几乎都有this这个关键字（Objective-C中使用的是self），但是JavaScript中的this和常见的面向对象语言中的this不太一样。

常见面向对象的编程语言中，比如Java、C++、Swift、Dart等等一系列语言中，this通常只会出现在类的方法中。也就是你需要有一个类，类中的方法（特别是实例方法）中，this代表的是当前调用对象。

但是JavaScript中的this更加灵活，无论是它出现的位置还是它代表的含义。我们来看一下编写一个obj的对象，有this和没有this的区别：

this指向什么呢？

我们先说一个最简单的，this在全局作用于下指向什么？这个问题非常容易回答，在浏览器中测试就是指向window。

但是，开发中很少直接在全局作用于下去使用this，通常都是在函数中使用。

所有的函数在被调用时，都会创建一个执行上下文，这个上下文中记录着函数的调用栈、AO对象等，this也是其中的一条记录。

this到底指向什么呢？

我们先来看一个让人困惑的问题：定义一个函数，我们采用三种不同的方式对它进行调用，它产生了三种不同的结果：

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

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

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

  • 绑定一：默认绑定；
  • 绑定二：隐式绑定；
  • 绑定三：显示绑定；
  • 绑定四：new绑定；

规则一：默认绑定

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

独立的函数调用我们可以理解成函数没有被绑定到某个对象上进行调用；我们通过几个案例来看一下，常见的默认绑定。

上面的this都是window，独立函数的调用，this都是window。

规则二：隐式绑定

另外一种比较常见的调用方式是通过某个对象进行调用的：也就是它的调用位置中，是通过某个对象发起的函数调用。：

上面的this分别是obj对象， obj1对象，window对象。

规则三：显示绑定

隐式绑定有一个前提条件：必须在调用的对象内部有一个对函数的引用（比如一个属性）；如果没有这样的引用，在进行调用时，会报找不到该函数的错误；正是通过这个引用，间接的将this绑定到了这个对象上；

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

JavaScript所有的函数都可以使用call和apply方法（这个和Prototype有关）。

它们两个的区别这里不再展开；其实非常简单，第一个参数是相同的，后面的参数，apply为数组，call为参数列表；这两个函数的第一个参数都要求是一个对象，这个对象的作用是什么呢？就是给this准备的。

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

call、apply、bind

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

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

内置函数的绑定思考

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

setTimeout、div的点击、数组的forEach

  1. setTimeout里面的函数是直接作为独立函数调用的，所以打印this是window
  2. onclick里面的this是通过boxDiv.onclick调用的，也就是隐式绑定，所以this是那个div
  3. 数组的forEach等方法，函数里面的this默认是独立调用的，也就是this是window，我们也可以传入第二个参数，将this修改为我们想要的对象

new绑定

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

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

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

规则优先级

学习了四条规则，接下来开发中我们只需要去查找函数的调用应用了哪条规则即可，但是如果一个函数调用位置应用了多条规则，优先级谁更高呢？

  1. new绑定 > 显示绑定 > 隐式绑定 > 默认绑定
  2. new和call、apply都是主动调用一个函数，所以不允许同时使用，new可以和bind一起使用

this规则之外 – 忽略显示绑定

我们讲到的规则已经足以应付平时的开发，但是总有一些语法，超出了我们的规则之外。（神话故事和动漫中总是有类似这样的人物）

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

this规则之外 - 间接函数引用

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

赋值语句(obj2.foo = obj1.foo)的结果是foo函数；foo函数被直接调用，那么是默认绑定；

箭头函数 arrow function

箭头函数是ES6之后增加的一种编写函数的方法，并且它比函数表达式要更加简洁：

  • 箭头函数不会绑定this、arguments属性；
  • 箭头函数不能作为构造函数来使用（不能和new一起来使用，会抛出错误）；

箭头函数如何编写呢？

(): 函数的参数
{}: 函数的执行体

箭头函数的编写优化

  1. 如果只有一个参数()可以省略

  1. 如果函数执行体中只有一行代码, 那么可以省略大括号, 并且这行代码的返回值会作为整个函数的返回值

  1. 如果函数执行体只有返回一个对象, 那么需要给这个对象加上()

this规则之外 – ES6箭头函数

在ES6中新增一个非常好用的函数类型：箭头函数，箭头函数不使用this的四种标准规则（也就是不绑定this），而是根据外层作用域来决定this。

我们来看一个模拟网络请求的案例：

这里我使用setTimeout来模拟网络请求，请求到数据后如何可以存放到data中呢？

我们需要拿到obj对象，设置data；但是直接拿到的this是window，我们需要在外层定义：var _this = this，在setTimeout的回调函数中使用_this就代表了obj对象。

ES6箭头函数this

之前的代码在ES6之前是我们最常用的方式，从ES6开始，我们会使用箭头函数。

为什么在setTimeout的回调函数中可以直接使用this呢？因为箭头函数并不绑定this对象，那么this引用就会从上层作用于中找到对应的this。

思考：如果getData也是一个箭头函数，那么setTimeout中的回调函数中的this指向谁呢？

面试题一：

面试题二：

面试题三：

面试题四：

实现apply、call、bind

接下来我们来实现一下apply、call、bind函数，注意：我们的实现是练习函数、this、调用关系，不会过度考虑一些边界情况。

自定义call的实现

// 给所有的函数添加一个hycall的方法
// 参数使用ES6的剩余参数,args是个数组
Function.prototype.hycall = function(thisArg, ...args) {
  // 1.获取需要被执行的函数
  var fn = this

  // 2.对thisArg转成对象类型(防止它传入的是非对象类型,比如数字)
  thisArg = (thisArg !== null && thisArg !== undefined) ? Object(thisArg): window

  // 3.将需要调用的函数添加到thisArg上,然后再调用
  thisArg.fn = fn
  var result = thisArg.fn(...args) // 展开运算符展开数组
  delete thisArg.fn  // 调用后再删除这个属性

  // 4.将最终的结果返回出去
  return result
}
自定义apply的实现
// 自己实现hyapply
Function.prototype.hyapply = function(thisArg, argArray) {
  // 1.获取到要执行的函数
  var fn = this

  // 2.处理绑定的thisArg
  thisArg = (thisArg !== null && thisArg !== undefined) ? Object(thisArg): window

  // 3.执行函数
  thisArg.fn = fn
  // 如果第二个参数没传,默认就是undefined,解构的时候会出错,所以第二个参数不传的时候我们给空数组
  // argArray = argArray ? argArray: []
  argArray = argArray || []
  var result = thisArg.fn(...argArray)
  delete thisArg.fn

  // 4.返回结果
  return result
}
自定义bind的实现
Function.prototype.hybind = function(thisArg, ...argArray) {
  // 1.获取到真实需要调用的函数
  var fn = this

  // 2.绑定this
  thisArg = (thisArg !== null && thisArg !== undefined) ? Object(thisArg): window

  function proxyFn(...args) {
    // 3.将函数放到thisArg中进行调用
    thisArg.fn = fn
    // 特殊: 对两个传入的参数进行合并,bind传的参数在前面,新函数传的参数在后面
    var finalArgs = [...argArray, ...args]
    var result = thisArg.fn(...finalArgs)
    delete thisArg.fn

    // 4.返回结果
    return result
  }

  return proxyFn
}

上面代码其实还可以优化，因为传入的对象中有可能也有fn，我们可以使用Symbol来解决。

认识arguments

arguments是函数中的一个类数组(array-like)对象，保存在函数对应的AO对象中。

arguments可以可以获取函数参数的一些信息，常见的操作有：

  1. 参数的长度
  2. 根据索引获取参数
  3. 根据arguments.callee获取参数所在的函数

array-like意味着它不是一个数组类型，而是一个对象类型，但是它却拥有数组的一些特性，比如说length，比如可以通过index索引来访问；但是它却没有数组的一些方法，比如forEach、map等。

arguments转成array

function foo(num1, num2) {
  // 方式1: 通过遍历
  var newArr = []
  for (var i = 0; i < arguments.length; i++) {
    newArr.push(arguments[i] * 10)
  }
  console.log(newArr)

  // 方式2.1:
  // Array.prototype.slice将arguments转成array
  // 因为slice方法的内部就是通过遍历arguments,然后返回新数组
  var newArr2 = Array.prototype.slice.call(arguments)
  console.log(newArr2)

  // 方式2.2: 当然我们这样写也是可以的
  var newArr3 = [].slice.call(arguments)
  console.log(newArr3)

  // 方式3.1: ES6的语法
  var newArr4 = Array.from(arguments)
  console.log(newArr4)
  // 方式3.2: ES6的语法,通过数组结构
  var newArr5 = [...arguments]
  console.log(newArr5)
}

箭头函数不绑定arguments

注意：箭头函数是不绑定arguments的，所以我们在箭头函数中使用arguments会去上层作用域查找。

注意：在全局作用域下：

  • 对于浏览器，没有arguments
  • 对于Node，有arguments。这是因为在Node中一个js文件就是一个模块，Node会加载这个模块，编译其中的代码，然后将编译之后的代码放到一个函数中，然后这个函数再通过call({})调用，所以最后绑定的this是空对象。通过call({})调用函数的时候，后面的参数就会被放到这个函数对应的arguments里面。

由于全局作用域下没有arguments，如果我们又想拿到所有参数，怎么办呢？ 可以使用...args剩余参数，所以ES6之后我们推荐使用剩余参数代替arguments。

avatar
文章
阅读
粉丝