JavaScript 中 apply 、call 的詳解

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

摘要：參數(shù)和是放在數(shù)組中傳入函數(shù)，分別對(duì)應(yīng)參數(shù)的列表元素。而原函數(shù)中的并沒(méi)有被改變，依舊指向全局對(duì)象。保存原函數(shù)保存需要綁定的上下文剩余的參數(shù)轉(zhuǎn)為數(shù)組返回一個(gè)新函數(shù)下一篇介紹閉包中閉包的詳解。

apply 和 call 的區(qū)別

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

apply( )

apply 方法傳入兩個(gè)參數(shù)：一個(gè)是作為函數(shù)上下文的對(duì)象，另外一個(gè)是作為函數(shù)參數(shù)所組成的數(shù)組。

var obj = {
    name : "linxin"
}

function func(firstName, lastName){
    console.log(firstName + " " + this.name + " " + lastName);
}

func.apply(obj, ["A", "B"]);    // A linxin B

可以看到，obj 是作為函數(shù)上下文的對(duì)象，函數(shù) func 中 this 指向了 obj 這個(gè)對(duì)象。參數(shù) A 和 B 是放在數(shù)組中傳入 func 函數(shù)，分別對(duì)應(yīng) func 參數(shù)的列表元素。

call( )

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

var obj = {
    name: "linxin"
}

function func(firstName, lastName) {
    console.log(firstName + " " + this.name + " " + lastName);
}

func.call(obj, "C", "D");       // C linxin D

對(duì)比 apply 我們可以看到區(qū)別，C 和 D 是作為多帶帶的參數(shù)傳給 func 函數(shù)，而不是放到數(shù)組中。

對(duì)于什么時(shí)候該用什么方法，其實(shí)不用糾結(jié)。如果你的參數(shù)本來(lái)就存在一個(gè)數(shù)組中，那自然就用 apply，如果參數(shù)比較散亂相互之間沒(méi)什么關(guān)聯(lián)，就用 call。

apply 和 call 的用法 1.改變 this 指向

var obj = {
    name: "linxin"
}

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

func.call(obj);       // linxin

我們知道，call 方法的第一個(gè)參數(shù)是作為函數(shù)上下文的對(duì)象，這里把 obj 作為參數(shù)傳給了 func，此時(shí)函數(shù)里的 this 便指向了 obj 對(duì)象。此處 func 函數(shù)里其實(shí)相當(dāng)于

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

2.借用別的對(duì)象的方法

先看例子

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 實(shí)例化出來(lái)的對(duì)象 person 通過(guò) getname 方法拿到了 Person1 中的 name。因?yàn)樵?Person2 中，Person1.call(this) 的作用就是使用 Person1 對(duì)象代替 this 對(duì)象，那么 Person2 就有了 Person1 中的所有屬性和方法了，相當(dāng)于 Person2 繼承了 Person1 的屬性和方法。

3.調(diào)用函數(shù)

apply、call 方法都會(huì)使函數(shù)立即執(zhí)行，因此它們也可以用來(lái)調(diào)用函數(shù)。

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

call 和 bind 的區(qū)別

在 EcmaScript5 中擴(kuò)展了叫 bind 的方法，在低版本的 IE 中不兼容。它和 call 很相似，接受的參數(shù)有兩部分，第一個(gè)參數(shù)是是作為函數(shù)上下文的對(duì)象，第二部分參數(shù)是個(gè)列表，可以接受多個(gè)參數(shù)。
它們之間的區(qū)別有以下兩點(diǎn)。

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

var obj = {
    name: "linxin"
}

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

var func1 = func.bind(obj);
func1();                        // linxin

bind 方法不會(huì)立即執(zhí)行，而是返回一個(gè)改變了上下文 this 后的函數(shù)。而原函數(shù) func 中的 this 并沒(méi)有被改變，依舊指向全局對(duì)象 window。

2.參數(shù)的使用

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 是把第二個(gè)及以后的參數(shù)作為 func 方法的實(shí)參傳進(jìn)去，而 func1 方法的實(shí)參實(shí)則是在 bind 中參數(shù)的基礎(chǔ)上再往后排。

在低版本瀏覽器沒(méi)有 bind 方法，我們也可以自己實(shí)現(xiàn)一個(gè)。

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

下一篇介紹閉包：JavaScript 中閉包的詳解。

更多文章：lin-xin/blog