箭头函数的this作用域指向

const myObj = {
	name:'刘木子',
	say: () => {
		this.name;
	}
}
console.log(myObj.name);
console.log(myObj.say());

比如上边这段代码,输出结果为“刘木子” undefind,箭头函数中的this指向是指环境定义时的环境,这里应该是指向的window,所以没有找到,比如在vue中,mounted中的方法中,this可以直接找到data里的值,也是和vue的环境有关的。

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

2020-07-28看到了再来更新一波,嘻嘻

箭头函数的this其实可以简单理解找最近一层作用域的this,此时的say()最近的指向是window,所以就是undefind了。

### JavaScript 箭头函数中的 `this` 指向规则 在 JavaScript 中,箭头函数的 `this` 值具有特殊的绑定行为。与传统函数不同的是,箭头函数并不会创建自己的 `this` 上下文[^1]。相反,它的 `this` 是在其定义时通过 **词法作用域** 来决定的,而非调用时动态绑定。 #### 定义阶段的作用域决定了 `this` 当箭头函数被定义时,它会捕获当前上下文中 `this` 的值,并将其作为自身的 `this` 使用。这意味着无论该箭头函数在哪里被调用,它的 `this` 都不会改变,始终指向定义时所在的上下文[^2]。 以下是几个关键点: - **不支持动态绑定**: 箭头函数无法通过 `.call()`、`.apply()` 或者 `.bind()` 方法更改其 `this` 值[^3]。 - **无独立 `this` 和 `arguments`**: 箭头函数本身并不具备属于自己的 `this` 或 `arguments` 属性,而是继承自外部环境[^2]。 下面是一个具体的例子展示这一特性: ```javascript const obj = { name: 'Object', regularFunction: function () { console.log(this.name); // 输出 Object }, arrowFunction: () => { console.log(this.name); // 如果在外面有全局变量name,则可能输出undefined或者global/window对象的名字取决于运行环境 } }; obj.regularFunction(); // 调用常规方法,this指向obj实例 obj.arrowFunction(); // 调用箭头函数,由于箭头函数定义于全局环境中,所以这里的this实际上是指向window/globalThis或者其他外层作用域的对象 ``` 在这个案例里可以看到,尽管两个成员都试图访问同一个属性 `name` ,但由于它们分别采用了不同的实现方式——一个是普通的function形式而另一个则是arrow function形式,最终导致了不一样的结果表现出来。 另外需要注意的一点就是关于事件处理程序以及定时器回调等情况下的应用差异,在这些场景下使用箭头函数可以有效避免因意外丢失原本期望得到的那个特定对象引用所引发的问题。 --- ### 示例代码说明 为了更清楚地理解这一点,考虑如下代码片段: ```javascript function Person() { this.age = 0; setInterval(function growUp() { // 此处的传统匿名函数拥有自己独立的this指针,默认情况下指向Global Window 对象(浏览器环境下), 导致错误的结果. console.log(this.age); }, 1000); setInterval(() => { // 这里的箭头函数保持了Person构造器内的this指向一致性, 即使经过多次调用也依旧正确反映年龄增长情况. console.log(this.age); }, 1000); } var p = new Person(); // 第二个setInterval每次都会打印出逐渐增大的数值代表人物年纪的增长过程; // 反观第一个setInterval则只会报错因为尝试去读取未定义的Window.Age字段。 ``` 此段落再次强调了箭头函数对于维持预期的行为模式的重要性特别是在异步操作之中[^1]. ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值