JavaScript之Function类型

2022-03-27 12:46:44

1. 创建方式

    //1.函数声明

    function sum(num1,num2){

        return num1+num2;

    }

    //2.函数表达式

    var sum = function(num1,num2){

        return num1+num2;

    }

    //3.使用new关键字，创建Function类型的实例----不推荐

    var sum = new Function("num1","num2","return num1+num2;");

    console.log(sum(1,2));//3

函数声明和函数表达式最大的区别是：函数声明提升(可以在声明前调用该函数)

2. 理解：“函数是对象，函数名是指向该对象的指针”

例1.

    function sum(num1, num2) {

        return num1 + num2;

    }

    var anotherSum = sum;

    sum = null;

    console.log(anotherSum(1, 2));//3

例2.

    function echo() {

        return 4;

    }

    function echo(num) {

        return num;

    }

    console.log(echo());//undefined

JavaScript中没有重载：函数名为绑定函数的引用，一个引用只能绑定一个函数对象，所以JS中函数没有重载！

3. 内置对象：arguments和this

arguments

该内置对象的行为非常类似Array类型，但实际上并非Array的实例。

例3.

function test(a,b,c){

    console.log(arguments[0]);

    console.log(arguments[1]);

    console.log(arguments[2]);

    console.log(arguments.length);

}

test(1,'a');

arguments对象的长度是由实参个数而不是形参个数决定！

例2.

    function factorial(num){

        if (1 == num) {

            return 1;

        } else if (num > 1) {

            return num * arguments.callee(num - 1);

        }

    }

arguments属性callee为此arguments对象所在的当前函数引用，可以通过它实现递归，解耦函数名！

this

链接 http://www.cnblogs.com/ZHeGeS/p/4715570.html

4. 固有的属性和方法

caller

caller（保存调用当前函数的函数的引用），即调用者的引用。如果在全局作用域中调用当前函数，它的值为null

prototype

链接：http://www.cnblogs.com/ZHeGeS/p/4870332.html

call和apply

每个函数都包含两个非继承而来的方法：apply和call(在特定作用域中调用函数，等同于设置函数体内this对象的值)

用法：

call(thisObj,var1,var2,var3)

apply(thisObj,[var1,var2,var3]/arguments)

区别：

call要逐个填入参数、apply不仅可以直接传入参数数组而且可以把当前函数的arguments对象传入！

    function sum(num1,num2){

        return num1+num2;

    }

    function callsum1(num1,num2){

        return sum.apply(this,arguments);//这里的this为window对象

    }

    function callsum2(num1,num2){

        return sum.apply(this,[num1,num2]);

    }

    function callsum3(num1,num2){

        return sum.call(this,num1,num2);

    }

    console.log(callsum1(10,10)+" "+callsum2(10,10)+" "+callsum3(10,10));

call/apply真正强大的地方在于：扩充函数赖以运行的作用域的同时，不需要与方法有任何耦合关系！

例1.通过耦合的方式扩充作用域：

var name = "ZheG"

function echoName(){

    alert(this.name);

}

var echo = {

    name:"sansan",

    echoName:echoName

}

echoName();//"ZheG"

echo.echoName();//"sansan"

例2.采用apply/call通过解耦的方式扩充作用域：

var name = "ZheG"

function echoName(){

    alert(this.name);

}

var echo = {

    name:"sansan"

}

echoName();//"ZheG"

echoName.call(echo);//"sansan"

alert(echo.echoName);//undefined,可知echoName和对象echo没有任何关系了！

例3.

    $(".login-button:first").click(function(){

        $(this).attr("buttonName","loginBtn");

        echoBtnName();//由于当时作用域中的this为windows，所以打印undefined

        echoBtnName.call(this);//扩展echoBtnName作用域，使得this为当前点击Dom对象，打印“loginBtn”

    });

    function echoBtnName(){

       //alert(this.buttonName);this只能获得原生的Dom属性，无法获得自定义的属性！

        //alert(this.tagName);//获得标签名称

        alert($(this).attr("buttonName"));//alert($(this).attr("buttonname"));也可以

    }

码农公寓