闭包与继承

最近 感觉自己很多基础的东西有点生疏啦 又重新学习了下 记录一下 方便自己在查阅 不断丰富我的知识库

闭包和继承

var scope = "global scope"; 
function checkScope() {
    var scope = "local scope";
    function f() {
        return scope;
    }
    return f();
}
checkScope(); ??

1. 什么是闭包

   //全局作用域
   function a() {
   //a的作用域
   var i = 0; //不能被销毁
   function b() {
   //b的作用域
   alert(++i);
   }
   return b;
   }
   var c = a();
   c();

当函数a的内部函数b被函数a外的一个变量引用的时候，就创建了一个闭包。（避免全局变量污染）

1. 闭包的特点

   • 函数嵌套函数
   • 内部函数可以使用外部函数的内部变量
   • 函数中的局部变量在外部是不能被引用（保护函数内的变量安全）

2. 为什么要写闭包

   • 避免全局变量污染
   • 将函数内部变量的值始终保存在内存中（在内存中维持一个变量）
   • 通过保护变量的安全实现JS私有属性和私有方法（不能被外部访问）

3. 全局变量污染
   var a = 1
   function fn(){
   a++;
   console.log(a)
   }
   fn();
   fn();

   	function fn(){
   		var a = 1;
   		a++;
   		console.log(a)
   	}
   	
   	fh()
   	fn()
   

4. 辣鸡回收机制
   function abc(){
   var str = ‘vv’
   }
   abc() //使用完str被回收

   • 参数和内部变量不会被回收

5. 闭包的应用场景

   Button0 Button1 Button2 Button3 Button4

   for(var i = 0, len = btns.length; i < len; i++) {
   (function(i) {
   btns[i].onclick = function() {
   alert(i);
   }
   }(i))
   }

    var counter = (function(){
        var privateCounter = 0; //私有变量
        function change(val){ //私有函数
            privateCounter += val;
        }
        return {
            increment:function(){   //三个闭包共享一个词法环境
                change(1);
            },
            decrement:function(){
                change(-1);
            },
            value:function(){
                return privateCounter;
            }
        };
    })();
   

6. 构造函数

   • 构造函数
     var o1 = {
     p: “I’m in Object literal”,
     alertP: function(){
     alert(this.p);
     }
     }
     function p(){
     var obj = new Object()
     obj.name = ‘123’
     obj.fn = function(){
     console.log(this.name)
     }
     return obj;
     }

     p.fn()
     function Co(){
     this.p = “I’m in constructed object”;
     this.alertP = function(){
     alert(this.p);
     }
     }
     var o2 = new Co();

   • 在函数内部对新对象（this）的属性进行设置，通常是添加属性和方法。

   • 为什么要使用构造函数?

     • 构造函数对一个新创建的对象进行初始化，增加一些成员变量和方法

7. prototype的概念 为什么使用原型
   function Co(){
   this.p = “I’m in constructed object”;
   this.alertP = function(){
   alert(this.p);
   }
   }
   var o2 = new Co();
   var o3 = new Co();

   o2.alertP == o3.alertP
   
   function C0(){  
   	C0.prototype.p = "I’m in constructed object";  
      	C0.prototype.alertP = function(){  
           alert(this.p);  
       }  
   }  
   var a = new C0();
   console.log(a)
   

8. call/apply继承

   function fn(){
   console.log(this.a)
   }

   fn.call({a:1})

   var a = {
        name : "fang" ,
        setName : (name) => {
            console.log(name)
        }
    }
    var b = {
      name : "zz"
    }
    a.setName.apply(b,[b.name]) 
   

   function C0(){
   this.p = “I’m in constructed object”;
   this.alertP = function(){
   alert(this.p);
   }
   }
   function C1(){
   //继承了C0
   C0.call(this);
   }
   var o0 = new C0();
   var o1 = new C1();

• call只能一个参数一个参数的传入。
• apply则只支持传入一个数组，哪怕是一个参数也要是数组形式

1. 原型链继承
   function C1(){
   C1.prototype.name = 123;
   C1.prototype.sayName = function(){
   alert(this.name);
   };
   }

   function C2(){}
   
   C2.prototype = new C1();
   

2. 混合继承
   function C1(){
   this.name = 123;
   this.colors = [“red”, “blue”, “green”];
   this.sayB = function(){
   alert(‘123’)
   }
   }

   C1.prototype.sayName = function(){
      alert(this.name);
   };
   
   console.log(abc);
   
   
   function C2(name, age){
   	//继承属性
     C1.call(this);
     this.age = age;
   }
   
   //C2.sayName => 没有
   
   C2.prototype = new C1(); //方法继承
   
   function Abc(){
   }
   Abc.prototype.constructor = Abc