ES6循环和forEach中的上下文和变量范围 [英] Context and variable scope in ES6 loops and forEach

问题描述

在ES5中，如果我必须在子函数中引用父函数的这个上下文，我必须将它存储在变量中并使用它在子函数内访问它变量。

In ES5, if I have to refer to the this context of parent function in child function I have to store it in a variable and access it inside child function using that variable.

像这样......

//  variant 1
var self = this;
this.nums.forEach(function (v) {
if (v % 5 === 0)
   self.fives.push(v);
});

ECMAScript有箭头功能所以我可以避免这种情况：

ECMAScript has arrow functions so I can avoid this:

// variant 2
this.nums.forEach((v) => {
 if (v % 5 === 0)
   this.fives.push(v)
})

我有的问题是：如果我要在上面的 forEach 函数中声明一个变量 temp ，这会污染我的全局范围吗？如果是这样会出现性能问题和可变冲突吗？

The question that I have is: If I was to declare a variable temp inside my forEach function above will this pollute my global scope? If so will this have performance issues and variable conflicts?

在for循环中发生了类似的情况....

Something similar happens in for loop ....

//variant 3
for(var i =0 ;i.......){
   var temp = "tempvariable";
   //some code here
 }

 console.log(temp);
 //output : tempvariable

variant2 和 variant3 代码片段？

推荐答案

常规函数使用执行上下文来设置<$的值c $ c> this ，这意味着在大多数情况下，这个的值取决于函数的调用方式，即此是根据执行函数的环境设置的。

Regular functions use execution context to set the value of this, meaning that in in most cases, the value of this is determined by how a function is called, i.e. the value of this is set according to the environment in which the function is executed.

箭头函数没有自己的这个值，而不是它们使用词法作用域，这意味着箭头函数中的 this 的值总是从封闭范围继承，即它被设置为封闭执行上下文的 this 值。

Arrow functions do not have their own this value, instead they use lexical scoping, meaning the value of this inside an arrow function is always inherited from the enclosing scope, i.e. it is set to the this value of the enclosing execution context.

这在文档 l

在箭头函数之前，每个新函数都定义了自己的这个值
（构造函数中的新对象，严格模式下未定义
函数调用，如果函数被称为
对象方法，则为上下文对象，等等）。这被证明是一种令人烦恼的
面向对象的编程风格。

....

箭头函数捕获封闭上下文的这个值

Until arrow functions, every new function defined its own this value (a new object in case of a constructor, undefined in strict mode function calls, the context object if the function is called as an "object method", etc.). This proved to be annoying with an object-oriented style of programming.
....
Arrow functions capture the this value of the enclosing context

发布的第三个示例只是循环的常规，并且几乎没有共同点函数，并不能真正与两个第一个代码示例进行比较。

for 循环在ES2015中的工作方式与以往一样，通常变量的循环在中没有特殊范围，因为变量（用 var 定义）是函数作用域。

The third example posted is just a regular for loop, and has very little in common with functions, and can't really be compared to the two first code examples.
for loops work the same in ES2015 as they always have, there generally is no special scope in for loops for variables, as variables (defined with var) are function scoped.

然而，ES2015确实引入了可以作为块作用域的变量，以及作为的 loop实际上是一个块（ for（what）{block} ），这些变量可以使用，并且它们是用让关键字或 const 关键字用于常量（无法更改）。

However, ES2015 does introduce variables that can are block scoped as wel, and as a for loop is in fact a block (for (what) {block}), those variables can be used, and they are defined with either the let keyword, or the const keyword for a constant (that can not be changed) .

For那些喜欢代码的人

For those that prefer code

var o = {
    nums  : [1,2,3,4],
    fn    : function() {
        var self = this;
        this.nums.forEach(function(v) {
            // "this" in this context would be the window,
            // but "self" would be the object "o", hence the common use of this hack
        });

        this.nums.forEach((v) => {
            // "this" in this context, would be the object "o"
            // that happens because the "this-value" in the fn() function,
            // ... is the parent object
            // and the arrow function inherits that this-value
        });

        for (var i=0; i<this.nums.length; i++) {
            // "this" in this context is what it has always been,
            // a for-loop has the same this-value as the surrounding scope
        }
    }
}

o.fn(); // called from global context "window"

这篇关于ES6循环和forEach中的上下文和变量范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！