时间戳

首页 > 解决方案 > javascript：function.bind(object) 的问题 - “this”保留为全局对象

javascript - javascript：function.bind(object) 的问题 - “this”保留为全局对象

问题描述

我对 Javascript 中的函数绑定有疑问。

确保我阅读了我能找到的所有 StackOverflow 的答案（比如这个），并遵循了 Mozilla 开发者指南的说明和示例

这是我的代码的相关部分：

class Collection extends Array {
  constructor (...args) {
    super(...args)
  }
  each (callback) {
    this.forEach(element => {
      callback.bind(element)(element) 
      // bind the function THEN call it with element as argument
      // but I also tried :
      // callback.bind(element)()
      // callback.call(element, element)
      // let bound = callback.bind(element); bound()
    })
  }
}

//the tests :
let el1 = {x:1, y:"somevars"}
let el2 = {x:42, y:"another"}

let col = new Collection()
col.push(el1)
col.push(el2)

// the test
col.each(element => console.log(Object.keys(this)))
// and I get ['console', 'global', 'process' ...]   all the global variables 
// instead of ['x','y'] which is what I want

我真的不明白为什么它不起作用......

对于context，它是解决 Codewars 上一个有趣的 kata，而不是生死攸关的问题。

标签： javascriptfunctionthisbind

解决方案

好的，正如@Teemu 所指出的，箭头函数不能被绑定......

但是有了这种洞察力，我可以寻找一种绕过它的方法，并找到 另一个 StackOverflow 的帖子 ，它给出了一个窍门：

（从帖子复制粘贴）

function arrowBind(context, fn) {
  let arrowFn;
  (function() {
    arrowFn = eval(fn.toString());
    arrowFn();
  }).call(context);
}
arrowBind(obj, () => {console.log(this)});

这工作得很好，新的这是上下文......

但在我的情况下并没有解决这个难题（“没有定义”）我需要进一步研究

推荐阅读