JavaScript 中 apply 、call 的詳解

Meils 發(fā)布于2019-08-21 15:27 / 445人閱讀

摘要：參數和是放在數組中傳入函數，分別對應參數的列表元素。而原函數中的并沒有被改變，依舊指向全局對象。保存原函數保存需要綁定的上下文剩余的參數轉為數組返回一個新函數下一篇介紹閉包中閉包的詳解。

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，如果參數比較散亂相互之間沒什么關聯(lián)，就用 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 中閉包的詳解。

更多文章：lin-xin/blog

云服務器 GPU云服務器 JS中bind、call和apply的作 apply與call的區(qū)別 javascript中apply js中的call和apply

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

轉載請注明本文地址：http://systransis.cn/yun/88192.html

JS中的call、apply、bind方法詳解

摘要：不能應用下的等方法。首先我們可以通過給目標函數指定作用域來簡單實現方法保存，即調用方法的目標函數考慮到函數柯里化的情況，我們可以構建一個更加健壯的這次的方法可以綁定對象，也支持在綁定的時候傳參。原因是，在中，多次是無效的。 bind 是返回對應函數，便于稍后調用；apply 、call 則是立即調用。 apply、call 在 javascript 中，call 和 apply 都是...

zombieda 2019-08-23 15:27 評論0 收藏0
JS基礎篇--call、apply、bind方法詳解

摘要：首先我們可以通過給目標函數指定作用域來簡單實現方法保存，即調用方法的目標函數考慮到函數柯里化的情況，我們可以構建一個更加健壯的這次的方法可以綁定對象，也支持在綁定的時候傳參。原因是，在中，多次是無效的。而則會立即執(zhí)行函數。 bind 是返回對應函數，便于稍后調用；apply 、call 則是立即調用。 apply、call 在 javascript 中，call 和 apply 都是...

lastSeries 2019-08-21 12:10 評論0 收藏0
javascript技術難點（三）之this、new、apply和call詳解

摘要：第四點也要著重講下，記住構造函數被操作，要讓正常作用最好不能在構造函數里 4) this、new、call和apply的相關問題講解this指針的原理是個很復雜的問題，如果我們從javascript里this的實現機制來說明this，很多朋友可能會越來越糊涂，因此本篇打算換一個思路從應用的角度來講解this指針，從這個角度理解this指針更加有現實意義。下面我們看看在ja...

ghnor 2019-08-21 10:27 評論0 收藏0
詳解this、call和apply

摘要：的指向除去不常用的和，的指向大致可分為以下四種作為對象的方法調用作為普通函數調用構造器調用或調用作為對象的方法調用當函數作為對象的方法被調用時，指向該對象。 this 和其他語言不同，JavaScript的this總是指向一個對象，而具體指向哪個對象是在運行時基于函數的執(zhí)行環(huán)境動態(tài)綁定的，而非函數被聲明時的環(huán)境。 this的指向除去不常用的with和eval，this的指向大致可分為...

yiliang 2019-08-21 10:50 評論0 收藏0
深究JavaScript——函數調用與this詳解

摘要：構造器的目的是要創(chuàng)建一個新對象并對其進行設置，然后將其作為構造器的返回值進行返回，是通過函數調用初始化創(chuàng)建新對象。或方法進行調用通過或調用函數，被調用的函數的指向第一個參數指向的。 this ??JavaScript的this總是指向一個對象,而這個對象是基于函數運行時動態(tài)綁定的，并非函數聲明時綁定。函數調用方式作為對象的方法調用作為普通函數進行調用作為構造器進行調用通過a...

PiscesYE 2019-08-21 11:26 評論0 收藏0