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 值和單獨給出的一個或多個參數來調用一個函數。

1、應用在普通 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 傳遞。

2、應用在 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的介紹