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

why_rookie 發布于2019-08-23 18:02 / 2640人閱讀

摘要：先引用一句基本都會引用的句子，但本次并不是介紹兩個方法的區別，而是嘗試在中進行使用。二應用在中在實例中的中定義了一個變量，在中打印出來同時調用中的方法。測試在中直接使用實踐證明也是可以打印出來的。

注意：該方法的語法和作用與 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中的使用

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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