理解Javascript中的Function

函数是 JavaScript 中的基本数据类型，在函数这个对象上定义了一些属性和方法，下面我们逐一来介绍这些属性和方法，这对于理解Javascript的继承机制具有一定的帮助。

1. 属性(Properties)
   • arguments

     获取当前正在执行的 Function 对象的所有参数，是一个类似数组但不是数组的对象，说它类似数组是因为其具有数组一样的访问性质及方式，可以由arguments[n]来访问对应的单个参数的值，并拥有数组长度属性length。还有就是arguments对象存储的是实际传递给函数的参数，而不局限于函数声明所定义的参数列表（length)，而且不能显式创建 arguments 对象。下面的Sample说明了这些性质。

     

     function testArg(a, b) {    var actCount = arguments.length,        expCount = testArg.length,        result;    result = "Expected arguments' count is " + expCount + ";<br/>";    result += "Actual arguments' count is " + actCount + ".<br/>";    result += "They are:<br/>";    for (var i = 0; i < actCount; i++) {        result += arguments[i] + ";<br/>";    }    if (arguments instanceof Array) {        result += "arguments is an Array instance."    } else if (arguments instanceof Object) {        result += "arguments is an Object instance."    }    document.write(result);}testArg(1);//output result is:Expected arguments' count is 2;Actual arguments' count is 1.They are:1;arguments is an Object instance.

     
   • length

     获取函数定义的参数个数，

     functionName.length

     不同于arguments.length，这点我们在上面有介绍。因为Javascript调用函数时候对函数参数不作任何个数和类型检查，也就没有函数调用错误概念。但是我们可以利用functionName.length和arguments.length的不同，在函数调用内部来检测参数个数检测。

     

     function checkVarCount(a, b) {    if (checkVarCount.length !== arguments.length) {        alert("The count of the parameters you passed into the function doesn't match the function definition.");    }    alert("Successfully call the function");}checkVarCount(1, 2);//Successfully call the functioncheckVarCount(1);//The count of the parameters you passed into the function doesn't match the function definition.

     
   • caller

     获取调用当前函数的函数。caller属性只有当函数正在执行时才被定义。

     functionName.caller

     如果函数是从 JavaScript 程序的顶层调用的，则caller包含null。如果在字符串上下文中使用 caller 属性，则其结果和 functionName.toString 相同，也就是说，将显示函数的反编译文本。

     

     function test() {    if (test.caller == null) {        document.write("test is called from the toppest level");    } else {        document.write("test is called from the function:<br/>");        document.writeln(test.caller.toString());    }    document.write("<br />");}//call from the top leveltest();//output: test is called from the toppest levelfunction testOuter() {    test();}//call from the function testOutertestOuter();//output://test is called from the function://function testOuter() { test(); }

     
   • callee

     返回正被执行的 Function 对象，即指定的 Function 对象的正文。

     [functionName.]arguments.callee

     callee 属性是 arguments 对象的一个成员，该属性仅当相关函数正在执行时才可用。通常这个属性被用来递归调用匿名函数。

     

     var fac = function(n){  if (n <= 0)     return 1;  else     return n * arguments.callee(n - 1);}(4);document.write(fac);//24

     
   • constructor

     获取创建某个对象的函数。constructor 属性是每个具有原型的对象的原型成员。 这包括除 Global 和 Math 对象之外的所有内部 JavaScript 对象。 constructor 属性就是用来构造对象实例的函数引用。

     

     // A constructor function.function MyObj() {    this.number = 1;}var x = new String("Hi");if (x.constructor == String)    document.write("Object is a String.");document.write ("<br />");var y = new MyObj;if (y.constructor == MyObj)    document.write("Object constructor is MyObj.");// Output:// Object is a String.// Object constructor is MyObj.

     
   • prototype

     获取对象的原型。每一个构造函数都有一个prototype属性，指向另一个对象。这个对象的所有属性和方法，都会被构造函数的实例继承。这意味着，我们可以把那些不变的属性和方法，直接定义在prototype对象上。

     

     function Man(name, age) {    this.name = name;    this.age = age;}Man.prototype.sex = "M";Man.prototype.struggle = function () {    alert("day day up!!!!");}var li = new Man("Leo", 10);alert(li.sex);//Mli.struggle();//day day upMan.prototype.isStrong = true;alert(li.isStrong);//true

     

     这样我们也可以向已定义好的对象（包括javascript提供的原生对象）中追加方法和属性，

     

     var aa = new Number(2);alert(typeof (aa.add)); //undefinedNumber.prototype.add = function (add1) {    return this + add1;}alert(aa.add(1)); // 3

     
2. 方法
   • apply

     调用函数，并用指定对象替换函数的this值，同时用指定数组替换函数的参数。

     functionName.apply([thisObj[,argArray]])

     如果argArray为无效值，则会抛出"Object expected"错误；如果thisObj和argArray都没有提供，则会使用当前this作为thisObj

     

     function callMe(arg1, arg2) {    var s = "";    s += "this value: " + this;    s += "<br />";    for (i in callMe.arguments) {        s += "arguments: " + callMe.arguments[i];        s += "<br />";    }    return s;}document.write("Original function: <br/>");document.write(callMe(1, 2));document.write("<br/>");document.write("Function called with apply: <br/>");document.write(callMe.apply(3, [4, 5]));document.write("<br/>");document.write("Function called with apply with invalid array: <br/>");try{    document.write(callMe.apply(3,2));} catch (e) {    document.write(e.message);}document.write("<br/><br/>");document.write("Function called with apply without any argument: <br/>");document.write(callMe.apply());//Output result://Original function: //this value: [object Window]//    arguments: 1//    arguments: 2//Function called with apply: //this value: 3//    arguments: 4//    arguments: 5//Function called with apply with invalid array: //Function.prototype.apply: Arguments list has wrong type//Function called with apply without any argument: //this value: [object Window]

     
   • call

     调用一个对象的方法，用另一个对象替换当前对象。

     call([thisObj[, arg1[, arg2[, [, argN]]]]])

     它允许您将函数的 this 对象从初始上下文变为由 thisObj 指定的新对象。 如果没有提供 thisObj 参数，则 global 对象被用作 thisObj。与apply方法唯一不同的地方是，apply的第二个参数类型必须是Array，而call方法是将所有的参数列举出来，用逗号分隔。

     

     function callMe(arg1, arg2){    var s = "";    s += "this value: " + this;    s += "<br />";    for (i in callMe.arguments) {        s += "arguments: " + callMe.arguments[i];        s += "<br />";    }    return s;}document.write("Original function: <br/>");document.write(callMe(1, 2));document.write("<br/>");document.write("Function called with call: <br/>");document.write(callMe.call(3, 4, 5));// Output: // Original function: // this value: [object Window]// arguments: 1// arguments: 2// Function called with call: // this value: 3// arguments: 4// arguments: 5

     

      

   • bind

     对于给定函数，创建具有与原始函数相同的主体的绑定函数。 在绑定功能中，this对象解析为传入的对象。 该绑定函数具有指定的初始参数。

     function.bind(thisArg[,arg1[,arg2[,argN]]])

     其中function, thisArg为必选项。返回一个与 function 函数相同的新函数，只不过函数中的this对象和参数不同。

     

     // Define the original function.var checkNumericRange = function (value) {    if (typeof value !== 'number')        return false;    else        return value >= this.minimum && value <= this.maximum;}// The range object will become the this value in the callback function.var range = { minimum: 10, maximum: 20 };// Bind the checkNumericRange function.var boundCheckNumericRange = checkNumericRange.bind(range);// Use the new function to check whether 12 is in the numeric range.var result = boundCheckNumericRange (12);document.write(result);// Output: true

     

     以下代码演示如何使用 arg1[,arg2[,argN]]] 参数。 该绑定函数将 bind 方法中指定的参数用作第一个参数和第二个参数。 在调用该绑定函数时，指定的任何参数将用作第三个、第四个参数（依此类推）。

     

     // Define the original function with four parameters.var displayArgs = function (val1, val2, val3, val4) {    document.write(val1 + " " + val2 + " " + val3 + " " + val4);}var emptyObject = {};// Create a new function that uses the 12 and "a" parameters// as the first and second parameters.var displayArgs2 = displayArgs.bind(emptyObject, 12, "a");// Call the new function. The "b" and "c" parameters are used// as the third and fourth parameters.displayArgs2("b", "c");// Output: 12 a b c 

     
     在对象定义内部使用bind方法可以将某个事件绑定到对象内部的某个方法，
     

     <input type="button" id="start" value="Start" /><input type="button" id="stop" value="Stop" /><script type="text/javascript">    function Car(owner) {        this.owner = owner;        this.start = function () {            //start the car            console.log(this);            //output: Car {owner: "Mike", start: function, stop: function} check.html:14            console.log(this.owner + "'s car is starting.");            //output: Mike's car is starting.         };        this.stop = function () {            console.log(this);            //output: <input type="button" id="stop" value="Stop" />            console.log(this.owner + "'s car is starting.");            //output: undefined's car is stopping.        };    }    var btnStart = document.getElementById("start"),        btnStop = document.getElementById("stop"),        someCar = new Car("Mike");    if (document.attachEvent) {        btnStart.attachEvent("onClick", someCar.start.bind(someCar));        btnStop.attachEvent("onClick", someCar.stop);    } else if (document.addEventListener) {        btnStart.addEventListener("click", someCar.start.bind(someCar), false);        btnStop.addEventListener("click", someCar.stop, false);    }</script>

     

     从上面Sample我们发现，当不使用bind方法的时候，事件里面的this指向的触发click事件dom元素input，它当然没有owner属性；如果利用bind指定事件里面的this对象，就能达到我们想要的效果。

   • toString

     返回对象的字符串表示形式。

     objectname.toString([radix])

     objectname必需，指定需要获取字符串表示形式的对象。radix可选，为将数字值转换为字符串指定一个基数，此值仅用于数字。

     toString 方法是一个所有内置的 JavaScript 对象的成员。 它的行为取决于对象的类型：

     ObjectBehaviorArray将 Array 的元素转换为字符串。 结果字符串被连接起来，用逗号分隔。Boolean如果布尔值为 true，则返回“true”。 否则返回“false”。Date返回日期的文本表示形式。Error返回一个包含相关错误信息的字符串。Function返回如下格式的字符串，其中 functionname 是一个函数的名称，此函数的 toString 方法被调用：

     function functionname( ) { [native code] }

     Number返回数字的文字表示形式。String返回 String 对象的值。Default返回 "[object objectname]"，其中 objectname 为对象类型的名称。
   • valueOf

     返回对象的原生值。

     object.valueOf( )

     Javascript内部各个对象定义的valueOf不同：

     ObjectReturn valueArray 返回数组实例。 Boolean 布尔值。 Date 从 UTC 1970 年 1 月 1 日午夜开始的存储的时间值（以毫秒为单位）。 Function 函数本身。 Number 数字值。 Object 对象本身。 这是默认值。 String 字符串值。

     Math 和 Error 对象都没有 valueOf 方法。

转自：http://www.cnblogs.com/liontone/p/3970420.html