this | 青训营

95 阅读3分钟

this

this 是一个在 JavaScript 中非常重要的关键字,它的值取决于当前执行环境。

在不同的上下文中,this 可能引用不同的对象:

  1. 全局上下文:当在全局作用域中使用 this 时,它将引用全局对象。在浏览器中,全局对象是 window 对象,在 Node.js 环境中,全局对象是 global 对象。

  2. 函数上下文:在函数内部使用 this 时,它的值取决于函数是如何被调用的。有以下几种情况:

    • 作为函数调用:当函数作为普通函数调用时,this 引用全局对象(浏览器中是 window,Node.js 环境中是 global)或者是 undefined(在严格模式下)。
    • 作为对象方法调用:当函数作为对象的方法调用时,this 引用调用该方法的对象。
    • 作为构造函数调用:当函数使用 new 关键字作为构造函数调用时,this 引用新创建的对象。
    • 通过 callapply 或 bind 方法调用:这些方法允许你显式地指定函数执行时的 this 值。
  3. 箭头函数:箭头函数不绑定自己的 this,它会继承包含它的最近的非箭头函数的 this 值。

在使用 this 时,需要明确当前代码所处的执行上下文,以确定 this 的值。

this的作用

  • this可以帮我们简化很多代码。比如xiaoming.namexiaoming.age可以直接写成this.namethis.age
  • 特别是当我们不知道一个对象是什么,或者这个对象没有名字但又很想调用它的时候,就会使用到this对象。

举例:

  • 遍历DOM对象,绑定click事件,调用当前点击的对象的id,而不是所有对象的id。 现在,我们尝试在 myDiv[i].onclick事件中写代码,如果打印:
	console.log(i);  //打印结果为5

如果打印:

	console.log(myDiv[i].id);

上方这行代码,打印会报错,因为i=5;如果想打印每个div的id,应该这样写:

	console.log(this.id);

你看,this的作用,就体现出来了。

PS:顺便提醒一下,上面的代码中,如果把var i改成let i,效果又完全不同了。

全局作用域中的this

当一段代码在浏览器中执行时,所有的全局变量和对象都是在window对象上定义的。换而言之,所有的全局变量和对象都属于window对象。

this的定律

this关键字永远指向函数(方法)运行时的所有者

函数赋值给变量时,this指向window

比如:

var foo1 = args.getInfo;
foo1();

var foo2 = function(){};
foo2();

this都是指向window。

以函数形式调用时,this永远都是window

以方法的形式调用时,this是调用方法的对象

解决闭包中的this指向问题

内部函数是可以访问到外部函数的变量的。

方式一:直接通过父函数的名字访问

方式二:如果不知道父函数的名字,在父函数里加一句_this = this,此时_this相当于父函数的名字。