美文网首页
06_JS面向对象

06_JS面向对象

作者: 对方不想理你并向你抛出一个异常 | 来源:发表于2017-09-10 14:41 被阅读0次

    创建函数的几种方式

    <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>
    

    相关文章

      网友评论

          本文标题:06_JS面向对象

          本文链接:https://www.haomeiwen.com/subject/sinrkxtx.html