创建函数的几种方式

<script type="text/javascript">
    //1.直接声明函数
    function funcName(/*参数列表*/){
        //函数体
    }
    //2.函数表达式
    var funcName = function(){

    };
    //3.new Function
    var func = new Function();
</script>

函数的构造函数Function

在 js 中 使用Function可以实例化函数对象。也就是说在 js 中函数与普通对象一样, 也是一个对象类型. 函数是 js 中的一等公民.

• 函数是对象, 就可以使用对象的动态特性
• 函数是对象, 就有构造函数创建函数
• 函数是函数, 可以创建其他对象
• 函数是唯一可以限定变量作用域的结构

要解决的问题

• Function 如何使用
• Function 与函数的关系
• 函数的原型链结构

Function 的使用

语法

//Function函数所有的参数全都是字符串
//Function函数的作用就是将所有的参数组合起来，变成一个函数
//1、如果只传一个参数，那么这个函数必然是函数体
//2、如果传多个参数，那么最后一个参数表示函数体，前面的参数代表将要创建的函数的参数
//3、如果不传参数，表示创建一个空函数
new Function(arg1, arg2, arg3, ..., argN, body);

创建一个打印一句话的函数

//传统的方式
function foo(){
    console.log("你好");
}
//使用Function
var func = new Function("console.log('你好');");

这里两种方式创建出来的函数功能是一样的。

创建一个空函数

//传统的方式
function foo(){}
//Function
var func = new Function();

创建一个有参数的函数

//传统的方式
function foo(num){
    console.log(num);
}

//Function

var func = new Function(){"num", "console.log(num);"};

解决代码太长的问题

• 利用字符串特性

function foo ( a, b, c ) {
    var res = a > b ? a : b;
    res = res > c ? res : c;
    return res;
}
var func = new Function( 'a', 'b', 'c', 'return foo( a, b, c );');

• 利用+连接字符串

var func = new Function( 'a', 'b', 'c',

 'var res = a > b ? a : b;' +

 'res = res > c ? res : c;' +

 'return res;' );

• ES6 语法（很少有浏览器实现） 使用键盘左上角的` 表示可换行字符串的界定符，之前我们用的是单引号或者双引号来表示一个字符串字面量，在ES6中可以用反引号来表示该字符串可换行。
• (最终)利用 DOM 的特性完成该方法

<div id="code" style="display:none">
var res = a > b ? a : b;
res = res > c ? res : c;
return res;
</div>
<script>
var txt = document.getElementbyId("code).innerHtml + ' ';
var func = new Function('a', 'b', 'c', txt);
</script>

练习（重点）

<script type="text/javascript">
    var func = new Function("console.log('我是动态创建的函数')");
    func();
    //Function这构造函数，可以用来新建函数对象
    //语法
    //  0，一参数都不传，创建一个空的函数,var 函数名 = new Function();
    //  1，只传一个参数，这个参数就是函数体，var 函数名 = new Function("函数体");
    //  2，传多个参数的情况，最后一个参数是函数体，前面的参数都是该函数的参数

    //练习: 利用 Function 创建一个函数, 要求传入两个数字, 打印其和
    var f1 = new Function("num1","num2","console.log(num1+num2);");
    f1(2,5);

    //练习：使用Function创建一个打印4句歌词的函数
    var f2 = new Function("console.log('四句歌词');");
    f2();

    //练习: 利用 Function 创建一个求三个数中最大数的函数.
    var f3 = new Function("a","b","c","return (a>b?a:b)>c?(a>b?a:b):c;");
    console.log(f3(2,12,8));



    //如何解决使用Function创建函数时，代码过长的的问题
    //  1，如何使字符串拼接让代码换行
    //  2，使用模板的方式，将代码写在模板标签内
    //  3，使用反引号（`） 引住字符串，那么就可以 换行了

    //练习：传入一个数组，求数组中的最大数
    var max = new Function("arr",
            "var max=arr[0];"+
            "for(var i=1;i<arr.length;i++){" +
            "max = arr[i]>max?arr[i]:max;"+
            "}" +
            "return max;"
    );
    console.log(max([23, 4, 8, 101, 102]));

    //练习: 利用 Function 创建一个函数, 要求允许函数调用时传入任意个数参数, 并且函数返回这些数字中最大的数字
    window.onload = function () {
        var script = document.getElementById("funcContent");
        var str = script.innerHTML;
        var max = new Function("arr",str);
        console.log(max([1, 23, 12, 24, 8]));
    }

    //练习：利用 Function 创建一个函数，求数组最大值，函数体使用反引号。
    var str = `adfafdsa
    asdfas`;
    console.log(str);
    var max2 = new Function("arr",`
        var max = arr[0];
        for(var i=0;i<arr.length;i++){
            max = arr[i]>max?arr[i]:max;
        }
        return max;
    `);
    console.log(max2([1, 5, 24, 2]));


</script>

<script type="text/template" id="funcContent">
    var max = arr[0];
    for(var i=1;i<arr.length;i++){
        max = arr[i]>max?arr[i]:max;
    }
    return max;
</script>

arguments对象

在每一个函数调用的过程中, 函数代码体内有一个默认的对象arguments, 它存储着实际传入的所有参数。
　　arguments是一个伪数组对象. 它表示在函数调用的过程中传入的所有参数的集合。在函数调用过程中不规定参数的个数与类型, 可以使得函数调用变得非常灵活性。

JavaScript中的函数并没有规定必须如何传参：

• 定义函数的时候不写参数, 一样可以调用时传递参数
• 定义的时候写了参数, 调用的时候可以不传参
• 定义的时候写了一个参数, 调用的时候可以随意的传递多个而参数

在代码设计中, 如果需要函数带有任意个参数的时候, 一般就不带任何参数, 所有的参数利用arguments对象来获取. 一般的函数定义语法, 可以写成:

function foo ( /* ... */ ) {
}

练习

<script type="text/javascript">
    // 要求允许函数调用时传入任意个数参数,
    // 并且函数返回这些数字中最大的数字.


    //函数内部的一个对象 arguments
    //当函数调用的时候，系统会将所有传入的实参，依次存入这个数组对象
    function max(){
        console.log(arguments);//参数数组
        var max = arguments[0];
        for(var i=0;i<arguments.length;i++){
            max = max>arguments[i]?max:arguments[i];
        }
        return max;
    }

    console.log(max(1, 8, 2, 5, 9, 6));
    
    //练习，使用Function创建一个函数，
    //给函数传入任意个数的参数，
    //在函数内进行去重操作，然后返回去重后的数组
    var distinct = function(){
        var arr = [];
        for(var i=0;i<arguments.length;i++){
            if(arr.lastIndexOf(arguments[i]) == -1){
                arr.push(arguments[i]);
            }
        }
        return arr;
    }
    console.log(distinct(1, 2, 4, 5, 6, 5, 4));

    //1.一个函数有形参的时候，调用的时候，可以不传参数
    //2.一个函数没有形参的时候，调用时后，可以传参   arguments对象
    //3.一个函数不管有没有形参，调用的时候都会把实参的值存入arguments对象
</script>

eval

<script type="text/javascript">
    //eval函数可以用来将字符串转换成JavaScript代码并且运行
    var str = "var a = 10";
    eval(str);
    console.log(a);
    //JSON格式的数据  JSON对象有兼容性问题
    var jsonData = '{"name":"zs", "age":18}';
    var o = JSON.parse(jsonData);
    console.log(o);

    //使用eval来解析JSON格式字符串的时候，会将{}解析为代码块，而不是对象的字面量
    //1.在JSON格式的字符串前面拼接上 "var o ="
    //2.把JSON格式的字符串使用()括起来，就不会将{}解析为代码块，而是表达式

    eval("var obj = "+jsonData);
    console.log(obj);

    var jsonData2 = '({"name":"zs", "age":18})';
    var obj2 = eval(jsonData2);
    console.log(obj2);
</script>

静态成员和实例成员

<script type="text/javascript">
    function Person(){
        this.name = "zs";
        this.run = function () {
            console.log("跑");
        }
    }

    //        Person.prototype
    console.log(Person.name);

    var p = new Person();
    //        p.name

    //静态成员和实例成员的概念，是从其他编程语言中引入的
    //静态成员：
    //是指构造函数的属性和方法
    //实例成员：
    //是指实例的属性和方法

    //__proto__

    //        $("#id").css();
    //        $("#id").text();

    //        $.trim();
    //        $.each();
    //        $.extend();

    //把工具方法，作为静态成员
    //把跟对象相关的方法，作为实例成员
</script>