DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 全面了解構造函數繼承關鍵apply call
全面了解構造函數繼承關鍵apply call
編輯:關於JavaScript     

主要我是要解決一下幾個問題:

 1.  apply和call的區別在哪裡

 2.  apply的其他巧妙用法(一般在什麼情況下可以使用apply)

我首先從網上查到關於apply和call的定義,然後用示例來解釋這兩個方法的意思和如何去用.

apply:方法能劫持另外一個對象的方法,繼承另外一個對象的屬性.

Function.apply(obj,args)方法能接收兩個參數

obj:這個對象將代替Function類裡this對象

args:這個是數組,它將作為參數傳給Function(args-->arguments)

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

Function.call(obj,param1,param2,…,paramN)

obj:這個對象將代替Function類裡this對象

params:這個是一個參數列表

apply示例:

<script type="text/javascript">
/*定義一個人類*/
function Person(name,age) {
  this.name=name; this.age=age;
}
 /*定義一個學生類*/
functionStudent(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”,”一年級”];

也就是通俗一點講就是:用student去執行Person這個類裡面的內容,在Person這個類裡面存在this.name等之類的語句,這樣就將屬性創建到了student對象裡面

 call示例

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

Person.call(this,name,age);

區別

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

apply的一些其他巧妙用法

細心的人可能已經察覺到,在我調用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…),所以可以根據剛才apply的那個特點來解決 var max=Math.max.apply(null,array),這樣輕易的可以得到一個數組中最大的一項

(apply會將一個數組裝換為一個參數接一個參數的傳遞給方法)

這塊在調用的時候第一個參數給了一個null,這個是因為沒有對象去調用這個方法,我只需要用這個方法幫我運算,得到返回的結果就行,.所以直接傳遞了一個null過去

b)  Math.min  可以實現得到數組中最小的一項

同樣和 max是一個思想

var min=Math.min.apply(null,array);

c)   Array.prototype.push 可以實現兩個數組合並

同樣push方法沒有提供push一個數組,但是它提供了push(param1,param,…paramN) 所以同樣也可以通過apply來裝換一下這個數組,即:

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

也可以這樣理解,arr1調用了push方法,參數是通過apply將數組裝換為參數列表的集合.

以上就是小編為大家帶來的全面了解構造函數繼承關鍵apply call全部內容了,希望大家多多支持~

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved