相关疑难解决方法(0)

在尝试使用ES6为我们提供的=>特性继承上下文后,我注意到这个上下文永远不会被改变.例:

var otherContext = {
  a: 2
};
function foo() {
  this.a = 1;

  this.bar = () => this.a;

}

var instance = new foo;
instance.bar(); // returns 1
instance.bar.bind(otherContext)(); // returns 1

没有=>运算符并使用function关键字:

function foo() {
  this.a = 1;

  this.bar = function () {
    return this.a;
  }
}
var instance = new foo;
instance.bar(); // returns 1
instance.bar.bind(otherContext)(); // returns 2

因此,如果我们从外部调用接收函数或者只是在变量中有函数,我们怎么能确定我们是否能够将不同的函数绑定到它或者它是否只是从某个地方继承它？

javascript没有告诉你任何事情听起来很危险,人们可能因为一个非常微妙和困难的bug而陷入困境.

我们都知道我们需要在React中绑定函数以使其起作用。我知道为什么我们需要绑定它。

但是我不确定为什么我们不需要绑定箭头功能。

示例：使用箭头功能（无需绑定）

handleClick = () => {
  this.setState({
    isToggleOn: !this.state.isToggleOn
  });

};

现在，使用功能（需要绑定）

this.handleClick = this.handleClick.bind(this);

handleClick() {
  this.setState({
    isToggleOn: !this.state.isToggleOn
  });

};

我不是在问为什么我们需要绑定功能。我只想知道为什么箭头功能不需要绑定。

谢谢。

当我尝试将简单的 ES5 代码转换为 ES6 时，我有点困惑。

假设我有这个代码块：

var obj = {num: 2}

var addToThis = function (a, b, c) {
  return this.num + a + b + c
}

// call
console.log(addToThis.call(obj, 1, 2, 3))

// apply
const arr = [1, 2, 3]
console.log(addToThis.apply(obj, arr))

// bind
const bound = addToThis.bind(obj)
console.log(bound(1, 2, 3))

上面的一切都按预期运行顺利。

但是一旦我开始使用诸如 const 和箭头函数之类的 ES6 特性，就像这样：

const obj = {num: 2}

const addToThis = (a, b, c) => {
  return this.num + a + b + c …

我有这段代码:

const data = {
  x: "Target"
}

let bar = () => {
  console.log(this.x)
}

let final = bar.bind(data); 
final();

此代码返回undefined.这是相同的代码,但具有非箭头功能:

const data = {
  x: "Target"
}

let bar = function(){
  console.log(this.x)
}

let final = bar.bind(data); 
final();

这段代码有效.我想理解为什么arrow函数保持绑定不起作用.我知道,他们处理这个不同.我知道他们保留了调用它们的原始上下文,在这种情况下不包括x.但它是否也阻止bind()工作？

我正在调用.bind(this)类构造函数内的另一个模块中定义的异步函数。

班级如下

class CannedItem {
  constructor (config) {
    ...
    this._fetch = config.fetch.bind(this)
    ...
  }
  ...
}

该功能类似于

module.exports = [
   {
      ...
      fetch: async () => {
        // Want to refer to 'this' bound to the CannedItem object here
      }
   }
]

但是，当调用该函数时，this会绑定到一个空对象。

令人困惑的是，Visual Studio Code 调试器将对象限制this在调试器窗口中的范围内，请参阅随附的屏幕截图，但是检查控制台中的变量将其列为未定义。在我看来，这似乎有一个错误。是这种情况还是我滥用了.bind()？

唯一看起来有点不寻常的是 async 函数。我尝试寻找异步问题，.bind()但没有找到骰子。

我正在运行 NodeJs 8.11.1 和最新的 VSCode (1.30.2)

我是反应的新手（即使是在 JS 中）。我在App课堂上编写了以下代码：

nameChangeHandler = (event, personId) => {
//method code
};

render()
{
  <div>
    {this.state.persons.map((person, index) => {
      return <Person
          // nameChangeHandler={(event) => this.nameChangeHandler(event, person.id)}
          nameChangeHandler={this.nameChangeHandler.bind(this, person.id)}
      />
    })}
  </div>
}

我正在传递nameChangeHandler给Person我onChange在input标记 ( <input type="text" onChange={props.nameChangeHandler}/>)中的事件中调用它的组件

当我以这种方式传递它时，应用程序工作正常：
nameChangeHandler={(event) => this.nameChangeHandler(event, person.id)}
但是当我这样做时它不会：
nameChangeHandler={this.nameChangeHandler.bind(this, person.id)}

它失败，一个异常时，我试图存取权限event.target.value的nameChangeHandler方法。

如何使用bind()方法而不是箭头函数将事件和参数传递给此方法？

我听说我们应该总是bind()在箭头函数上使用方法，因为箭头函数方法可以多次渲染组件。

bind()和箭头函数之间有什么特殊用例和区别吗？

有三个文件。

1. context.js将导出的对象导出到bind：

module.exports = {
    exceptionValue: 99
};

2. strategy.js 那就是导出我想调用绑定的函数：

module.exports = events => {
    if (this.exceptionValue !== 99) {
        throw new Error(this);
    }
    return events;
};

3. index.js 导入两个先前的文件：

const context = require('./context');
const strategy = require('./strategy');

const strategyWithContext = strategy.bind(context);
return strategyWithContext(events);

events是传递给的JSON对象的列表index.js。更准确地说，我正在从中导出此函数index.js，调用它的人将提供这些事件。但这没什么特别的，只是一个JSON对象列表。

问题在于，this策略函数内部的引用不起作用，并且始终会引发异常。我根本无法访问上下文对象。我究竟做错了什么？为什么不起作用？

我想在另一个方法中调用一个方法,但是它永远不会被调用.

按钮:

<span onClick={this.firstMethod()}>Click me</span>

零件:

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {..};
  }

  firstMethod = () => (event) => {
    console.log("button clicked")
    this.secondMethod();
  }

  secondMethod = () => (event) => {
    console.log("this is never called!")
  }

  render() {..}
}

调用第一种方法,但不是第二种方法.我试图添加到构造函数

this.secondMethod = this.secondMethod.bind(this);

这在所有其他解决方案中都是推荐的,但似乎没有什么对我有用.如何正确调用第二种方法？