箭头函数外部this指向

时间: 2023-09-29 15:04:31 浏览: 169

关于ES6箭头函数中的this问题

简要介绍：箭头函数中的this，指向与一般function定义的函数不同，箭头函数this的定义：箭头函数中的this是在定义函数的时候绑定，而不是在执行函数的时候绑定。（1）一般函数this指向在执行是绑定当运行obj.say()时候，this指向的是obj这个对象。 var x=11; var obj={ x:22, say:function(){ console.log(this.x) } } obj.say(); //console.log输出的是22 （2）所谓的定义时候绑定，就是this是继承自父执行上下文！！中的this，比如这里的箭头函数中的this.x，箭头函在JavaScript的ES6标准中，箭头函数引入了一个新的特性，即`this`的处理方式与传统的函数有所不同。本文将详细解析箭头函数中的`this`问题，帮助开发者更好地理解和运用这一新特性。通常，`this`在JavaScript中的行为取决于函数的调用方式。在普通函数中，`this`的值在函数执行时被确定，它会根据函数被调用的位置（上下文）来指向不同的对象。例如，当一个函数作为对象的方法被调用时，`this`会指向那个对象。 ```javascript var x = 11; var obj = { x: 22, say: function() { console.log(this.x); } }; obj.say(); // 输出22 ``` 在这个例子中，`say`函数作为`obj`对象的一个方法被调用，所以`this`指向`obj`，因此`console.log(this.x)`输出22。然而，在箭头函数中，`this`的行为有所不同。箭头函数的`this`值并不是在函数执行时绑定的，而是**在定义函数时继承自其父执行上下文的`this`**。这意味着箭头函数没有自己的`this`，而是共享了外部作用域的`this`。 ```javascript var x = 11; var obj = { x: 22, say: () => { console.log(this.x); } }; obj.say(); // 输出11 ``` 在这个例子中，箭头函数`say`的`this`继承自它的父执行上下文，即全局作用域（在浏览器中是`window`对象）。因此，`console.log(this.x)`输出11，因为`this`指向全局变量`x`。同样，如果箭头函数在构造函数内部，其`this`会指向构造函数的实例，就像下面的例子所示： ```javascript var a = 11; function test1() { this.a = 22; let b = function() { console.log(this.a); }; b(); } var x = new test1(); // 输出11 var a = 11; function test2() { this.a = 22; let b = () => { console.log(this.a); }; b(); } var x = new test2(); // 输出22 ``` 在`test1`中，由于`b`是一个普通函数，`this`在执行时被绑定到`test1`的实例，因此输出11。而在`test2`中，箭头函数`b`的`this`继承自`test2`的实例，所以输出22。深入理解箭头函数中的`this`，关键在于箭头函数没有自己的执行上下文，因此它不创建自己的`this`值。可以认为箭头函数“借用”了外层作用域的`this`。这使得箭头函数无法作为构造函数使用，因为它们无法设置新的`this`值。这种设计使得箭头函数在某些场景下更简洁，但在其他需要动态`this`的场合可能带来困扰。在ES5中，为了达到类似箭头函数的效果，我们通常需要保存外部作用域的`this`，例如使用`var _this = this`，然后在回调函数中引用`_this`。ES6的箭头函数则简化了这一过程。总结来说，箭头函数改变了`this`的常规行为，使其在定义时就已确定，并且继承自父执行上下文。在使用箭头函数时，开发者需要注意这一点，避免因`this`指向的改变而产生的错误。对于那些依赖于`this`动态绑定的场景，如事件处理、定时器回调或构造函数，应当谨慎使用箭头函数。同时，理解并掌握这一特性，有助于写出更加清晰和易于维护的JavaScript代码。

在箭头函数中，this指向的是定义时所在的作用域中的this，而不是调用时的this。因此，在箭头函数外部，this指向的是箭头函数所在的函数或全局对象（如果它在全局作用域中定义）。如果箭头函数被定义在一个对象的方法内，那么this就指向该对象。如果箭头函数被定义在一个构造函数内，那么this就指向该构造函数的实例。需要注意的是，在箭头函数外部，this的具体指向取决于函数的调用方式。如果函数被作为全局函数调用，则this指向全局对象；如果函数被作为对象方法调用，则this指向该对象。

阅读全文

箭头函数外部this指向

相关推荐

JavaScript箭头函数中的this详解

JavaScript基础之this和箭头函数详析

箭头函数改变this指向

箭头函数内部this 和外部this指向

箭头函数this指向

箭头函数this指向问题的的面试题

this指向，普通函数与箭头函数

箭头函数 this

js匿名函数的this指向

普通函数的this指向

react的箭头函数

箭头函数立即执行函数

react 箭头函数

vue箭头函数和普通函数

箭头函数换成普通函数

JavaScript 箭头函数

如何解决vue回调函数中的this指向问题

箭头函数和普通的函数区别

微信小程序 箭头函数

最新推荐

教师节主题班会.pptx

正整数数组验证库：确保值符合正整数规则

管理建模和仿真的文件

【损失函数与随机梯度下降】：探索学习率对损失函数的影响，实现高效模型训练

在ADS软件中，如何选择并优化低噪声放大器的直流工作点以实现最佳性能？

系统移植工具集：镜像、工具链及其他必备软件包

"互动学习：行动中的多样性与论文攻读经历"

【损失函数与批量梯度下降】：分析批量大小对损失函数影响，优化模型学习路径

在设计高性能模拟电路时，如何根据应用需求选择合适的运算放大器，并评估供电对电路性能的影响？

掌握JavaScript加密技术：客户端加密核心要点

微信小程序箭头函数