浅析JavaScript中Function对象

Posted 2021-01-08 天天向上吧

　　一、Function对象及其原型对象

　　Function对象是js中一个非常重要的对象，所有通过function关键字声明的函数，本质上都是由Function这个特殊的构造器对象创建出来的，也就是new出来的。

　　首先要明确的一点就是，在JS中万物皆对象，所以函数本身也是对象，只不过函数对象比较特殊，比其他对象多一个prototype属性。所以Function既是对象，也是函数（构造器），其实更准确的说就是函数对象。

　　其次，更特殊的一点是，由于js中所有的对象都是由构造器new出来的，那么Function既然也是个对象，那么它又是由谁构造出来的呢？这个答案我们可以考察它的prototype和__proto__属性就能得出答案。

console.log(Function.prototype == Function.__proto__);//true

　　也就是说，Function函数的prototype和__proto__指向的是同一个对象，换句话说就是Function自己构造了自己。到了这里，其实就成了“蛋”和“鸡”的关系了。到底是先有鸡还是先有蛋？这是个问题，但也不是问题，对于我们开发人员来说，我们压根没必要在这个问题上纠结，因为这个问题丝毫不会影响我们开发项目。我们这需要知道有这么一个扯淡的事情就OK了。

　　二、arguments

　　其实arguments有2个，惊喜不惊喜，以外不意外？

　　1.arguments属性

　　其语法是：function.arguments 属性：代表传入函数的实参，它是一个伪数组对象。已废弃。

function test(var1,var2){
    console.log(test.arguments[0]+test.arguments[1]);
}

　　注意： 1）、使用函数名调用；2）、arguments数组访问的是本次函数调用时传入的实参，而非上一次调用时的参数（对于嵌套或循环调用需注意！）。推荐使用函数内部的arguments对象:。

　　2.arguments对象

　　该对象是函数内部的本地变量，而不是函数的属性。使用示例

function test(var1,var2){
    arguments[0]=0;//可改变参数的值
    alert(arguments[0]+arguments[1]);
}
test(1,2);//将提示结果为2

　　arguments对象并不是一个真正的Array对象，而是一个伪数组，所以它没有数组的属性与方法（length除外）。

　　arguments对象的主要成员有：arguments.callee，arguments.length。

　　①arguments.callee返回该arguments对象所属的函数构造器（即函数），从而可实现匿名函数的递归等 ，例如

function create() {
   return function(n) {
      if (n <= 1)
         return 1;
      return n * arguments.callee(n - 1);//调用该arguments所属的匿名函数构造器。
   };
}
var result = create()(5); // returns 120 (5 * 4 * 3 * 2 * 1)

　　②arguments.length ： 返回函数被调用时实际传参的个数。

　　来个小例子来说下arguments的用处吧，比如我们封装一个$(selector){}函数，用来获取DOM对象，要求这里的selector能使用各种合法的选择器，比如："div"，“.hide"，”#btn"。那么我们可以这么写：

　　function $(selector) {  
        if(arguments.length ！= 1){
            throw new Error("当前参数为： " + arguments.length + "个,但是函数要求必须为1个参数."); 
        }
        if(selector.length > 0){
            var firstChar = selector.substr(0,1);// [#|.|tag]
            var lastString = selector.substr(1);
            switch(firstChar){
                case "#":
                    return document.getElementById(lastString);
                case ".":
                    return document.getElementsByClassName(lastString);
                default:
                    document.getElementsByTagName(selector);
            }
        }        
    }

　　我们首先要判断用户有没有传递参数，如果没有或者参数超过一个就要报错，那么如何判断用户传递的参数的个数呢？这时候arguments.length就派上用场了。

　　三、length属性

　　此length属性表示声明的函数的形参个数。

　　上面说了，在函数内部可以使用arguments对象，arguments对象有一个length属性。

　　其实每一个function对象自己本身也有一个length属性，这个length属性是函数对象的一个属性值，指明该函数期望多少个参数，意即形参的个数。

　　四、方法成员：call()   、 apply() 、bind()

　　这三个是一个比较难理解的部分，我们放在下一个专题来分析。