js基礎篇——call/apply、arguments、undefined/null

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