Jul 08, 2023 , with read , about 11min.

箭头函数中的this指向

[toc]

箭头函数的this指向问题

1. 函数中的this 指向

示例1:

var name = "window";
(function() {
  console.log(this.name);//window
})();
copy success
copy

等同于：

var name = "window";
var func = function() {
  console.log(this.name);//window
};

window.func(); //可简写为 func();
copy success
copy

示例2:

var obj = {
  name: "obj",
  func: function() {
    console.log(this.name);//obj
  },
};
obj.func();
copy success
copy

从上面两个示例中可以得出，似乎，函数体中this 好像指向函数定义所在作用域对象中。 在这里，便是window 对象。 这是初步可以得出的结论。

为了进一步验证，我们使用call来改变函数的调用对象试试：

var obj = {
  name: "obj",
};

var name = "window";
var func = function() {
  console.log(this.name);
};
window.func.call(obj);//obj
copy success
copy

可见, 确实, 普通函数体中的this 指向调用该函数的对象, 即"调用者对象".

2. 箭头函数中的this 指向

示例1:

var name = "window";

var obj = {
  name: "obj",
  func: () => {
    console.log(this.name);
  },
};
obj.func();//window
copy success
copy

可见, 即便func()函数的调用对象是obj,但是输出结果却是window