1. 程式人生 > >js apply的用法與call的區別

js apply的用法與call的區別

https://blog.csdn.net/qq_35893120/article/details/78890357 ←原文

1.apply方法能劫持另外一個物件的方法,繼承另外一個物件的屬性。

Function.apply(obj,args)方法能接收兩個引數
obj:這個物件將代替Function類裡this物件
args:這個是陣列,它將作為引數傳給Function(args-->arguments)

<script type="text/javascript">
    /*定義一個人類*/
    function Person(name,age) {
        this.name=name; this.age=age;
    }
    /*定義一個學生類*/
    function Student(name,age,grade) {
        Person.apply(this,arguments); this.grade=grade;
    }
    //建立一個學生類
    var student=new Student("qian",21,"一年級");
    //測試
    alert("name:"+student.name+"\n"+"age:"+student.age+"\n"+"grade:"+student.grade);
    //大家可以看到測試結果name:qian age:21 grade:一年級
    //學生類裡面我沒有給name和age屬性賦值啊,為什麼又存在這兩個屬性的值呢,這個就是apply的神奇之處.
</script>

分析: Person.apply(this,arguments);

this:在建立物件在這個時候代表的是student

arguments:是一個數組,也就是[“qian”,”21”,”一年級”];

 function Student(name,age,grade) {
        Person.apply(this,arguments); this.grade=grade;
    }

this指的是這個函式也就是Student,通過apply方法劫取了Person的屬性和方法用在了this上邊

也就是通俗一點講就是:用學生去執行的人這個類裡面的內容,在人這個類裡面存在this.name等之類的語句,這樣就將屬性建立到了學生的物件裡面。

2.call示例

在Studen函式裡面可以將apply中修改成如下:

Person.call(this,name,age);

這樣就ok了

再一個例子:

<div id="box" style="background: blue;width: 500px"></div>
<script type="application/javascript">
    function changeStyle(attr, value)
    {
        this.style[attr] = value;
    }
    var box = document.getElementById('box');
    window.changeStyle.call(box, "height", "200px");//劫持changeStyle的屬性和方法用在box上
</script>

再來一個例子:

    function add(a,b)
    {
        alert(a+b);
    }
    function sub(a,b)
    {
        alert(a-b);
    }

    add.call(sub,1,1);    //sub通過call劫持了add的方法

 

call:和apply的意思一樣,只不過是引數列表不一樣.

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


3.什麼情況下用apply,什麼情況下用call

       在給物件引數的情況下,如果引數的形式是陣列的時候,比如apply示例裡面傳遞了引數arguments,這個引數是陣列型別,
並且在呼叫Person的時候引數的列表是對應一致的(也就是Person和Student的引數列表前兩位是一致的) 就可以採用 apply
, 如果我的Person的引數列表是這樣的(age,name),而Student的引數列表是(name,age,grade),這樣就可以用call來實現了,
也就是直接指定引數列表對應值的位置(Person.call(this,age,name,grade));

 

4.適用的一些其他巧妙用法

       細心的人可能已經察覺到,在我呼叫apply方法的時候,第一個引數是物件(this), 第二個引數是一個數組集合,
在呼叫Person的時候,他需要的不是一個數組,但是為什麼他給我一個數組我仍然可以將陣列解析為一個一個的引數,
這個就是apply的一個巧妙的用處,可以將一個數組預設的轉換為一個引數列表([param1,param2,param3] 轉換為(param1,param2,param3)這個如果讓我們用程式來實現將陣列的每一個項,來裝換為引數的列表,可能都得費一會功夫,藉助apply的這點特性,所以就有了以下高效率的方法:

a)Math.max可以實現得到陣列中最大的一項
       因為Math.max引數裡面不支援Math.max([param1,param2])也就是陣列但是它支援Math.max(param1,param2,param3 ...),所以可以根據剛才應用的那個特點來解決var max = Math.max.apply(null,array),這樣輕鬆的可以得到一個數組中最大的一項(apply會將一個數組裝換為一個引數接一個引數的傳遞給方法)

var arr = [22,21,13,12,12,25];
var max = Math.max.apply(null,arr);
console.log(max)

這塊在呼叫的時候第一個引數給了一個null,這個是因為沒有物件去呼叫這個方法,我只需要用這個方法幫我運算,得到返回的結果就行,.所以直接傳遞了一個null過去 this也可以

b)Math.min可以實現得到陣列中最小的一項
同樣和max是一個思想var min = Math.min.apply(null,array);

c)Array.prototype.push可以實現兩個數組合並
        
同樣推方法沒有提供推一個數組,但是它提供了push(param1,param,... paramN)所以同樣也可以通過apply來裝換一下這個陣列,即:
        

var arr1=new Array("1","2","3");
var arr2=new Array("4","5","6");
Array.prototype.push.apply(arr1,arr2);
console.log(arr1)

也可以這樣理解,arr1呼叫了push方法,引數是通過apply將陣列裝換為引數列表的集合.

通常在什麼情況下,可以使用apply類似Math.min等之類的特殊用法:
一般在目標函式只需要n個引數列表,而不接收一個數組的形式([param1[,param2[,…[,paramN]]]]),可以通過apply的方式巧妙地解決這個問題!