JavaScript中this指向的简单判断法则

作者:青柠时间:2026-10-22 07:51:58浏览:484

本文总结了JavaScript中this指向的三个简单判断法则:对象方法指向对象本身(箭头函数除外);多层嵌套函数中this继承自最近外层function;非对象方法的普通函数及箭头函数指向window。文章通过构造函数特例及多个代码示例,帮助开发者快速理解并验证this的绑定规则。

JavaScript this指向概述

JavaScript常被视为一门灵活的语言,有时甚至显得混乱。它融合了函数式编程与面向对象编程的思想,并具备动态语言的特性,这使得其功能强大(尽管与C++相比仍有差异)。

在JavaScript中,理解this的指向至关重要。

  • this在函数内部被创建。
  • 它指向调用时所在函数所绑定的对象。
  • this的值不能被直接赋值,但可以通过call或apply方法进行修改。

目录

* 一个特例 * 开始判断 * 法则一:对象方法中的this指向对象本身(箭头函数形式的除外) * 法则二:多层嵌套函数中的this指向等同于包含该this的最近一个function的this * 法则三:箭头函数以及非指向对象方法中的function的情况下this指向window * 习题集 * 普通函数中的this * 函数执行后返回另外一个函数中的this(普通函数中) * 多层嵌套函数中的this(定时器&箭头函数)1 * 多层嵌套函数中的this(定时器&箭头函数)2

构造函数的特例

一个特例

在正式介绍判断方法前,先讨论一个特殊情况。


// 构造函数
function Student(name) {
 this.name = name
}
// 创建小明和小红两个实例
var XM = new Student('xiaoming')
var XH = new Student('xiaohong')
// 输出信息
console.log(XM) // Student {name: "xiaoming"}
console.log(XH) // Student {name: "xiaohong"}

在构造函数中,this绑定的值会在创建实例时被赋予新创建的实例。这一规则不适用于下文所述的通用判断方法,因此单独说明。

this指向判断法则

开始判断

以下是一个典型示例,我们将以此为基础进行分析。


var x = {
 name: 'bw2',
 getName1: function() {
 console.log(this)
 },
 getName2: function() {
 setTimeout(() => {
  console.log(this)
 },0)
 },
 getName31: () => {
 console.log(this)
 },
 getName32: function() {
 return function() {
  console.log(this)
 }
 }
}
x.getName1() // {name: "bw2", getName1: ƒ}
x.getName2() // {name: "bw2", getName1: ƒ}
x.getName31() // Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …}
x.getName32()() // Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …}

法则一:在对象方法中,this指向对象本身(箭头函数形式除外)。


var x = {
 name: 'bw2',
 getName1: function() {
 console.log(this)
 }
}
x.getName1() // {name: "bw2", getName1: ƒ}

法则二:在多层嵌套函数中,this的指向等同于包含该this的最近一个function的this。

由于箭头函数没有独立的this作用域,它会向外层查找,直到遇到getName: function(){}。此时,this指向等同于该function内部的this。根据法则一,this指向对象本身。


var x = {
 name: 'bw2',
 getName2: function() {
 console.log(this) // 等同于此处的this
 setTimeout(() => {
  console.log(this) // 原始的this位置
 },0)
 }
}
x.getName2() // {name: 'bw2', getName1: ƒ}

我们可以在浏览器中运行代码以验证结果。

法则三:对于箭头函数,以及非指向对象方法的普通函数,this指向window(全局对象)。

根据法则二,this指向最近的function。因此,这里的this等同于返回的函数中的this,而非对象方法中的this,所以指向全局。

这看起来可能有些奇怪,但实践证实确实如此。


var x = {
 name: 'bw2',
 getName31: () => {
 console.log(this)
 },
 getName32: function() {
 return function() {
  console.log(this)
 }
 }
}
x.getName31() // Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …}
x.getName32()() // Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …}

习题与验证

习题集

欢迎读者按照法则一至三依次判断,猜测结果,并在浏览器中测试。测试结果可以回复讨论。

由于个人能力有限,这些法则可能在部分情况下失效。欢迎大家一起讨论。

下面是做题时间。

普通函数中的this


function x() {
 console.log(this)
}
x()

函数执行后返回另外一个函数中的this(普通函数中)


function xx(){
 return function() {
 console.log(this)
 }
}
xx()()

多层嵌套函数中的this(定时器&箭头函数)1


var x = {
 name: 'bw2',
 getName: () => {
 setTimeout(() => {
  console.log(this)
 },0)
 }
}
x.getName()

多层嵌套函数中的this(定时器&箭头函数)2


var x = {
 name: 'bw2',
 getName: () => {
 setTimeout(function() {
  console.log(this)
 },0)
 }
}
x.getName()

再次说明,该法则为实验性法则,未进行大范围的测试,不保证在所有情况下都有一致的结果。如果你发现了法则判断失败的情况,欢迎留言,一起探讨。

总结

以上所述是小编给大家介绍的Mysql 5.7.19 winx64 ZIP Archive 安装及使用教程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对本站网站的支持!

作者最新文章