码迷,mamicode.com
首页 > Web开发 > 详细

JS 高级篇

时间:2018-11-03 12:41:07      阅读:248      评论:0      收藏:0      [点我收藏+]

标签:创建对象   私有属性   封装   实现继承   alter   实例   value   函数   color   

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);  //我是猫

     

JS 高级篇

标签:创建对象   私有属性   封装   实现继承   alter   实例   value   函数   color   

原文地址:https://www.cnblogs.com/Cocoomg/p/9899836.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!