JS 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 安装及使用教程，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对本站网站的支持！

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

JavaScript this指向概述

构造函数的特例

this指向判断法则

习题与验证

实用工具推荐