淘先锋技术网

首页 1 2 3 4 5 6 7

MDN中对bind()方法的解释

Function.prototype.bind()

bind() 方法创建一个新的函数,在 bind() 被调用时,这个新函数的 this 被指定为 bind() 的第一个参数,而其余参数将作为新函数的参数,供调用时使用。

先引入一个例子:

const module = {
  x: 42,
  getX: function() {
    return this.x;
  }
};

let unboundGetX = module.getX;
console.log(unboundGetX()); // 该函数在全局范围内被调用
// 输出: undefined

unboundGetX = unboundGetX.bind(module);
console.log(unboundGetX());
// 输出: 42

一个 module 对象中包含一个变量x和一个方法getX。将 module 中的getX方法赋值给一个外面声明的变量 unboundGetX ,此时 unboundGetX 仅仅和getX有关系,unboundGetX中的this指向 undefined ,输出 unboundGetX() 为undefined。
后面使用bind()方法将unboundGetX中的this指向了 module ,作为新函数返回并赋值给unboundGetX,此时unboundGetX中的this就指向了 module 。最后输出 unboundGetX() 的结果为 42 .

一般在哪里调用,它的this就指向哪里。在对象、class等花括号外的,严格模式下this为undefined,非严格模式指向window对象。

在这个例子告诉我们,绑定this的重要性,接下来看看常见的绑定this的方式,以免绑定事件报错 undefined。

为事件方法绑定this的四种常见方式

①【推荐】在constructor中绑定:

class App extends React.Component{
  x='Its me.'
 
  constructor(props){
    super(props);
    this.Log = this.Log.bind(this)// 在constructor中绑定this
  }
  
  Log() {
    console.log(this.x)
  }
  
  render() {
    return (
      <button onClick={this.Log}></button>// 事件绑定
    );
  }
}

②【推荐】class fields实验性语法,定义时使用箭头函数:

class App extends React.Component{
  x='Its me.'
 
  constructor(props){
    super(props);
  }
  
  Log = ()=>{ // 使用箭头函数来定义函数
    console.log(this.x)
  }
  
  render() {
    return (
      <button onClick={this.Log}></button> // 事件绑定
    );
  }
}

③【不建议】在render中绑定事件时使用bind()绑定this:

class App extends React.Component{
  x='Its me.'
 
  constructor(props){
    super(props);
  }
  
  Log() {
    console.log(this.x)
  }
  
  render() {
    return (
      <button onClick={this.Log.bind(this)}></button> // 事件绑定
    );
  }
}

④【不建议】在render中绑定事件时使用箭头函数 ( )=>{ } 绑定this:

class App extends React.Component{
  x='Its me.'
 
  constructor(props){
    super(props);
  }
  
  Log() {
    console.log(this.x)
  }
  
  render() {
    return (
      <button onClick={ ()=>{this.Log()} }></button> // 事件绑定
    );
  }
}

onClick= {this.Log} ,实际上onClick是个变量,若不将this绑定到对象,你将对象中的Log赋值给了onClick,此时触发点击事件时,onClick中的this为undefined(class中为严格模式),出错。所以函数中如果使用了this,一定要将this绑定到对象,否则在事件绑定时会丢失函数中this的指向。

以上是常见的四种方法,我们通常建议在constructor中绑定或使用 class fields 语法来避免这类性能问题,而在render中绑定每次渲染都会创建一个新函数,有可能影响性能