首页 > 代码库 > js中this的理解
js中this的理解
平常用this很多,对this的理解就是this是对应执行环境,然而很多时候效果并不是想要的,最近看了一些谈到this的笔记和书籍,总结下。
对this的误解:
this是指向函数本身
先上个demo吧
1 var a =0;2 demo.a=2;3 function demo(){4 console.log(‘ok‘);5 this.a++6 }7 demo();//ok8 console.log(demo.a);//29 console.log(a); //1
上面的demo已经得知,如果this是指向函数本身,那么demo.a的值应该为3,但还是2说明调用的不是demo函数。
window对象的a却增加了,说明demo函数中的this是指向window(等会说为什么)
this是在调用时被绑定的,取决于函数的调用位置(也就会调用方法):
1.默认绑定:
最常用也是函数调用类型,当只有一个独立函数时,this指向的是window对象(解释上面例子为什么console.log(a)会是1)。
注意:当使用严格模式,this会绑定到undefined
2.隐式绑定
函数调用的位置有上下文环境(我理解为对象调用模式,函数是一个对象的方法)
var obj1={
a:2,
demo:demo
};
var obj={
a:1,
obj1:obj1
};
function demo(){
console.log(this.a)
}
obj.obj1.demo()//2
当函数的执行环境是在obj对象,this指向的就是obj。如果被包裹了几层对象,this只会绑定最后一层对象(上面demo中this最后绑定到obj1上)
注意:1.有时我们不会写这么长一串obj.obj1.demo,而是赋给一个变量,还能达到我们想要的效果吗?
1 var a =0 2 var obj1={ 3 a:2, 4 demo:demo 5 }; 6 var obj={ 7 a:1, 8 obj1:obj1 9 };10 function demo(){11 console.log(this.a)12 }13 obj.obj1.demo(); //214 var fn= obj.obj1.demo;15 fn(); //0 16 obj.dd = obj.obj1.demo;17 obj.dd() //1
当我把obj.obj1.demo赋给fn时,再执行fn(),结果却是0.why? 按照我们上面说的,fn()可以理解为一个独立函数(没有任何修饰符),其中的this就是指向window,即a=0。
我觉得还能这么理解,函数中this,取决于调用函数上一级(也就是上面说的最后一级)的对象。
如上:obj.dd = obj.obj1.demo,然后执行obj.dd(),结果是1,也就是说现在函数中你的this绑定的是obj对象。同理也可以解释fn()其实就是window.fn(),绑定的是window对象
3.显示绑定
显示绑定就是通过apply,call,bind,直接将函数中的this绑定到想要的对象上
还是先看demo吧
1 var obj1={ 2 a:2, 3 demo:demo 4 }; 5 var obj={ 6 a:1, 7 obj1:obj1 8 }; 9 function demo(){10 console.log(this.a)11 }12 obj.obj1.demo(); //213 obj.obj1.demo.call(obj); //114 var fn= obj.obj1.demo.bind(obj);15 fn() //1
简单介绍下apply call bind。apply和call是函数内置的方法,第一个参数是指定函数执行环境,第二个参数是传给函数的参数,call是将参数依次传给函数,apply则是将参数组合在一个数组中,将数组传给函数,
bind也是绑定指定执行环境,但是不会执行(使用call和apply的时,函数就执行了)
根据上面说的,正常obj.obj1.demo()得到的结果是2,但是使用call后this绑定的obj上,所以a的值为1.后面使用bind同理(只是函数没有执行,需要执行一次)
4.构造函数模式
创建一个构造函数的实例,构造函数中的this会绑定到这个实例对象上
1 function Per(){2 this.a=13 }4 var dd = new Per();5 alert(dd.a) //1
dd是Per的一个实例,this绑定在dd上,创建了dd的一个属性a,且值为1
本文总结来源于《你不知道的JavaScript》
第一次写博客,排版有点乱,都是一些个人理解,有问题欢迎拍砖。
js中this的理解