js 中的 call apply ，试在vue中的使用

注意：该方法的语法和作用与 apply() 方法类似，只有一个区别，就是 call() 方法接受的是一个参数列表，而 apply() 方法接受的是一个包含多个参数的数组。

先引用一句基本都会引用的句子，但本次并不是介绍两个方法的区别，而是尝试在vue中进行使用。
在vue中会有实例的this，通常在一个vue中我们会大量使用this，但如果我们把方法进行拆分成独立js后，能不能更简单方便的在独立js中使用this呢？

vue本身提供了一个mixins 方法，可以将独立出来的js混入到vue实例中，只要再vue中进行import 再声明mixins，就可以按照vue中的写法随心所欲的使用js了。
mixins参考vue官方api

也许我们还会有另一种不想混入的用法（仔细想想呢，其实大多数场景是可以用mixins包含的，只是复习javascript时又看到了call()，再进行一个深层的试想 ^__^）

call() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。

一、应用在普通 js 中
下面看两个例子：

 1. 使用 let 声明变量，在function 中使用this

function foo() {
    setTimeout(() => {
      console.log('id:', this.id);
    }, 100);
  }

let id = 21;

foo.call({id:42});
foo.call(this);
foo();

// id: 42
// id: undefined
// id: undefined

2. 将变量id 绑定在全局上（也有例子是 window.id）

function foo() {
    setTimeout(() => {
      console.log('id:', this.id);
    }, 100);
  }

this.id = 21;

foo.call({id:42});
foo.call(this);
foo();

// id: 42
// id: 21
// id: undefined

目测js中可以通过call 进行this 传递。

二、应用在 vue 中

在vue 实例中的data 中定义了一个变量aaa，在created 中打印出来；同时调用t1中的方法。
test.vue

<template>
    <div>测试call</div>
</template>
<script>
    import t1 from './t1';
    export default {
        name: 'testThis',
        data() {
            return {
                aaa:'aaa'
            }
        },
        created() {
            t1.call(this);
            console.log(this.aaa);
        }
    }
</script>

在t1.js 中直接使用this
t1.js

export default function test() {
    console.log(this.aaa,'test');
}

实践证明也是可以打印出来的。

所以我们在写一些独立js 文件，需要传递this 时，一定要清楚传的哪个this ，这样在写（ban）代（zhuan）码（tou）时就可以更灵活了。

附：MDN对call的介绍