zhuyutang

1.this的使用场景

我们先把this的使用场景分为两大类:函数外和函数内:
函数外的this
就是在全局代码里,直接使用this:

"use strict";

let name = "window";
console.log(this);
console.log(this.name);

// Window
// 'window'

从结果看,在函数外的this指向很简单,就直接指向的是全局变量Window对象,(浏览器环境,以下代码都是在浏览器环境)
而且严格模式或非严格模式都是。

函数内部的this
而在函数内部使用的时候,就可以分为以下几类:

  1. 函数独立调用
  2. 函数作为对象的方法被调用
  3. 函数作为构造函数调用
  4. 函数通过call,apply,bind调用

this指向确定的时间
在分析不同情况this的指向之前,我们确认一个很重要的问题,就是this的指向是什么时间确定的。
在说这个问题之前,需要简单说一下执行上下文,如果有看过: js的闭包、执行上下文、作用域链 这篇文章,我们就会知道执行上下文包含三个部分:

  • 变量对象
  • 作用域链
  • this指向

我们发现this其实执行上下文的一部分,当代码需要用到this的时候,也是从这里取的。所以执行上下文创建的时间,就是this确定的时间。
执行上下文的创建时间是:函数被调用,但是还没执行具体代码之前。
所以this的指向确定的时间也就明确了:当函数被调用的时候,才开始确定this指向。

2.分场景分析this指向

在了解了this被确定的时间后,我们现在来按上面所列出的场景,来具体分析在函数里面的this:

2.1 函数独立调用时
函数对立调用,其实就是我们最常见的以函数名直接调用函数:

// code-01-非严格模式
var name = "window";
function fun() {
  var name = "function";
  console.log(this);
  console.log(this.name);
}
fun()
// >> Window
// >> 'window'

我们看到,当这样调用函数时,this指向的是全局对象Window,所以this.name就相当于Window.name:'window',而不是函数的内部变量name='function'
这里有一点需要说明的是,这是在非严格模式下,那如果是在严格模式下呢?我们看下面的例子:

// code-01-严格模式

"use strict"
var name = "window";
function fun() {
  var name = "function";
  console.log(this);
  console.log(this.name);
}
fun()
// >> undefined
// >> 报错

从结果来看,在严格模式下,独立调用函数时,函数内部的this指向是 undefined
其实应该这么说:不管是严格模式还是非严格模式,独立调用函数时,函数内部的this指向都是 undefined,只不过在非严格模式下,js会自动把undefined的this默认指向全局对象:Window

2.2 函数作为对象的方法调用
函数作为一个对象的方法调用,我们举例来看:

//code-02 作为对象成员方法调用函数
    var name = "window";
    var obj = {
      name: "obj",
      fun: function () {
        console.log(this.name);
      },
      child: {
        name: "child",
        fun: function () {
          console.log(this.name);
        },
      },
    };
    // 作为成员方法调用
    obj.fun();
    // 'obj'

    // 多级调用
    obj.child.fun();
    // 'child'

    // 赋值后调用
    let fun = obj.fun;
    fun();
    // 'window'

我们下面来分析下上面的代码结果:

  • obj.fun()
    首先我们从打印的结果来看,这里的this等于obj对象。
    所以当函数作为某个对象的方法来调用的时候,this指向这个方法所属的对象。

  • obj.child.fun();
    从打印的结果来看,这里this等于obj.child对象。
    所以不管是多少级的调用,this指向最近的所属对象。

  • var fun = obj.fun; fun();
    从打印的结果来看,这里this等于全局对象window。window.name = 'window'
    从代码看,这里先做了一个赋值操作,把函数obj.fun赋值给了变量fun, 上面我们有说到this的确定时间是在函数被调用的时候,这时候函数并没有被调用,只是做了赋值操作,所以这一步的时候,this并没有确定。
    当执行到fun()的时候,函数被调用,this在这个时候要确定指向,这时候就相当于是作为独立函数调用,应该指向的是undefined,但是在非严格模式下,undefined的this会默认指向全局变量window。
    所以this.name == window.name == 'window'。如果是严格模式,this.name == undefined.name,会报错。

2.3 函数作为构造函数调用
函数作为构造函数的情况,可以分为两种:

  1. 构造函数无返回
  2. 构造函数有返回值
    a. 返回一个对象
    b. 返回其他非对象的值

下面我们分别来看:

构造函数无返回
这是构造函数最常用的情况,直接来看代码:

//code-03 函数作为构造函数(无返回)

let _this;
function User(name, age) {
  this.name = name;
  this.age = age;
  _this = this;
  console.log(this);
  // {name:"xiaoming",age:27}
}

let xiaoming = new User("xiaoming", 27);
console.log(_this === xiaoming);

// true

从结果来看,我们知道当函数作为构造函数的时候,该函数里面的this等于这个构造函数new的实例对象,就是这里的对象xiaoming。从【机制】JavaScript的原型、原型链、继承这篇可以知道操作符new实际上做了什么事情。

构造函数有返回
如果返回的是非对象,则返回值会被忽略,情况等同于无返回。
下面就只讨论返回值为一个对象的情况:

//code-03 函数作为构造函数(返回对象)

let _this;
function User(name, age) {
  this.name = name;
  this.age = age;

  _this = this;
  console.log(this);
// {name:'xiaoming',age:27}

  let obj = {
    name: "obj",
  };
  return obj;
}
let xiaoming = new User("xiaoming", 27);

console.log(xiaoming);
// {name:'obj'}

console.log(_this === xiaoming);
// false

从结果来看,当构造函数返回一个对象时,它new出来的实例就等于它返回的对象(xiaoming === obj),而构造函数的内部this并没有起到任何作用。

2.4 函数通过call,apply,bind调用
call,apply,bind都是可以指定this的值。

// code-04 指定this

function fun(name, age) {
  console.log(name, age, this);
}
let obj = {
  name: "obj",
};

fun.call(obj, "obj", 27);
fun.apply(obj, ["obj", 27]);
let funBind = fun.bind(obj, "obj", 27);
funBind();

// 结果返回都一样
// 'obj' 27 {name:obj}

call,apply,bind:
相同点:都可以指定函数内部的this值,参数的第一个即为this的值。
不同点:

  • call:fun参数(name,age),由call函数的第2,3..参数依次赋值。
  • apply:fun参数(name,age),由apply函数的第2个参数赋值,第二个参数是一个数组,所存的值依次赋值给fun参数。
  • bind:fun参数(name,age)赋值方式同call,但bind返回的是一个函数,而不是直接执行fun。

3.几种特殊情况

在说明了上面常用情景后,我们来分析几种特殊的情况:

数组成员
当函数作为数组的成员时:

// code-05 函数作为数组成员

function arrFun() {
  console.log(this.length);
  console.log(this === arr);
}
let arr = [1, 2, arrFun];
arr[2]();

// 3
// true

从结果看,我们知道当函数作为数组的成员的时候,此函数内部的this指向的是当前数组。
可以这样理解:arr[2] == arr["2"], 类似于对象的成员方法。

事件绑定
函数作为绑定事件时:

// code-06 事件绑定

<button id="btn">点击</button>

document.getElementById("btn").addEventListener("click", function () {
  console.log(this);
});

// <button id="btn">点击</button>

从结果看,我们知道当函数作为事件被绑定时,此函数内部的this指向的是绑定了该事件的dom元素。

异步函数:promise,setTimeout
异步执行函数的时候分为promise和setTimeout情况(关于异步机制可以参看 【机制】 JavaScript的事件循环机制总结 eventLoop):

// code-07 异步函数

"use strict";

setTimeout(function () {
  console.log("setTimeout:", this);
});

new Promise(function (resolve) {
  console.log("start");
  resolve();
}).then(function () {
  console.log("promise:", this);
});

// start
// promise: undefined
// setTimeout: Window

从结果来看,我们知道其实 setTimeout执行的函数下的this,相当于是在全局环境下的this:执行全局变量 Window对象,严格模式和非严格模式都一样。
promise下执行的函数其实相当于函数独立执行的情况:严格模式this等于undefined,非严格模式下会默认把undefined的this指向Window。

箭头函数
其实箭头函数本身没有this,它里面的this指向的是外部作用域中的this:

// code-08 箭头函数

"use strict";

let Obj = {
  name: "obj",
  fun_1: () => {
    console.log(this);
  },
  fun_2() {
    let fun = () => {
      console.log(this);
    };
    fun();
  },
};
Obj.fun_1();
// Window

Obj.fun_2();
// Obj

function foo() {
  setTimeout(() => {
    console.log(this);
  });
}

foo.call({ id: 42 });
// {id:42}

Obj.fun_1()
fun_1是箭头函数,本身没有this。它的外层作用域就是全局作用域,所以箭头函数的this指向的是全局作用域下的this:Window

Obj.fun_2()
fun_2函数内部的fun是箭头函数,本身没有this。它的外层作用域就是fun_2,而fun_2的this是调用它的对象Obj,所以箭头函数的this指向的也是Obj。

foo.call({ id: 42 })
foo函数用call调用,于是foo的this为{id:42}。本来setTimeout内部的函数this指向的是Widow,但是因为它是箭头本身没有this,箭头函数的this指向的是外部作用域的this,在这里就是foo的this:{id:42}。

-- 完 --

相关文章: