面向对象闭包 继承

闭包

 

一、概念及作用

 

        闭包是指在JavaScript中，内部函数总是可以访问其所在的外部函数中声明的参数和变量，即使在其外部函数被返回（寿命终结）了之后。

 

二、本质

 

闭包函数：将所在函数作用域中的变量长期驻留在了内存中（内存泄漏）

 

四、闭包的问题及处理

 

       1.使用全局变量进行累加和       

             

var num = 3;
function sum(){   
    num++;
 4 }
alert(sum());   //undifined
alert(sum());  //undifined
alert(sum());  //undifined
sum();         //num=4;
alert(num);     //4
sum();         //mum = 5;
alert(num);     //5
sum();         //num=6;
alert(num);   //6

 

2.1使用局部变量进行累加和       

      

    function fn(){
        var a = 3;
        return function(){
           a++;
           return a;
        }
    }
    alert(fn()());  //4
    alert(fn()());  //4
    alert(fn()());  //4
    
    var me = fn();   //function(){a=3;a++;return a;}
    alert(me());     //4    
    alert(me());     //5    
 
    alert(me());     //6

 

2.2

   

   var a = 4 ;
    function fn(){
        var a = 3;
        return function(){
           alert(this.a++);  //this指向window  输出4；
           a++;
           return a ;
        }
    }
    alert(fn()());    //4  
 
        3.循环里的匿名函数的取值问题        
  

3.1

        

    function fn(){
       var arr=[];
       for(var i=0;i<5;i++){
          arr[i]=function(){
             return [i];
          }
        }
       return arr;
    }
 
    alert(fn());      //五个函数块

3.2

        

 function fn(){
      var arr = [];
      for(var i = 0;i<5;i++){
            arr[i]=function(){
                  return i;
             }
       }
         return arr;
 }
  var list = fn();
  for(var i=0;i<list.length;i++){
       alert(list[i]());      //5个5
  }

3.3

           
 function fn(){
      var arr =[];
       for(var i =0 ;i<5;i++){
             arr[i]=(function(i){
                   return i;
               })(i);
       }
        return arr;
 }
  var list =fn();
   for(var i=0;i<list.length;i++){
          alert(list[i]);     //0 1 2 3 4
   }

 

3.4

         

   function fn(){
         var arr=[];
         for(var i = 0;i<5;i++){
             arr[i]=(function(i){
                 return function(){
                     return i;
                 }
             })(i);
         }
         return arr;
    }
    var list =fn();
    for(var i=0;i<list.length;i++){
         alert(list[i]());           //0 1 2 3 4
 
    }

---

---

---

 继承

 

三种继承：经典继承、原型继承、混合继承（重点掌握）------>【call、apply】

 

一、创建类 （ ES5）

 

（一）、经典继承

 

        1.构造函数（ 父类）         

             

       function Father(name,age,money){
                 //实例属性
                 this.name = name;
                 this.age = age;
                 this.money = money;
                 //实例方法
                 this.showName=function(){
                     return this.name;
                 }
                 this.showAge=function(){
                     return this.age;
                 }
                 this.showMoney=function(){
                     return this.money;
                 }
 
       }

       2.子类：只能继承实例        

                 

 function Son(name,age,money,sex){
        //经典继承，伪装继承、冒充继承（call，apply)只能继承实例
        //Father.call(this,name,age,money);
        //Father.applay(this,[name,age,money]);
        Father.apply(this,arguments);
        this.sex=sex;
        this.showSex=function(){
             return this.sex;
        }
 
 }

 3.测试                

       

         var son = new Son("李四",12,5000000,"男");
         alert(son.showName());
         alert(son.showAge());
         alert(son.showMoney());
 
         alert(son.showSex());

 

4.call 和 apply的区别（面试题）

 

       相同：a.二者都不能继承原型

         　　 b.第一个参数this都一样,指当前对象 

       不同：

                 第二个参数不一样：call的是一个个的参数列表；apply的是一个数组（arguments也可以）

 

（二）、原型继承

       

1.父类      　　

 function Father(){}   //构造函数
 //原型属性
 Father.prototype.name ="李四";
 Father.prototype.age=12;
//原型方法
 Father.prototype.showName=function(){
       return this.name;
}
 Father.prototype.showAge=function(){
      return this.age;
}     

 2.子类       

 

     function Son(){};   

【3.原型继承】-----------省略

           

 //Son.prototype=Father.prototype;
//Son.prototype=new Father();

  4.遍历父类原型    

       

 for(var i in Father.prototype){
           Son.prototype[i]=Father.prototype[i];
 }
  var son =new Son();
  alert(son.showName());
  alert(son.showAge());

（重点）混合继承

[ 1 ]prototype的概念

            javascript中的每个对象都有prototype属性，Javascript中对象的prototype属性的解释是：返回对象类型原型的引用。

 

      

 1. 父类            
         function Father(name,age){
             //实例属性
             this.name=name;
             this.age=age;
        }
        //原型方法
        Father.prototype.showName=function(){
             return this.name;
        }
        Father.prototype.showAge=function(){
             return this.age;
        }
   2. 创建一个干爹    
         function Godfather(name,age,money){
             this.money=money;
        }
        Godfather.prototype.showMoney=function(){
             return this.money;
        }
   3.  子类                
       function Son(){
         //继承实例，经典继承
         Father.apply(this,arguments);
         Godfather.apply(this,arguments);
    }
    //原型链继承
    for(var i in Father.prototype){
         Son.prototype[i]=Father.prototype[i];
    }
    for(var i in Godfather.prototype){
         Son.prototype[i]=Godfather.prototype[i];
    }
    var son =new Son("小四",45,6565689);
    alert(son.showName());
    alert(son.showAge());
    alert(son.showMoney());        
   4.创建一个孙类   
     function Grandson(name,age,money){
         Son.apply(this,arguments);
    }
    for(var i in Son.prototype){
         Grandson.prototype[i]=Son.prototype[i]
    }
    var grandson =new Grandson("李晓武",23,56834534);
    alert(grandson.showName());
    alert(grandson.showAge());
    alert(grandson.showMoney());