成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

why_rookie / 2646人閱讀

摘要：先引用一句基本都會(huì)引用的句子，但本次并不是介紹兩個(gè)方法的區(qū)別，而是嘗試在中進(jìn)行使用。二應(yīng)用在中在實(shí)例中的中定義了一個(gè)變量，在中打印出來同時(shí)調(diào)用中的方法。測(cè)試在中直接使用實(shí)踐證明也是可以打印出來的。

注意：該方法的語法和作用與 apply() 方法類似，只有一個(gè)區(qū)別，就是 call() 方法接受的是一個(gè)參數(shù)列表，而 apply() 方法接受的是一個(gè)包含多個(gè)參數(shù)的數(shù)組。

先引用一句基本都會(huì)引用的句子，但本次并不是介紹兩個(gè)方法的區(qū)別，而是嘗試在vue中進(jìn)行使用。
在vue中會(huì)有實(shí)例的this，通常在一個(gè)vue中我們會(huì)大量使用this，但如果我們把方法進(jìn)行拆分成獨(dú)立js后，能不能更簡(jiǎn)單方便的在獨(dú)立js中使用this呢？

vue本身提供了一個(gè)mixins 方法，可以將獨(dú)立出來的js混入到vue實(shí)例中，只要再vue中進(jìn)行import 再聲明mixins，就可以按照vue中的寫法隨心所欲的使用js了。
mixins參考vue官方api

也許我們還會(huì)有另一種不想混入的用法（仔細(xì)想想呢，其實(shí)大多數(shù)場(chǎng)景是可以用mixins包含的，只是復(fù)習(xí)javascript時(shí)又看到了call()，再進(jìn)行一個(gè)深層的試想 ^__^）

call() 方法使用一個(gè)指定的 this 值和多帶帶給出的一個(gè)或多個(gè)參數(shù)來調(diào)用一個(gè)函數(shù)。

一、應(yīng)用在普通 js 中
下面看兩個(gè)例子：

 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

目測(cè)js中可以通過call 進(jìn)行this 傳遞。

二、應(yīng)用在 vue 中

在vue 實(shí)例中的data 中定義了一個(gè)變量aaa，在created 中打印出來；同時(shí)調(diào)用t1中的方法。
test.vue

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

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


實(shí)踐證明也是可以打印出來的。

所以我們?cè)趯懸恍┆?dú)立js 文件，需要傳遞this 時(shí)，一定要清楚傳的哪個(gè)this ，這樣在寫（ban）代（zhuan）碼（tou）時(shí)就可以更靈活了。

附：MDN對(duì)call的介紹

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/104557.html

相關(guān)文章

  • JS中bind、call和apply的作用以及在TS裝飾器中的用法

    摘要：目錄，前言，，例子，直接調(diào)用，將指向另一個(gè)對(duì)象，傳遞參數(shù)，，例子，直接調(diào)用，將指向另一個(gè)對(duì)象，傳遞參數(shù)，合并數(shù)組，，例子，直接調(diào)用，將指向另一個(gè)對(duì)象，傳遞參數(shù)，中裝飾器使用，總結(jié)，相同點(diǎn)，不同點(diǎn)，前言，前言和在函數(shù)式編程時(shí)候非常有用，本? 目錄 1，前言 1，call 1.1，例子 1.2，直接調(diào)用 1.3，將this指向另一個(gè)對(duì)象 1...

    happyfish 評(píng)論0 收藏0

  • 一篇文章帶你完全理解this

    摘要：追夢(mèng)子追夢(mèng)子通過在方法，給第一個(gè)參數(shù)添加要把添加到哪個(gè)環(huán)境中，簡(jiǎn)單來說，就會(huì)指向那個(gè)對(duì)象。追夢(mèng)子追夢(mèng)子還有一點(diǎn)就是雖然也是對(duì)象，但是在這里還是指向那個(gè)函數(shù)的實(shí)例，因?yàn)楸容^特殊。追夢(mèng)子追夢(mèng)子在嚴(yán)格版中的默認(rèn)的不再是，而是。 走在前端的大道上 本篇將自己讀過的相關(guān) this指向 的文章中，對(duì)自己有啟發(fā)的章節(jié)片段總結(jié)在這（會(huì)對(duì)原文進(jìn)行刪改），會(huì)不斷豐富提煉總結(jié)更新。 版本一 一句話 thi...

    Jenny_Tong 評(píng)論0 收藏0

  • 利用Object.prototype.toString.call()來進(jìn)行類型檢驗(yàn)

    摘要：會(huì)將數(shù)組中的每個(gè)元素一個(gè)個(gè)傳入給。參考鏈接與的區(qū)別二進(jìn)行類型檢驗(yàn)首先來看一個(gè)問題，用來檢驗(yàn)類型有什么缺點(diǎn)呢答案是無法準(zhǔn)確地檢驗(yàn)對(duì)象類型。比較好的方式就是用來進(jìn)行檢驗(yàn)。判斷是否是對(duì)象類型注意使用是不能得到類型的。 一、apply與call的區(qū)別 相同點(diǎn)：可以讓一個(gè)對(duì)象調(diào)用另一個(gè)對(duì)象的方法不同點(diǎn)： apply最多只能傳入兩個(gè)參數(shù)，第一個(gè)為對(duì)象，第二個(gè)為數(shù)組 call能傳入多個(gè)參數(shù)，第一個(gè)...

    JackJiang 評(píng)論0 收藏0

  • 「中高級(jí)前端面試」JavaScript手寫代碼無敵秘籍

    摘要：第一種直接調(diào)用避免在不必要的情況下使用，是一個(gè)危險(xiǎn)的函數(shù)，他執(zhí)行的代碼擁有著執(zhí)行者的權(quán)利。來自于此外，實(shí)現(xiàn)需要考慮實(shí)例化后對(duì)原型鏈的影響。函數(shù)柯里化的主要作用和特點(diǎn)就是參數(shù)復(fù)用提前返回和延遲執(zhí)行。手寫路徑導(dǎo)航 實(shí)現(xiàn)一個(gè)new操作符 實(shí)現(xiàn)一個(gè)JSON.stringify 實(shí)現(xiàn)一個(gè)JSON.parse 實(shí)現(xiàn)一個(gè)call或 apply 實(shí)現(xiàn)一個(gè)Function.bind 實(shí)現(xiàn)一個(gè)繼承 實(shí)現(xiàn)一個(gè)J...

    Zhuxy 評(píng)論0 收藏0

  • vue的源碼分析（全局工具函數(shù)）

    摘要：創(chuàng)建一個(gè)自調(diào)用匿名函數(shù)，設(shè)計(jì)參數(shù)，并傳入對(duì)象。表示獨(dú)一無二的值聲明時(shí)不能使用，而是聲明時(shí)可以加參數(shù)，用于描述作為時(shí)不能被遍歷這個(gè)函數(shù)主要是檢測(cè)當(dāng)前對(duì)象是否有某種屬性。給變量賦值一個(gè)空的對(duì)象返回一個(gè)的函數(shù)，將函數(shù)的參數(shù)的帶入并賦值，返回。 VUE 2.6.8 (function (global, factory) { typeof exports === object && type...

    Baaaan 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<