a.call和apply方法詳解
--------------------------------------------------------------------------------
call方法:
語法:call([thisObj[,arg1[, arg2[, [,.argN]]]]])
定義:調用一個對象的一個方法,以另一個對象替換當前對象。
說明: call 方法可以用來代替另一個對象調用一個方法。call 方法可將一個函數的對象上下文從初始的上下文改變為由 thisObj 指定的新對象。如果沒有提供 thisObj 參數,那麼 Global 對象被用作 thisObj。
apply方法:
語法:apply([thisObj[,argArray]])
定義:應用某一對象的一個方法,用另一個對象替換當前對象。
說明:如果 argArray 不是一個有效的數組或者不是 arguments 對象,那麼將導致一個 TypeError。如果沒有提供 argArray 和 thisObj 任何一個參數,那麼 Global 對象將被用作 thisObj, 並且無法被傳遞任何參數。
實例學習:
function add(a,b){ alert(a+b);} function sub(a,b){ alert(a-b);} add.call(sub,3,1);
打印結果為4。調用add函數,但是調用對象(上下文環境)不是add對象,而是sub函數對象。注意:js中的函數其實是對象,函數名是對 Function 對象的引用。
function Animal(){ this.name = "Animal"; this.showName = function(){ alert(this.name);} } function Cat(){ this.name = "Cat"; } var animal = new Animal(); var cat = new Cat(); animal.showName.call(cat,",");//輸出結果為"Cat" animal.showName.apply(cat,[]);//輸出結果為"Cat"
call 的意思是把 animal 的方法放到cat上執行,上下文環境為cat,原來cat是沒有showName() 方法,現在是把animal 的showName()方法放到 cat上來執行,而cat的this.name是Cat。所以this.name 應該是 Cat
實現繼承
function Animal(name){ this.name = name; this.showName = function(){ alert(this.name);} } function Cat(name){ Animal.call(this, name); } var cat = new Cat("Black Cat"); cat.showName();
Animal.call(this) 的意思就是調用Animal方法,但是使用 this對象代替Animal對象,上下文環境變成了this。new Cat("Black Cat")中使用Animal.call給當前的上下文環境設置了屬性name和方法showName。
拓展:多重繼承
function Class10(){ this.showSub = function(a,b){ alert(a-b); } } function Class11(){ this.showAdd = function(a,b){ alert(a+b); } } function Class2(){ Class10.call(this); Class11.call(this); }
備注:js的繼承還有其他方法,例如使用原型鏈,這個不屬於本文的范疇,只是在此說明call 的用法。說了call ,當然還有 apply,這兩個方法基本上是一個意思,區別在於 call 的第二個參數可以是任意類型,而apply的第二個參數必須是數組或arguments。
b.arguments使用
--------------------------------------------------------------------------------
什麼是arguments
arguments 是是JavaScript裡的一個內置對象,它很古怪,也經常被人所忽視,但實際上是很重要的。所有主要的js函數庫都利用了arguments對象。所以agruments對象對於javascript程序員來說是必需熟悉的。
所有的函數都有屬於自己的一個arguments對象,它包括了函所要調用的參數。他不是一個數組,如果用typeof arguments,返回的是'object'。雖然我們可以用調用數據的方法來調用arguments。比如length,還有index方法。但是數 組的push和pop對象是不適用的。
使用arguments創建一個靈活的函數
看起來貌似argument對象使用起來十分有限,但是實際上它是一個非常有用的對象。你可以通過使用argument對象讓函數能夠調用數量不定 的參數。在Dean Edwards的base2庫裡有個格式化的函數,展示了這個靈活性。
function format(string) { var args = arguments; var pattern = new RegExp('%([1-' + arguments.length + '])', 'g'); return String(string).replace(pattern, function(match, index,position,all) { console.log(match + '&' + index + '&' + position + '&' + all); return args[index]; }); };
掉用format('And the %1 want to know whose %2 you %3', 'papers', 'shirt', 'wear');結果為"And the papers want to know whose shirt you wear";控制台打印為
%1&1&8&And the %1 want to know whose %2 you %3
%2&2&30&And the %1 want to know whose %2 you %3
%3&3&37&And the %1 want to know whose %2 you %3
把arguments對象轉換成一個真正的數組
雖然arguments對象不是一個真正的javascript數組,但是我們還是可以輕易的把它轉換成標准的數據 ,然後進行數組操作。
var args = Array.prototype.slice.call(arguments);
那麼現在這個變量args就含有一個含有函數所有參數的標准javascript數組對象。
拓展:使用上一節的format函數,通過預置的arguments對象創建函數
function makeFunc() { var args = Array.prototype.slice.call(arguments); var func = args.shift(); return function() { return func.apply(null, args.concat(Array.prototype.slice.call(arguments))); }; }
該方法會將第一個參數取出來,然後返回一個curry化函數,該curry化函數的參數(第二個arguments)將和makeFunc的從第二個參數開始的參數組合成新數組。並返回makeFunc第一個參數的apply調用
執行
var majorTom = makeFunc(format, "This is Major Tom to ground control. I'm %1."); majorTom("stepping through the door");
結果為:"This is Major Tom to ground control. I'm stepping through the door."
控制台打印:%1&1&41&This is Major Tom to ground control. I'm %1.
[function.]arguments.callee
說明:arguments.callee方法返回的是正在執行的函數本身。
callee 屬性是 arguments 對象的一個成員,它表示對函數對象本身的引用,這有利於匿名函數的遞歸或者保證函數的封裝性,例如下邊示例的遞歸計算1到n的自然數之和。而該屬性僅當相關函數正在執行時才可用。還有需要注意的是callee擁有length屬性,這個屬性有時候用於驗證還是比較好的。arguments.length是實參長度,arguments.callee.length是形參(定義時規定的需要的參數)長度,由此可以判斷調用時形參長度是否和實參長度一致。
//用於驗證參數 function calleeLengthDemo(arg1, arg2) { if (arguments.length==arguments.callee.length) { window.alert("驗證形參和實參長度正確!"); return; } else { alert("實參長度:" +arguments.length); alert("形參長度: " +arguments.callee.length); } } //遞歸計算 var sum = function(n){ if (n <= 0) return 1; else return n +arguments.callee(n - 1) } //比較一般的遞歸函數: var sum = function(n){ if (1==n) return 1; else return n + sum (n-1); }
調用時:alert(sum(100));其中函數內部包含了對sum自身的引用,函數名僅僅是一個變量名,在函數內部調用sum即相當於調用一個全局變量,不能很好的體現出是調用自身,這時使用callee會是一個比較好的方法。
拓展 functionName.caller
說明: 返回是誰調用了functionName 函數。functionName 對象是所執行函數的名稱。對於函數來說,caller 屬性只有在函數執行時才有定義。如果函數是由頂層調用的,那麼 caller 包含的就是 null 。如果在字符串上下文中使用 caller 屬性,那麼結果和 functionName.toString 一樣,也就是說,顯示的是函數的反編譯文本。 下面的例子說明了 caller 屬性的用法:
// caller demo { function callerDemo() { if (callerDemo.caller) { var a= callerDemo.caller.toString(); alert(a); } else { alert("this is a top function"); } } function handleCaller() { callerDemo(); } handleCaller();
執行結果:
c.undefined和null
--------------------------------------------------------------------------------
大多數計算機語言,有且僅有一個表示"無"的值,比如,C語言的NULL,Java語言的null,Python語言的none,Ruby語言的nil。有點奇怪的是,JavaScript語言居然有兩個表示"無"的值:undefined和null。這是為什麼?
相似性
在JavaScript中,將一個變量賦值為undefined或null,老實說,幾乎沒區別。
代碼如下:
var a = undefined; var a = null;
上面代碼中,a變量分別被賦值為undefined和null,這兩種寫法幾乎等價。
undefined和null在if語句中,都會被自動轉為false,相等運算符甚至直接報告兩者相等。
if (!undefined) console.log('undefined is false'); // undefined is false if (!null) console.log('null is false'); // null is false undefined == null // true
上面代碼說明,兩者的行為是何等相似!但是我們去查看undefined和null的各自的類型卻發現類型是不同的。js基礎類型中沒有null類型
typeof null;//"object" typeof undefined;//"undefined"
既然undefined和null的含義與用法都差不多,為什麼要同時設置兩個這樣的值,這不是無端增加JavaScript的復雜度,令初學者困擾嗎?Google公司開發的JavaScript語言的替代品Dart語言,就明確規定只有null,沒有undefined!
歷史原因
原來,這與JavaScript的歷史有關。1995年JavaScript誕生時,最初像Java一樣,只設置了null作為表示"無"的值。
根據C語言的傳統,null被設計成可以自動轉為0。
Number(null) // 0
5 + null // 5
但是,JavaScript的設計者Brendan Eich,覺得這樣做還不夠,有兩個原因。
首先,null像在Java裡一樣,被當成一個對象。
typeof null // "object"
但是,JavaScript的數據類型分成原始類型(primitive)和合成類型(complex)兩大類,Brendan Eich覺得表示"無"的值最好不是對象。
其次,JavaScript的最初版本沒有包括錯誤處理機制,發生數據類型不匹配時,往往是自動轉換類型或者默默地失敗。Brendan Eich覺得,如果null自動轉為0,很不容易發現錯誤。因此,Brendan Eich又設計了一個undefined。
最初設計
JavaScript的最初版本是這樣區分的:null是一個表示"無"的對象,轉為數值時為0;undefined是一個表示"無"的原始值,轉為數值時為NaN。
Number(undefined) // NaN
5 + undefined // NaN
目前的用法
但是,上面這樣的區分,在實踐中很快就被證明不可行。目前,null和undefined基本是同義的,只有一些細微的差別。
null表示"沒有對象",即該處不應該有值。典型用法是:
(1) 作為函數的參數,表示該函數的參數不是對象。
(2) 作為對象原型鏈的終點。
Object.getPrototypeOf(Object.prototype) // null
undefined表示"缺少值",就是此處應該有一個值,但是還沒有定義。典型用法是:
(1)變量被聲明了,但沒有賦值時,就等於undefined。
(2) 調用函數時,應該提供的參數沒有提供,該參數等於undefined。
(3)對象沒有賦值的屬性,該屬性的值為undefined。
(4)函數沒有返回值時,默認返回undefined。
var i; i // undefined function f(x){console.log(x)} f() // undefined var o = new Object(); o.p // undefined var x = f(); x // undefined
以上所述是小編給大家介紹的JS中call/apply、arguments、undefined/null方法詳解,希望對大家有所幫助。