js类和对象

作者: 十一_2bef | 来源:发表于2018-06-26 16:09 被阅读0次

函数

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
                
            /*
             * 创建函数的方式一：
             *      - 使用函数声明来创建一个函数
             *      - 语法：
             *          function 函数的名字([形参1,形参2,...形参n]){
             *              语句...
             *          }
             */
            
            //创建一个函数
            function fun(){
                console.log("语句一");
                console.log("语句二");
                console.log("语句三");
            }
            
        
            //调用函数
            fun();
            
            /*
             * 创建函数的方式二：
             *  - 使用函数表达式来创建一个函数
             *  - 语法:
             *      var 变量 = function([形参1,形参2,...形参n]){
             *          语句...
             *      };
             */
            
            var fun2 = function(){
                alert("我是又一个函数");
            };
            //调用函数
            fun2();
        </script>
    </head>
    <body>
    </body>
</html>

js中函数可以作为参数传递

第一种写法

function say (value) {
    alert(value);
}
function execute (someFunction, value) {
    someFunction(value);//回调函数
}
execute(say, 'hi js.');

上面代码是将say方法作为参数传递给execute方法

第二种写法

var say = function(value) {
            alert(value);
        }
        function execute (someFunction, value) {
            someFunction(value);//回调函数
        }
        execute(say, 'hi js.');

第三种写法

function execute (someFunction, value) {
            someFunction(value);//回调函数
        }
        execute(function(value) {
            alert(value);
        }, 'hi js.');

上述代码中execute方法的第一个参数是一个匿名函数。
何谓匿名函数
没有函数名的函数
1 分析: 函数为何要有名字? 是为了方便下次使用.
2 用途: 通常不希望再次使用(即只使用一次的)的函数可以定义为匿名函数.

上面的函数say被叫做回调函数

回调函数（callback）

就是你调用别人（execute），然后别人会调用你（say），简言之：你写一个函数（say），但不是由你调用，是由你调用的一个函数（execute）调用。

函数做为返回值

function fn2(a){
    return function (b){
        alert(a+b);            
    };
}

fn2(20)(10);//30

补充一个例子

仿写JS的去重方法

  function myfilter(func) {
            var return_arr = [];
            var arr = ["猪八戒","猪八戒","沙和尚","唐僧","孙悟空","白骨精","白骨精","唐僧","白骨精"];
            for(var i = 0; i < arr.length; i++)
            {
                var result = func(arr[i],i,arr);
                if(result== true)
                {
                    return_arr.push(arr[i]);
                }
            }

            return return_arr;
        }

        var newarr = myfilter(function (value,index,obj) {
            if(obj.indexOf(value,index+1) == -1)//后面没有和我一样的元素了
            {
                return true;
            }
            else//后面还有和我一样的元素，我先不加入到最终数组newarr中
            {
                return false;
            }
        });

        console.log(newarr);

arguments

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            
            /*
             *在调用函数时，浏览器还传递了另一个隐含的参数
             *  还有一个参数叫做arguments
             * 
             * arguments是一个类数组对象，在它里边保存着函数执行时的实参
             *  函数的所有的实参都在arguments中保存,
             *  通过arguments即使不定义形参也可以使用参数
             * 
             * 
             */
            function fun(a,b,c){
                
            
                //获取实参的数量
                //console.log(arguments.length);
                
                //获取指定的实参
                //实参会保存到arguments对象中指定的位置
                //console.log(arguments[2]);

            }
            
            fun("hello",123,true);
            
        
            
            
        </script>
    </head>
    <body>
    </body>
</html>

变量作用域

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">

        /*
         * 作用域（Scope）
         *  - 作用域简单来说就是指一个变量的作用的范围
         *  - 在JS中作用域分成两种：
         *      1.全局作用域
         *      2.函数作用域
         *
         *  - 全局作用域：
         *      1.所有直接在script标签中编写的代码都在全局作用域中
         *      2.全局作用域在打开网页时创建，在网页关闭时销毁
         *      3.全局作用域中有一个全局对象window，
         *          window代表的是浏览器的窗口，
         *          在全局作用域中创建的变量都会作为window对象的属性保存
         *          在全局作用域中创建的函数都会作为window对象的方法保存
         *      4.在全局作用域中创建的变量都是全局变量，可以在页面的任意位置访问
         */

        var a = 123;
        b = 456;



        function fun(){
            console.log(b);
            console.log(window.a);
            console.log(window.b);
            console.log("我是全局中的函数fun。。。。");
        }

        fun();

        //window.fun();

        //window.alert("hello");



    </script>
</head>
<body>
</body>
</html>

变量和函数的声明提前：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">


        //如果不写var，直接为变量赋值，则相当于为window对象添加属性
        //window.a = 10;
        //a = 10;

        /*
         * 变量的声明提前
         *  - 使用var关键字声明的变量，都会在所有的代码执行之前被声明，但是不会赋值
         *      赋值会直到执行到赋值的代码时才执行
         *  - 如果不适用var关键字声明变量，则不会有声明提前的特性
         *
         * 函数的声明提前
         *  - 使用函数声明创建的函数，会在所有的代码执行之前创建，
         *      所以我们可以在函数声明前就去调用函数
         *  - 使用函数表达式创建的函数，没有这个特性，所以不能在它创建之前调用
         */
        console.log("a = "+a);

        var a = 10;

        //fun();
        fun2();

        //使用函数声明来创建一个函数
        function fun(){
            console.log("我是fun函数。。。。");
        }

        //使用函数表达式创建一个函数
        var fun2 = function(){
            console.log("----->我是fun2.。。。");
        };



    </script>
</head>
<body>
</body>
</html>

函数作用域

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">

        /*
         * 函数作用域
         *  - 函数作用域可以理解为是全局中的小的作用域
         *  - 函数作用域在函数调用时创建，在调用结束时销毁
         *      每调用一次函数就会创建一个新的函数作用域
         *  - 在函数作用域中可以访问到全局变量,
         *      而在全局中无法访问到函数作用域中的变量
         *      在函数中创建的变量如果不写var，则会变成全局变量
         *  - 当我们在函数中使用一个变量时，它会先在自身的作用域中寻找，
         *      如果有就直接使用，如果没有则去上一级作用域中寻找，
         *      找到则使用，没找到则继续寻找，直到找到全局作用域为止
         *      如果全局作用域中依然没有，则报错ReferenceError
         *  - 在函数作用域中也适用变量和函数的声明提前
         *
         */

        //创建一个全局变量a
        var a = "全局中的a";

        function fun(){
            //console.log(a);
            //window.b = ...
            var b = "---> 函数作用域中的b";

            //console.log(b);
        }

        //fun();

        //console.log(b);

        //创建全局变量c
        var c = "全局c";
        
        console.log(window.c);
        /*function fun2(){

         //创建一个局部变量c
         var c = "---> 函数中的c";

         console.log(c);

         }



         fun2();*/

        function fun3(){

            //var c = "fun3中的c";

            function fun4(){

                //var c = "fun4中的c";

                console.log(c);
            }

            //调用fun4
            fun4();

        }

        //fun3();




    </script>
</head>
<body>
</body>
</html>

闭包：外层函数返回了一个内层函数，内层函数引用了外层函数中定义的一个或多个变量

闭包的一个例子同时也是调用函数中的函数的方法

//         js的闭包
         var i = 33;
         //闭包
         //外层函数返回一个内层函数，内层函数引用了外层函数中定义的一个或多个变量，就形成了闭包。
        //封装

        function test() {
             var name = 'zhangsan';
             var print = function() {
                 alert(name);
             }

             return print;
         }

         var func = test();
         setTimeout(func,5000);
//         func();

上述代码中，调用test（）的返回值就是print函数，也就是func，也就说明了调用test中的print的方法

例子2

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            
            var a = "全局a";
            
            function fun(){
                var a = "--> 函数a";
                
                //如果在函数作用域中想访问全局变量可以通过window对象来访问
                console.log(window.a);
            }
            
            //fun();
            
            a = 20;
            
            /*
             * 在函数内部使用var关键字声明的变量也会被声明提前，
             *  它的声明会在所有的代码执行前执行
             * 
             * 在函数内部使用函数声明创建的函数，也会在所有的代码执行之前被创建
             */
            function fun2(){
                
                fun3();
                
                //console.log(a);
                
                //var a = 10;
                
                function fun3(){
                    console.log("我是fun2内部的函数。。。");
                }
                
                
            }
            
            fun2();
            
        </script>
    </head>
    <body>
    </body>
</html>

另一个例子

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
//        var a = 10;
//
//         function fun(){
//
//         a = 5;
//
//         }
//
//         fun();
//
//         console.log(a);//10  ---函数作用域在函数调用时创建，在调用结束时销毁

        var a = 123;

        /*
         * 定义形参就相当于在函数中声明了对应的变量
         */


        function fun(a) {
         alert(a);
         a = 456;
         }

         fun(); //undefined

         alert(a); //123

        var a = 123;

        function fun(a) {
            alert(a);
            a = 456;
        }

        fun(123); //123

        alert(a); //123
    </script>
</head>

<body>
</body>

</html>

类的定义


//class关键字必须是小写。   后面就是跟的类名
class PersonClass {
    // 等效于 PersonType 构造函数。
    constructor(name) {  //这个表示类的构造函数。constuctor也是关键字必须小写。
        this.name = name;  //创建属性。  也叫当前类型的自有属性。
    } 
   
    sayName() {
        console.log(this.name);
    }
}
var person = new PersonClass("Nicholas");
person.sayName();   // 输出 "Nicholas"

继承

class Father{
        constructor(name){
            this.name = name;
        }
        sayName(){
            console.log(this.name);
        }
    }
    class Son extends Father{  //extents后面跟表示要继承的类型
        constructor(name, age){
            super(name); 
            this.age = age;
        }
        //子类独有的方法
        sayAge(){
            console.log(this.age);
        }
    }

    var son1 = new Son("李四", 30);
    son1.sayAge();
    son1.sayName();

子类重写父类的方法

class Father{
        constructor(name){
            this.name = name;
        }
        sayName(){
            console.log(this.name);
        }
    }
    class Son extends Father{  //extents后面跟表示要继承的类型
        constructor(name, age){
            super(name);  //相当于以前的：Father.call(this, name);
            this.age = age;
        }
        //子类独有的方法
        sayAge(){
            console.log(this.age);
        }
        //子类中的方法会屏蔽到父类中的同名方法。
        sayName(){
            super.sayName();  //调用被覆盖的父类中的方法。 
            console.log("我是子类的方法，我屏蔽了父类：" + name);
        }
    }

    var son1 = new Son("李四", 30);
    son1.sayAge();
    son1.sayName();