this prototype 闭包 总结

时间：2023-03-08 16:20:26
this prototype 闭包 总结

this对象

整理下思路：

一般用到this中的情景：

1.构造方法中

function A(){

  this.name="yinshen";

}

var a=new A();

console.log(a.name);

this指向new出来的对象实例

2.json对象中方法：

var obj={
　　name:"yinshen",
　　getName:function(){

  　　return this.name;

　　}
}

this指向obj本身

3.通过apply或call方法改变方法本身作用域对象

function a(){

  return this.name;

}

var b={name:"yinshen"};

a.apply(b);

this指向apply/call的传入的参数对象。

4.其它：其它情形纯属没事找抽型,可以就地正法

prototype

从物种起源说起吧：js创建一个对象必须有构造方法，我们取名为A函数，var a=new A()之后有了a对象。

对象a默认有什么属性？

　　a有constructor属性指向A函数，constructor的用处在于标识对象类型

alert(a.constructor==A);

alert(a instanceof A);

　　但说实话，js一般使用我们不关心对象是什么类型，我们关心他实际能做什么(属性和方法)，你可以忘掉这个constructor了，除非你的场景真要做类型判断。。。

　　a有个__proto__属性指向原型对象，在高级浏览器支持。firefox、chrome有，IE不兼容。这属性有什么实际用处？继续忘掉吧，除了调试的时候打印出来看看。。。

函数A默认有什么属性？

　　A有prototype属性，prototype是个对象：所有A的实例共享此prototype的方法和函数。

　　用处很多：

　　你可以将公共的方法和公有的变量设置到prototype上，达到复用函数和属性的目的。不过要注意些问题：

1.prototype设置方法没疑问，但设置属性时，特别是数组或者obj的引用类型变量时要小心覆盖影响的问题。

A.prototype.friends=["b","c","d"];

var a1=new A();

var a2=new A();

a.friends.push("e");

alert(a2.friends);

2. A的prototype的constructor默认指向A，但prototype如果直接赋值给一个对象，会覆盖constructor,不过像之前所说很多时候我不care这个，那就忽略吧，类型判断出了问题再记起这个坑

A.prototype.getName=function(){};//不会覆盖constructor

//会覆盖constructor

A.prototype.construct={
　constructor：A,//可以这样

  getName:function(){}

}

3.for in 操作a对象时会遍历出所有属性或方法，包括prototype上的，可以通过a.hasOwnProperty("name")来判断(true为自身，false为prototype)

终了画张图上来：

this prototype 闭包 总结

对象person1的constrcutor指向Person函数，person1的__proto__指向Person函数的prototype

Person函数的prototype对象的constructor属性指向Person自身

上张更经典的图吧

this prototype 闭包 总结

闭包

引入问题

(function a(){ 
　　 var i=1;

    for(;i<10;i++){

          (function(){

              console.log(i);

          })();

    }

})()

输出：0,1,2....9 这个正常

var result=(function a(){
　　 var i=1,fn=[];

    for(;i<10;i++){

          fn[i]=function(){

              console.log(i);

          };

    }  
　　 return fn;

})();       
console.log(result[1]());....console.log(result[9]());

输出是：10,10,10,..... 这里有问题

梳理下基础：

1.javascript的变量最小作用域是方法级。（方法里面嵌入方法）

2.javascript的作用域链是嵌套的，内部方法可以访问到外部方法定义的变量。(且内部方法依赖外部变量)

3.函数是个很特殊语言类型，它不会立即执行，函数中的变量只有当函数真正执行的那一刻才能确认。(方法返回内部方法。。。闭包)

上面的几点导致js可能存在的闭包问题：如果内部找不到i变量会在作用域链中回溯上一级，但它并不会实际保存i的值，它只是在内部记得自己引用的是外层的i变量，但这个i变量可能在函数执行时已经被改变了。这个过程对内部函数不可知。

除了自己显式的这种闭包调用，另外一个比较隐藏的情况就是setTimeout和setInternval,因为实际上原理是一样的，细细体会吧

for(var i=0;i<10;i++){

    setTimeout(function(){

        console.log(i)

    },10);

}

4.推荐的解决：内部函数若依赖外部的变量，以方法调用的值传递来解除这种闭包的依赖。

var result=(function a(){
　　 var i=1,fn=[];

    for(;i<10;i++){

          fn[i]=(function(_i){

              return function(){console.log(_i)};

          })(i);

    }  
　　 return fn;

})();       
console.log(result[1]());....console.log(result[9]());

相关文章