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

why_rookie 发布于2019-08-23 18:02 / 2634人阅读

摘要：先引用一句基本都会引用的句子，但本次并不是介绍两个方法的区别，而是尝试在中进行使用。二应用在中在实例中的中定义了一个变量，在中打印出来同时调用中的方法。测试在中直接使用实践证明也是可以打印出来的。

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

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

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

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

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

附：MDN对call的介绍

云服务器 GPU云服务器 js中的call和apply JS中bind、call和apply的作 apply与call的区别 php中的使用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104557.html

JS中bind、call和apply的作用以及在TS装饰器中的用法

摘要：目录，前言，，例子，直接调用，将指向另一个对象，传递参数，，例子，直接调用，将指向另一个对象，传递参数，合并数组，，例子，直接调用，将指向另一个对象，传递参数，中装饰器使用，总结，相同点，不同点，前言，前言和在函数式编程时候非常有用，本目录 1，前言 1，call 1.1，例子 1.2，直接调用 1.3，将this指向另一个对象 1...

happyfish 2021-11-22 12:02 评论0 收藏0
一篇文章带你完全理解this

摘要：追梦子追梦子通过在方法，给第一个参数添加要把添加到哪个环境中，简单来说，就会指向那个对象。追梦子追梦子还有一点就是虽然也是对象，但是在这里还是指向那个函数的实例，因为比较特殊。追梦子追梦子在严格版中的默认的不再是，而是。走在前端的大道上本篇将自己读过的相关 this指向的文章中，对自己有启发的章节片段总结在这（会对原文进行删改），会不断丰富提炼总结更新。版本一一句话 thi...

Jenny_Tong 2019-08-21 17:58 评论0 收藏0
利用Object.prototype.toString.call()来进行类型检验

摘要：会将数组中的每个元素一个个传入给。参考链接与的区别二进行类型检验首先来看一个问题，用来检验类型有什么缺点呢答案是无法准确地检验对象类型。比较好的方式就是用来进行检验。判断是否是对象类型注意使用是不能得到类型的。一、apply与call的区别相同点：可以让一个对象调用另一个对象的方法不同点： apply最多只能传入两个参数，第一个为对象，第二个为数组 call能传入多个参数，第一个...

JackJiang 2019-08-26 12:12 评论0 收藏0
「中高级前端面试」JavaScript手写代码无敌秘籍

摘要：第一种直接调用避免在不必要的情况下使用，是一个危险的函数，他执行的代码拥有着执行者的权利。来自于此外，实现需要考虑实例化后对原型链的影响。函数柯里化的主要作用和特点就是参数复用提前返回和延迟执行。手写路径导航实现一个new操作符实现一个JSON.stringify 实现一个JSON.parse 实现一个call或 apply 实现一个Function.bind 实现一个继承实现一个J...

Zhuxy 2019-05-23 16:26 评论0 收藏0
vue的源码分析（全局工具函数）

摘要：创建一个自调用匿名函数，设计参数，并传入对象。表示独一无二的值声明时不能使用，而是声明时可以加参数，用于描述作为时不能被遍历这个函数主要是检测当前对象是否有某种属性。给变量赋值一个空的对象返回一个的函数，将函数的参数的带入并赋值，返回。 VUE 2.6.8 (function (global, factory) { typeof exports === object && type...

Baaaan 2019-08-23 15:41 评论0 收藏0