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 中的 call apply ,试在vue中的运用》
实践证明也是能够打印出来的。

所以我们在写一些自力js 文件,须要通报this 时,一定要清晰传的哪一个this ,如许在写(ban)代(zhuan)码(tou)时就能够更灵活了。

附:MDN对call的引见

    原文作者:cason6810
    原文地址: https://segmentfault.com/a/1190000019428602
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞