JavaScript中this总结-白红宇

JavaScript中this总结

阅读量：6496 次

发布时间：2019-06-24

本文共 5040 字，大约阅读时间需要 16 分钟。

JavaScript中的this实际上是在函数被调用时发生的绑定，它指向什么完全取决于函数在哪里被调用。

先来列举一下都有哪些函数调用方式：

普通函数调用

对象方法调用

call()、apply() 调用

bind()

构造函数调用

ES6箭头函数

通俗来说，“函数被谁调用，this就指向谁”。

普通函数调用

函数在全局作用域下运行；在非严格模式下，this指向全局对象window，在严格模式下，this会变成undefined。

function foo1(){  return this;}foo1() === window; // true function foo2(){  'use strict';  return this;}foo2() === undefined; // true

对象方法调用

当以对象里的方法的方式调用函数时，它们的this是调用函数的对象。

function foo() {  console.log(this); // {x: 1, foo: ƒ}  console.log(this.x); // 1}var obj = {  x: 1,  foo: foo};obj.foo();

上面代码中，调用foo的是对象obj ，所以这里的this指向对象obj。

如果将对象里的foo方法赋给一个变量：

function foo() {  console.log(this); // window  console.log(this.x); // undefined}var obj = {  x: 1,  foo: foo};var fn = obj.foo;fn();

将obj.foo赋给了fn变量，而fn是在全局作用域中运行，因此this指向window，由于window下没有x这个变量，所以this.x为undefined。

如果把obj.foo传递给一个自己声明的函数。

function foo() {  console.log(this); // window  console.log(this.x); // undefined}var obj = {  x: 1,  foo: foo};// 自定义函数function todoFn(cb) {  cb();    };todoFn(obj.foo);

将obj.foo传递给自定义函数作为回调函数执行。结果一样。因为它仍然是在全局作用域中运行。

最后来看看在setTimeout()中又会输出怎样的结果。

function foo() {  console.log(this); // {x: 1, foo: ƒ}  setTimeout(function(){    console.log(this); // window  }, 0);}var obj = {  x: 1,  foo: foo}obj.foo();

第一个this还是对象方法调用方式；但在setTimeout()里的this指向的是全局作用域window。为什么会这样？

原因是，由setTimeout()调用的代码运行在与所在函数完全分离的执行环境上，该函数是在全局作用域中执行的，所以this就指向 window。

思考一个问题。

上面代码的后三段代码中，都出现了同样的问题，就是它们的this都丢失了。怎么做才能让它们的this仍然指向原来的对象？

后面即将提到的call()、apply()及bind()方法都能解决这一问题。

call()、apply() 调用

使用call()或者apply()可以改变上下文的this值。

// 定义一个对象var obj = {  x: 'local'};// 定义一个全局变量var x = 'global';// 定义函数，返回值取决于调用方式function speak(){  return this.x;}speak(); // "global"speak.call(obj); // "local"speak.apply(obj); // "local"

直接调用sayName()时，相当于普通函数调用，this指向window，值为global；使用call()或apply()作用一致，都让this指向了对象obj。只不过在给call()和apply()传递参数时有区别，如：

function add(c, d) {  return this.a + this.b + c + d;}var obj = {  a: 1,  b: 2};// 第一个参数作为 this 使用的对象，而后续参数作为参数传递给函数add.call(obj, 3, 4); // 10// 第一个参数同样是作为 this 使用的对象// 第二个参数是传递一个数组add.apply(obj, [3, 4]); // 10

bind() 方法

Function.prototype.bind()会创建一个新的包装函数，这个函数会忽略它当前的this绑定（无论绑定的对象是什么），并把我们提供的对象绑定到this上。

var x = 9;var obj = {  x: 81,  getX: function() {    return this.x;  }};// 相当于对象方法调用，this指向对象 oobj.getX(); // 81// 将对象 o 的方法getX赋值给 f，f 执行时是在全局环境中，this指向全局作用域var f = obj.getX;f(); // 9// 创建一个新函数，将this绑定到对象 o 中var f2 = obj.getX.bind(o);f2(); // 81

接着上面【对象方法调用】里的几个丢失this的例子。如何用call()

、apply()或bind()来绑定this到指定的对象。

先看看这个例子：

function foo() {  console.log(this); // {x: 1, foo: ƒ}  console.log(this.x); // 1}var obj = {  x: 1,  foo: foo};// 使用call()或apply()var fn1 = obj.foo;fn1.call(obj);//fn.apply(obj);// 使用bind()var fn2 = obj.foo.bind(obj);fn2();

再看这个回调函数的例子：

function foo() {  console.log(this); // {x: 1, foo: ƒ}  console.log(this.x); // 1}var obj = {  x: 1,  foo: foo};// 自定义函数function todoFn(cb) {  cb.call(obj);  // cb.apply(obj);};todoFn(obj.foo);

只需要在执行回调函数的时候使用call()或apply()将this绑定到obj对象即可。

最后看定时器的例子：

function foo() {  console.log(this); // {x: 1, foo: ƒ}  setTimeout(function(){    console.log(this); // {x: 1, foo: ƒ}  }.bind(this), 0);}var obj = {  x: 1,  foo: foo}obj.foo();

这里是使用了bind()方法，将上下文的this绑定到定时器里的匿名函数，它最终还是指向对象obj。

构造函数调用

如果函数或者方法调用之前带有关键字new，它就构成构造函数调用。使用new来调用函数，或者说发生构造函数调用时，会自动执行下面的操作。

创建（或者说构造）一个全新的对象。

这个新对象会被执行 [[ 原型 ]] 连接。

这个新对象会绑定到函数调用的this。

如果函数没有返回其他对象，那么new表达式中的函数调用会自动返回这个新对象。

来看一个例子：

function foo(x){  this.x = x;  console.log(this); // foo {x: 2}}var f = new foo(2); console.log(f.x); // 2

使用new来调用foo()时，会构造一个新对象并把它绑定到foo()调用中的this上。即构造函数的this指向它实例化出来的对象。

箭头函数

箭头函数本身没有this，是根据外层（函数或者全局）作用域来决定this。

先来看一个例子：

var x = 1;function testFn() {  var fn1 = function() {    console.log(this); // window    console.log(this.x); // 1  }  var fn2 = () => {    console.log(this); // window     console.log(this.x); // 1  }  fn1();   fn2(); }testFn();

两段代码输出的结果一致。但运行的机制不一样。

fn1是普通函数调用，前面说过普通函数调用this指向window；

fn2是箭头函数，它会继承外层函数testFn的this，而testFn是在全局作用域中运行的，所以它的this是window，因此fn2箭头函数的this也是window。

对上面对例子做一点改动：

var x = 1;function testFn() {  var fn1 = function() {    console.log(this); // window    console.log(this.x); // 1  }  var fn2 = () => {    console.log(this); // {x: 2}     console.log(this.x); // 2  }  fn1();   fn2(); }testFn.call({ x: 2 });

改变了testFn的调用方式。

fn1依然是普通函数调用，this指向window；

fn2箭头函数依然是继承它外层函数testFn的this，但这里testFn通过call使this指向了对象{id: 2}，所以fn2的this也指向该对象。

接着上面【对象方法调用】里的setTimeout例子。如果使用箭头函数会怎样？

function foo() {  console.log(this); // {x: 1, foo: ƒ}  console.log(this.x); // 1  setTimeout(() => {    console.log(this); // {x: 1, foo: ƒ}    console.log(this.x); // 1  }, 0);}var obj = {  x: 1,  foo: foo}obj.foo();

这里定时器回调的this由它外层函数foo的作用域决定，而foo是由obj调用，所以它的this指向对象obj，所以定时器的this也指向对象obj。

另外，由于箭头函数没有自己的this，所以当然也就不能用call()、apply()、bind()这些方法去改变this的指向。