无法绑定箭头函数

Question

JavaScript forEach documentation声明<div class="textarea-wrap"> <textarea name="ta" id="styled_text_area" rows="6" placeholder="Type here..." onKeyDown="textCounter(this.form.ta,this.form.countDisplay), clean('styled_text_area');" onKeyUp="textCounter(this.form.ta,this.form.countDisplay), clean('styled_text_area');"></textarea> <div class="remaining"> <p>Characters Remaining</p> <input readonly type="text" name="countDisplay" size="3" maxlength="3" value="500"><br><br> </div> </div>语法为：

.forEach

arr.forEach(callback[, thisArg])的用法是什么？

Answer 1

thisArg指的是应该调用回调的上下文，基本上它是this内部回调所指的内容。例如：

var myObject = { name: 'myObject' };

[1,2].forEach(function(item) { 
 console.log(item); // 1, 2
 console.log(this === myObject); // true
}, myObject)

Answer 2

this值是与execution context相关的特殊对象。

激活执行上下文的上下文的对象

this的值仅在输入上下文时确定一次并且无法为此

指定新值

在您的情况下，提供thisArg就像

arr.forEach(callback.bind(thisArg));

forEach，为您简化，询问一个单独的可选参数

现在，如果您使用this

运行此forEach

arr.forEach(function(item) {
    console.log(this === window); //true
    console.log(this === arr);    //false
});

你明白了！

Answer 3

如果您对此事感到困惑，那么使用箭头功能时thisArg 无效：

var myObject = { name: 'myObject' };

[1,2].forEach(item => { 
console.log(item);                     // 1, 2
console.log(this === myObject, this);  // false  Window {}
}, myObject)

这是因为

无法绑定箭头函数

<小时/>

与正常函数绑定的上下文。

var myObject = { name: 'myObject' };

[1,2].forEach(function(item){ 
console.log(item);                     // 1, 2
console.log(this === myObject, this);  // true  {name: "myObject"}
}, myObject)

如果此时未指定myObject，则this内部将指向Window，与箭头功能一样。

Answer 4

我认为这些测试将使整个事情变得清晰只需在您的浏览器控制台中进行测试

arr=[0];

arr.forEach(function(item) {
    console.log(this === window); //true
    console.log(this === arr);    //false
});

arr.forEach(function(item) {
    console.log(this === window); //true
    console.log(this === arr);    //false
},this);

arr.forEach(function(item) {
    console.log(this === window); //false
    console.log(this === arr);    //true
},arr);

arr.forEach(function(item) {
    console.log(this === window); //false
    console.log(this === arr);    //false
},0);

Answer 5

我经常在原型和函数的上下文中使用它：

var MyClass = function() {
  this.GlobalVar = 3;
}

MyClass.prototype.func1 = function(a) {
  return (a == this.GlobalVar);
}

MyClass.prototype.func2 = function(arr) {
  arr.forEach(function(item) {
    console.log(this.func1(item));
  }, this); // use of thisArg
}

MyClass.prototype.func3 = function(arr) {
  var that = this;
  arr.forEach(function(item) {
    console.log(that.func1(item));
  }); // also possible without using thisArg
}

MyClass.prototype.func4 = function(arr) {
  arr.forEach(function(item) {
    console.log(this.func1(item));
  }); // implementation raising an error, because this.func1 does not exist in that context
}

var arr = [0, 1, 3, 4, 3, 1];
var myClass = new MyClass();
myClass.func2(arr);
/* prints:
false
false
true
false
true
false
*/
myClass.func3(arr) /* same as func2 */
myClass.func4(arr); /* Fails with
Error: {
  "message": "TypeError: this.func1 is not a function",
  "filename": "https://stacksnippets.net/js",
  "lineno": 35,
  "colno": 26
}
*/

在.forEach中thisArg的目的是什么？

5 个答案:

无法绑定箭头函数

与正常函数绑定的上下文。