Vue踩坑之旅——methods

问题：methods中的某一个方法用es6箭头函数写的，访问不到实例中的变量，后来输出了this，发现指向了组件export的对象，并非实例（严格模式下undefined）。

解决： 将methods中的方法全部改为es5写法编写。

原因： 箭头函数会绑定到ParentContext，造成访问实例失败。

预防： 1. 在需要用到实例中属性的时候，尽量使用es5函数编写。

            2. 文档中其实就已经提到不应该使用箭头函数来定义 method 函数，以后看文档要更加仔细。

引申： es6箭头函数需要注意的第一个点： 函数体内的this对象即定义时所在的对象，而不是使用时所在的对象。例如在函数中使用setTimeout,并不会改变this对象的指向到window,而是依然指向函数所在的对象。 箭头函数本没有自己的this, 其内部的this就是外层代码块的this。因此，箭头函数不能用作构造函数。

          可以充分利用箭头函数的this绑定性来进行函数体内的各种函数嵌套。

延展： 由于箭头函数的局限性，es7提出了函数绑定运算符，即::运算符，用来取代call, apply, bind调用。

           foo::bar;  //等同于

           bar.bind(foo);

转载于:https://juejin.im/post/5aaa0dab6fb9a028dc40bde0