欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript 中 apply 、call 的詳解

 更新時間:2017年03月21日 09:44:09   作者:_林鑫  
本文主要介紹了JavaScript中apply 、call的相關知識。具有很好的參考價值。下面跟著小編一起來看下吧

apply 和 call 的區(qū)別

ECMAScript 規(guī)范給所有函數都定義了 call 與 apply 兩個方法,它們的應用非常廣泛,它們的作用也是一模一樣,只是傳參的形式有區(qū)別而已。

apply( )

apply 方法傳入兩個參數:一個是作為函數上下文的對象,另外一個是作為函數參數所組成的數組。

var obj = {
 name : 'linxin'
}
function func(firstName, lastName){
 console.log(firstName + ' ' + this.name + ' ' + lastName);
}
func.apply(obj, ['A', 'B']); // A linxin B

可以看到,obj 是作為函數上下文的對象,函數 func 中 this 指向了 obj 這個對象。參數 A 和 B 是放在數組中傳入 func 函數,分別對應 func 參數的列表元素。

call( )

call 方法第一個參數也是作為函數上下文的對象,但是后面?zhèn)魅氲氖且粋€參數列表,而不是單個數組。

var obj = {
 name: 'linxin'
}
function func(firstName, lastName) {
 console.log(firstName + ' ' + this.name + ' ' + lastName);
}
func.call(obj, 'C', 'D');  // C linxin D

對比 apply 我們可以看到區(qū)別,C 和 D 是作為單獨的參數傳給 func 函數,而不是放到數組中。

對于什么時候該用什么方法,其實不用糾結。如果你的參數本來就存在一個數組中,那自然就用 apply,如果參數比較散亂相互之間沒什么關聯,就用 call。

apply 和 call 的用法

1.改變 this 指向

var obj = {
 name: 'linxin'
}
function func() {
 console.log(this.name);
}
func.call(obj);  // linxin

我們知道,call 方法的第一個參數是作為函數上下文的對象,這里把 obj 作為參數傳給了 func,此時函數里的 this 便指向了 obj 對象。此處 func 函數里其實相當于

function func() {
 console.log(obj.name);
}

2.借用別的對象的方法

先看例子

var Person1 = function () {
 this.name = 'linxin';
}
var Person2 = function () {
 this.getname = function () {
  console.log(this.name);
 }
 Person1.call(this);
}
var person = new Person2();
person.getname();  // linxin

從上面我們看到,Person2 實例化出來的對象 person 通過 getname 方法拿到了 Person1 中的 name。因為在 Person2 中,Person1.call(this) 的作用就是使用 Person1 對象代替 this 對象,那么 Person2 就有了 Person1 中的所有屬性和方法了,相當于 Person2 繼承了 Person1 的屬性和方法。

3.調用函數

apply、call 方法都會使函數立即執(zhí)行,因此它們也可以用來調用函數。

function func() {
 console.log('linxin');
}
func.call();   // linxin

call 和 bind 的區(qū)別

在 EcmaScript5 中擴展了叫 bind 的方法,在低版本的 IE 中不兼容。它和 call 很相似,接受的參數有兩部分,第一個參數是是作為函數上下文的對象,第二部分參數是個列表,可以接受多個參數。

它們之間的區(qū)別有以下兩點。

1.bind 發(fā)返回值是函數

var obj = {
 name: 'linxin'
}
function func() {
 console.log(this.name);
}
var func1 = func.bind(obj);
func1();      // linxin

bind 方法不會立即執(zhí)行,而是返回一個改變了上下文 this 后的函數。而原函數 func 中的 this 并沒有被改變,依舊指向全局對象 window。

2.參數的使用

function func(a, b, c) {
 console.log(a, b, c);
}
var func1 = func.bind(null,'linxin');
func('A', 'B', 'C');   // A B C
func1('A', 'B', 'C');   // linxin A B
func1('B', 'C');    // linxin B C
func.call(null, 'linxin');  // linxin undefined undefined

call 是把第二個及以后的參數作為 func 方法的實參傳進去,而 func1 方法的實參實則是在 bind 中參數的基礎上再往后排。

在低版本瀏覽器沒有 bind 方法,我們也可以自己實現一個。

if (!Function.prototype.bind) {
 Function.prototype.bind = function () {
  var self = this,      // 保存原函數
   context = [].shift.call(arguments), // 保存需要綁定的this上下文
   args = [].slice.call(arguments); // 剩余的參數轉為數組
  return function () {     // 返回一個新函數
   self.apply(context,[].concat.call(args, [].slice.call(arguments)));
  }
 }
}

以上就是本文的全部內容,希望本文的內容對大家的學習或者工作能帶來一定的幫助,同時也希望多多支持腳本之家!

相關文章

  • JavaScript iframe的相互操作淺析

    JavaScript iframe的相互操作淺析

    下面對iframe的所有操作都是在同一個域下進行,暫不考慮跨域調用
    2009-10-10
  • uniapp使用uni-file-picker實現上傳功能

    uniapp使用uni-file-picker實現上傳功能

    這篇文章主要介紹了uniapp使用uni-file-picker實現上傳功能,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2024-07-07
  • uniapp中刷新本頁面的三種方法

    uniapp中刷新本頁面的三種方法

    這篇文章主要給大家介紹了關于uniapp中刷新本頁面的三種方法,刷新頁面的具體邏輯可以根據實際需求進行編寫,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
    2023-10-10
  • asp 的 分詞實現代碼

    asp 的 分詞實現代碼

    asp 的 分詞實現代碼...
    2007-05-05
  • JavaScript實現列表分頁功能特效

    JavaScript實現列表分頁功能特效

    最近在做一個小項目,有時需要制作靜態(tài)頁面網站,而一旦涉及到文章的分頁,實現起來非常麻煩,自己又剛入門,對js不是很熟悉,所以就拿來練練手。
    2015-05-05
  • JavaScript正則表達式exec/g實現多次循環(huán)用法示例

    JavaScript正則表達式exec/g實現多次循環(huán)用法示例

    這篇文章主要介紹了JavaScript正則表達式exec/g實現多次循環(huán)用法,結合實例形式分析了javascript正則表達式g修飾符相關使用技巧,需要的朋友可以參考下
    2017-01-01
  • Bootstrap 布局組件(全)

    Bootstrap 布局組件(全)

    這篇文章主要為大家詳細介紹了Bootstrap布局組件,感興趣的小伙伴們可以參考一下
    2016-07-07
  • 基于JavaScript制作一個骰子游戲

    基于JavaScript制作一個骰子游戲

    這節(jié)實驗我們將使用?HTML、CSS?和?JavaScript?構建一個骰子游戲。設置兩名玩家(一個人玩也行)然后擲骰子,獲得更高點數的玩家將贏得游戲,感興趣的可以了解一下
    2022-04-04
  • Javascript中正則表達式的應用詳解

    Javascript中正則表達式的應用詳解

    這篇文章主要為大家詳細介紹了Javascript中正則表達式的應用,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2022-02-02
  • 原生JavaScript實現進度條

    原生JavaScript實現進度條

    這篇文章主要為大家詳細介紹了原生JavaScript實現進度條,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-02-02

最新評論