echarts的formatter: this.loadData拿不到data的数据

场景：echarts中的饼图，我想在中间显示data中的数据，让数据展示在中间用formatter属性，但是写成formatter: this.loadData拿不到data中的数据，查了一下资料，把formatter写成函数的形式就可以拿到了

原理：

像上面的 formatter: this.loadData 拿不到数据的话，我们预期拿到的数据是在this指向vue实例对象的情况下，但是现在我们拿不到数据了，说明this指向已经改变

this指向的四种形式

a. 如果是一般函数,this指向全局对象window;

b. 在严格模式下"use strict",为undefined.

c. 对象的方法里调用,this指向调用该方法的对象.

d. 构造函数里的this,指向创建出来的实例.

this指向问题

那么此时的this指向的是啥？答案是window对象

测试一下下面这段代码

输出居然是undefined

这里输出undefined的原因

在一个函数上下文中，this由调用者提供，由调用函数的方式来决定。

如果调用者函数，被某一个对象所拥有，那么该函数在调用时，内部的this指向该对象。如果函数独立调用，那么该函数内部的this，则指向undefined。

但是在非严格模式中，当this指向undefined时，它会被自动指向全局对象

看个简单独立的栗子

1.  
   var a = 20;
2.  
   var obj = {
3.  
   a: 10,
4.  
   c: this.a 20,
5.  
   fn: function () {
6.  
   return this.a;
7.  
   }
8.  
   }
9.  
    
10.  
    console.log(obj.c); //40//此时相当于函数的独立调用，非严格模式下会指向全局对象
11.  
    console.log(obj.fn()); //10//此时被obj所拥有，内部的this指向obj

再看一个处于严格模式下的例子

1.  
   function fn1() {
2.  
   'use strict';
3.  
   console.log(this);
4.  
   }
5.  
    
6.  
   fn1(); // fn是调用者，独立调用
7.  
   window.fn1(); // fn是调用者，被window所拥有

输出如下

此时我们再回头来看上面最初的问题，当我们把formatter写成普通函数的形式时，在上面相当于独立调用这个函数，那么函数内部的this就会指向undefined

接下来我们分析一下为什么改成箭头函数的形式之后就可以顺利拿到data中我们想要的数据了

在改成箭头函数之后，打印出来的params是这样的

改一下代码，调试一下在我写成箭头函数的形式之后，this指向的是什么

很明显，此时指向的是vue实例对象，但是这个跟我预期的this指向不一样啊，资料显示说 箭头函数中的this指向的是定义时的this，而不是执行时的this 那此时的this指向不应该是这个option_load对象嘛

很迷，this指向到底该怎么准确判断？到底该如何确定this指向？（有无大佬解惑）

看似这个虽然为echarts的实例对象所使用，但为什么会指向到VM身上，我怀疑和原型链有关系

this指向参考文章前端基础进阶(七)-前端工程师最容易出错的问题-this关键字 - 知乎

不愧是阿里的，里面有些例子很有深度，也很容易掩人耳目，只有对this指向深刻理解透彻，才不会出错

最后，大家可以参考下我总结的几个改变this指向的方法，也可以去解决这个问题

改变this指向的方法

1. 函数重载
2. 利用call()
3. apply()
4. bind()

传送门来也~

参考博文Javascript 的 this 用法 - 阮一峰的网络日志

这篇好文章是转载于：学新通技术网