javascript引用类型 ——Function类型

Function类型

每个函数都是Function类型的实例。由于函数是对象,因此函数名实际上就是一个指向 函数的指针。函数通常是使用声明 语法定义的。

        //1
        function sum(num1, num2){
            return num1 + num2;
        }
        //2
        var sum = function(num1, num2){
            return num1 + num2;
        };

函数2没有函数名,这是因为在使用函数表达式定义函数时,没有必要使用函数名--通过变量sum即可引用函数。

函数名仅仅是指向函数的指针, 一个函可能会有多个名字,如下例子:

        function sum(num1, num2) {
            return num1 + num2;
        }
        console.log(sum(10, 10)); //20

        var anotherSum = sum;
        console.log(anotherSum(10, 10)); //20

        sum = null;
        console.log(anotherSum(10, 10)) //20

没有重载

        function addSomeNumber(num) {
            return num + 100;
        }

        function addSomeNumber(num) {
            return num + 200;
        }
        var result = addSomeNumber(100);

        console.log(result); //300

函数表明与函数表达式

解析器会率先读取函数声明,至于函数表达式,则必须等到解析器执行到它所在的代码行,才会真正被解释执行。

        alert(sum(10, 10));

        function sum(num1, num2) {
            return num1 + num2;
        }

以上代码完全正常运行。因为在代码运行 之前,解析器就已经通过一个名为函数声明提升引擎在第一遍会声明函数并将它 们放到源代码的顶部。

        alert(sum(10, 10));

        var sum = function(num1, num2) {
            return num1 + num2;
        }

以上代码会发生错误。原因在于函数位于一个初始化的语句中,而不是一个函数声明。

作为值的函数

函数名本身就是变量,所以函数 也可以作为值来使用。

        function callSomeFunction(someFunction, someArgument) {
            return someFunction(someArgument);
        }

        function add10(num) {
            return num + 10;
        }

        var result = callSomeFunction(add10, 10);
        alert(result); //20

        function getGreeting(name) {
            return "Hello " + name;
        }
        var result2 = callSomeFunction(getGreeting, "Jin");
        alert(result2); //Hello Jin

函数内部属性

在函数内部,有两个特殊的对象:arguments 和 this。arguments的主要用途是保存函数参数。这个对象还有一个名叫callee的属性,该属性是一个指针。

        function factorial(num){
            if(num <= -1){
                return 1;
            } else {
                return num * arguments.callee(num-1)
            }
        }

另一个函数对象的属性:caller.

        function outer() {
            inner();
        }

        function inner() {
            alert(inner.caller);
        }
        outer();
    <script type="text/javascript">
        function outer() {
            inner();
        }

        function inner() {
            alert(arguments.callee.caller);
        }
        outer();

函数属性和方法

每个函数都包含两个属性:length 和 prototype

        function sayName(name) {
            alert(name);
        }

        function sum(num1, num2) {
            return num1 + num2;
        }

        function sayHi() {
            alert("Hi");
        }

        console.log(sayName.length); //1
        console.log(sum.length); //2
        console.log(sayHi.length); //0

sayHi没有参数,所以输出结果为0

每个函数都包含有两个非继承而来的方法:apply()和call().这两个 方法的用途是在特定的作用域中调用函数,实际上等于设置函数体内this对象的值。

apply()方法接受两个参数,一个是在其中运行的函数作用域,另一个是参数 数组。

        function sum(num1, num2) {
            return num1 + num2;
        }

        function callSum1(num1, num2) {
            return sum.apply(this, arguments);
        }

        function callSum2(num1, num2) {
            return sum.apply(this, [num1, num2]);
        }
        console.log(callSum1(10, 10)); //20
        console.log(callSum2(10, 10)); //20

call()方法与apply()方法的作用相同。它们的区别在于接收参数的方式不同。对于call(),第一个参数是this值没有变化,变化的其余参数都直接传递给函数。

        function sum(num1, num2) {
            return num1 + num2;
        }

        function callSum(num1, num2) {
            return sum.call(this, num1, num2);
        }

        console.log(callSum(10, 10)); //20

apply()和call()真正强大的是能够扩充函数运行的作用域:

        window.color = "red";
        var o = {
            color: "blue"
        };

        function sayColor() {
            alert(this.color);
        }

        sayColor;

        sayColor.call(window);//red
        sayColor.call(this); //red
        sayColor.call(o); //blue

bind()

该方法会创建一个函数的实例 ,其this值会被绑定到传给bind()函数的值

        window.color = "red";
        var o = {
            calor: "blue"
        };

        function sayColor() {
            alert(this.color);
        }
        var objectSayCorlor = sayColor.bind(o);
        objectSayCorlor(); 

猜你喜欢

转载自blog.csdn.net/weixin_42659625/article/details/82632850