1. 程式人生 > >前端學習筆記之js中apply()和call()方法詳解

前端學習筆記之js中apply()和call()方法詳解

經過網上的大量搜尋,漸漸明白了apply()和call方法的使用,為此寫一篇文章記錄一下。

定義

  • apply()方法

    Function.apply(obj,args)
    obj:這個物件將代替Function類裡this物件
    args:這個是陣列,它將作為引數傳給Function(args–>arguments)

  • call()方法

    Function.call(obj,[param1[,param2[,…[,paramN]]]])
    obj:這個物件將代替Function類裡this物件
    params:這個是一個引數列表

相同點與不同點

  1. 相同點

    作用是一樣的,call 和 apply 都是為了改變函式體內部 this 的指向,也就是把Function(即this)繫結到obj,這時候obj具備了Function的屬性和方法,說白一點就是obj繼承了Function的屬性和方法。

  2. 不同點

    相信大家也已經發現了,他們唯一區別就是接受引數的方式不太一樣,apply接受的是陣列引數,call接受的是連續引數。

方法使用

我們來看下面一個例子:

定義一個函式mul

function mul(a,b){
    return this+(a*b);
}

接著我們在控制檯上打印出

console.log
(mul.call(null,2,3)); console.log(mul.call('s',2,3)); console.log(mul.call(3,2,3)); console.log(mul.apply(null,[2,5])); console.log(mul.apply(2,[2,5]));

分別為:

[object Window]6
s6
9
[object Window]10
12

可能你會發現到,第一行 console.log(mul.call(null,2,3)) 沒什麼變化,call()的第一個引數就是改變的 this 指向,如果為 null 則函式的 this 不變,注意,如果在嚴格模式下(函式體或全域性的開頭有這句話:’use strict’),this 會變成 null。如果函式本身有引數,則從 call 的第二個引數開始寫起。
第二行 console.log(mul.call(’s’,2,3))

將函式的 this 指向一個字串 ‘s’. ===>> ‘s’+2*3=s6
第三行 console.log(mul.call(3,2,3)) 將函式的this指向一個數字3 ===>> 3+2*3=9
以此類推。

再舉一個例子

學js的都知道 Math.max() 方法,比如有三個引數2,3,4那麼我們要找出最大值可以這麼寫 Math.max(2,3,4) 那要是有 100 個或更多引數呢?這時候就可以結合 apply 和陣列輕鬆實現了。

比如定義一個數組

var arr=[2,3,4,5,6,7,8,9,10,23,45,66,22,11];

接著我們打印出

console.log(Math.max.apply(null,arr));

這樣一來就很簡潔明瞭。

再舉一個例子實現物件繼承

function Person(name,age) {
    this.name=name;
    this.age=age;
}

var Student=function(name,age,gender) {
    Person.call(this,name,age);//this繼承了person的屬性和方法
    this.gender=gender;
}
var student=new Student("陳安東", 20, "男");
alert("姓名:"+student.name+"\n"+"年齡:"+student.age+"\n"+"性別:"+student.gender);

輸出

姓名:陳安東
年齡:20
性別:男

這樣用call就實現了繼承(用apply也類似)