美文网首页
为什么组件中定义的方法要bind(this)

为什么组件中定义的方法要bind(this)

作者: zhulichao | 来源:发表于2020-08-31 00:58 被阅读0次
ES5里,function内部的this默认为window,在严格模式下,this为undefined。ES5的写法React.createClass会自动绑定每个方法的this到当前组件实例,ES6的写法class XXX extends Component则不会自动为方法绑定this。

bind()方法会创建一个新函数,当这个新函数被调用时,它的this值是传递给bind()的第一个参数,它的参数是bind()的其它参数和原本参数,这个函数不论怎么调用都有同样的this,也就是当前类的实例,否则this为undefined。绑定this的几种方式:

```
// 方式一
<div onClick={this.handleClick.bind(this)}>save</div>
// 方式二
constructor() {
    ...
    this.handleClick = this.handleClick.bind(this);
}
// 方式三
<div onClick={() => this.handleClick()}>save</div>
// 方式四
handleClik = () => {}
<div onClick={this.handleClick}>save</div>
// 方式五
ES6 Decorator,core-decorator.js提供了@autobind修饰器
```

方式一会在每次点击时通过bind创建一个新方法,一般使用方式二、方式三或方式四,其中方式三的箭头函数总是匿名的,如果打算移除监听事件可使用方式四。方式二在构造函数里绑定this后方法是属于实例的,而定义在类里的是非静态函数,在类的`prototype`上,实例的`__proto__`原型上。方式四使用箭头函数定义的方法也是这个效果。

相关文章

  • 为什么组件中定义的方法要bind(this)

  • Vue学习记录

    vue data 组件定义只接受 function 父子组件属性传递: 父组件的子组件中 v-bind :prop...

  • laravel-路由规则

    自定义路由逻辑 如果想要使用自定义的路由解析规则,可以使用Route:bind方法。传入bind方法中的闭包函数(...

  • vue.js 的基本使用s

    条件与循环 v-if v-for v-bind 指令将待办项传到循环输出的每个组件中 v-bind 定义点击事件·...

  • mpvue采坑指北

    自定义组件中 v-bind="$attrs" 和 :value="$attrs.value"不会工作的,但是下面的...

  • Vue.js中组件通信的方法

    父子组件的通信方法首先父组件需要v-bind绑定数据,在子组件中用props进行接收数据,这样,父组件中的数据变动...

  • 调用自定义组件中的方法

    创建自定义组件 .json .js 页面中引入自定义组件 .json .xml 页面中调用自定义组件的方法 .js

  • vue的组件传值以及路由基础

    父组件向子组件传值 组件实例定义方式,注意:一定要使用props属性来定义父组件传递过来的数据 使用v-bind或...

  • Vue.js - Day4

    父组件向子组件传值 组件实例定义方式,注意:一定要使用props属性来定义父组件传递过来的数据 使用v-bind或...

  • 父组件子组件传值

    1、父组件向子组件传值 父组件向子组件传值的方法是通过v-bind绑定一个参数,其中msg是子组件要存放在prop...

网友评论

      本文标题:为什么组件中定义的方法要bind(this)

      本文链接:https://www.haomeiwen.com/subject/mzxjhktx.html