Js中 函數apply 、call 的詳解

apply 和call 的區別

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

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 方法第一個參數也是作為函數上下文的對象，但是後面傳入的是一個參數列表，而不是單一數組。

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

對比 apply 我們可以看到差異，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 方法都會使函數立即執行，因此它們也可以用來呼叫函數。

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

call 和 bind 的差異

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

1.bind 發回傳值是函數

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

bind 方法不會立即執行，而是傳回一個改變了上下文 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 Cfunc1('A', 'B', 'C');           // linxin A Bfunc1('B', 'C');                // linxin B Cfunc.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)));
        }
    }}

以上是Js中 函數apply 、call 的詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！