JS 高级篇

Posted 2021-01-17 cocoomg

1. Function 对象

Java的方法仅仅是方法，但是JS的方法是一个对象，可以作为参数！

1. Function 对象引入
   • Function 是 js 的方法对象，可以用 Function 实例化出任何 js 方法对象；
2. 用 Function 创建方法对象
3. Function 对象属性
4. Function 对象方法

2. javascript 闭包

1. Js 变量的作用域
   • 方法体外定义 （ var a=22; ），全局变量，所有方法可以取到
   • 方法体内定义 （ var a=22; ），局部变量，外部方法不可以取到
   • 方法体内定义 （ a=22; ），全局变量，所有方法可以取到
2. 从外部读取方法内部的局部变量：通过闭包

   <script type="text/javascript">
      
      var a=11; //全局变量
   
       function func(){
           var b=22; //局部变量
           c=33；// 全局变量
           
   　　　　 //闭包
           function func2(){
               alter(b);
           }
          
           return func2;
       }
   
       alter(a); //成功
       alter(b); //失败
       alter(c); //成功
   
       // 利用闭包从外部读取内部的局部变量
       var result=func();
       result(); //成功打印局部变量b
   
   </script>   

3. 闭包的概念
   • 闭包就是能够读取其他函数内部变量的函数。
   • 由于在 Javascript 语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成“定义在一个 函数内部的函数”。
   • 在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。
4. 闭包的用途
   1.  读取函数内部的变量，
   2.  让这些变量的值始终保持在内存中。
5. 闭包的使用注意点
   • 由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在 IE 中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
   • 闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

3. JavaScript 面向对象实现

1. 面向对象三大特征
   • 封装、继承、多态
   • JS本身没有，但可以模拟实现
2. JavaScript 自定义对象
   • 创建对象方式：
     1. 方式1，对象初始化器方式；键值对的形式

        var marry={
            name:"marry",
            age:2,
            shout:function(){
                alter(this.name+this.age);
            },
            action:function(){
                alter("会吃");
            }
        }    

     2. 方式2，构造函数方式；

        function Dog(name,age){
            this.name=name;
            this.age=age;
            this.shout=function(){
                alter(this.name+this.age);
            };
            this.action=function(){
                alter("会吃"）;
            }; 
        }    
        
        var jack=new Dog("jack",1);

   • 对象属性定义：
     1. 私有属性；
     2. 对象属性；
     3. 类属性；

        //定义
        function C(){
            this.objPro="对象属性1";
            C.proyotype.objPro2="对象属性2"
        
            var privatePro="私有属性";
        }
        C.classPro="类属性";
        
        //使用
        
        //对象属性 必须要 new
        var c=new C();
        alter(c.objPro);
        alter(c.objPro2);
        
        //私有属性，要用闭包取出
        //类属性，直接调用
        alter(C.classPro);

   • 对象方法定义：
     1. 私有方法；
     2. 对象方法；
     3. 类方法；

        //定义
        function(){
           var privateFunc=function(){
               alert("私有方法");
            };
            this.objFunc=function(){
                alert("对象方法");
            }；
            C.prototype.objFunc2=function(){
                 alert("对象方法2");
            };
        
        }
        
        C.classFunc=function(){
            alert("类方法");
        };
        
        //调用
        
        // 对象方法 必须要 new
        var c=new C();
        c.objFunc();
        c.objFunc2();
        
        // 私有方法，内部调用
        //类方法
        C.classFunc();

3. JavaScript 实现封装特性
   • 对象里面对属性进行封装，在之后调用
4. JavaScript 实现继承特性
   • Apply() 实现属性和方法的继承，原型还是不变

     function Animal(name,age){
         this.name=name;
         this.age=age;
         this.shout=function(){
             alert(this.name+this.age);
         };
         this.action=function(){
             alert("会吃"）;
         }; 
     }  
     
     function Dog(name,age){
         Animal.apply(this, [name,age]); //把Animal的属性copy给Dog ,原型不变，还是条狗
     }      
     
     var jack=new Dog("jack",1); 
     
     alert(jack.name);
     alert(jack.age);
     jack.shout();
     jack.action();

   • Prototype 实现原型的继承；

     function Dog(name,age){
         Animal.apply(this, [name,age]); //把Animal的属性copy给Dog 
     }  
     Dog.prototype=new Animal(); //原型改变，是animal

5. JavaScript 实现多态特性

   function Animal(){
       this.say=function(){
           alert("我是动物");
       }；
   }  
   
   function Dog(){
       this.say=function(){
           alert("我是狗");
       }；
   }  
   Dog.prototype=new Animal();
   
   function Cat(){
       this.say=function(){
           alert("我是猫");
       }；
   }  
   Cat.prototype=new Animal();
   
   function say(animal){
       if(animal instanceof Animal){
           animal.say();
       }
   }
   
   var dog=new Dog();
   var cat=new Cat();
   say(dog);  //我是狗
   say(cat);  //我是猫