乐趣区

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

jiezi

注意：该方法的语法和作用与 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 的介绍

退出移动版