Vue 方法中this指向 引起的祸端

可忽略

最近在写 vue 项目， 使用 总监封装 好的框架，遇到一个问题： vue 实例 methods 中的 方法在传递后，通过 函数名（） 方式调用后， 其内部 this 竟然没有指向 window。当时就不服了，各种 debugger , 无果。

早上打开电脑后， 灵光一闪， 难道用了 bind 函数？咳咳。。。 一口老痰，终于通了。

本post 主要介绍

1. vue 的 methods 中 this 如何绑定到实例上的
2. es6 中的 Function.prototype.bind
3. es6 的箭头函数

1. vue 的 methods 中 this 如何绑定到实例上的

且看源码

通过搜索 methods 关键字找到了 绑定源码

看看这个 bind 函数是干嘛的？

使用的就是 Function.prototype.bind 函数进行 this 绑定的

es6 中的 Function.prototype.bind

简而言之， 这个方法可以固定住函数内部的 this 指向 与函数的四种调用方式无关。

`function.bind(thisArg[, arg1[, arg2[, …]]])

栗子

var x = 1;
var obj = {
     x:100
 };
 function getX() {
     console.log(this.x);
 }
 getX(); // 1
 getX = getX.bind(obj);
 getX(); // 100

上例可知， getX 中 this 始终指向 obj 这个对象

3. es6 的箭头函数

简而言之， 让函数内部 的this 与 函数的声明时候的环境中的 this 保持一致的指向

当我们的 箭头函数遇到 bind 函数会如何

var x = 1;
var obj = {
     x:100
 };
var getX = () => {
   console.log(this.x);
}
getX(); //1

getX = getX.bind(obj);
getX(); // 1

上栗知道，** bind 遇到 arrow 函数的时候， arrow 函数 生效**， 即对应的 this 指向 为 函数声明时候环境中 的 this