箭头函数的this指向其定义时所在的作用域,而不是函数被调用时所在的作用域。因此,箭头函数的this指向是固定的,无法被改变。
下面是例子:
1.
const person = {
name: 'John',
sayHi: function () {
console.log(`Hi, my name is ${this.name}`);
},
sayHiArrow: () => {
console.log(`Hi, my name is ${this.name}`);
}
}
person.sayHi(); // 输出:Hi, my name is John
person.sayHiArrow(); // 输出:Hi, my name is undefined
```
在这个例子中,`person.sayHi()`是一个普通的函数,它的`this`指向`person`对象本身,因此输出结果为`Hi, my name is John`。而`person.sayHiArrow()`是一个箭头函数,它的`this`指向的是定义该函数时所在的作用域,也就是全局作用域。由于全局作用域中并没有定义`name`变量,因此输出结果为`Hi, my name is undefined`。
又有:
2.在全局环境下定义箭头函数:
const obj = { name: 'CSDN' }; const arrowFn = () => { console.log(this); }; arrowFn(); // 输出的是全局对象 window
在全局环境下定义箭头函数,它的this指向的是全局对象 window。
3.在对象方法中定义箭头函数:
const obj = { name: 'CSDN', normalFn() { console.log(this); }, arrowFn: () => { console.log(this); } }; obj.normalFn(); // 输出的是 obj 对象 obj.arrowFn(); // 输出的是全局对象 window
在对象方法中定义箭头函数,它的this指向的是全局对象 window,而不是对象本身。
4.在事件处理程序中定义箭头函数:
<button onclick="const arrowFn = () => {console.log(this)}; arrowFn()">点我</button>
在事件处理程序中定义箭头函数,它的this指向的是全局对象 window。
5.箭头函数的this指向其定义时所在的作用域的this,而不是执行时的调用者。这与普通函数的this指向有所不同。下面是一个简单的例子:
// 定义一个对象 let obj = { name: 'C知道', getName: function() { return () => { console.log(this.name); }; } }; // 调用getName方法,返回一个箭头函数 let getName = obj.getName(); // 调用箭头函数,输出"C知道" getName();
在这个例子中,getName方法返回一个箭头函数,而这个箭头函数中的this指向的是它定义时所在的作用域obj的this,也就是指向对象obj。因此当我们调用getName方法返回的箭头函数时,它会输出对象obj中的name属性值"C知道"。