JavaScript this的理解
一直对js的this不怎么理解,最近看了JavaScript 语言精髓的相关章节,有点清晰的理解了,记录记录
/* 来自: JavaScript 语言精髓 方法:当一个函数被定义为对象的一个属性时,我们称它为一个方法. this : 在函数访问this时,this被绑定到了 全局对象. */ //全局函数 var log = function(msg){ document.writeln("<br>" + msg + "<br>"); }; log("**************thistest.js***************"); //定义一个全局变量 var value = 100; //函数 var add = function(a, b){ var value = 11; //访问内部变量 log("add:value = " + value); // 输出 add:value = 11 //此时访问this时,this绑定的全局对象,如 this.value 可以访问到上面定义的 value log("add:this.value = " + this.value); // 输出 100 return a + b; } // add是一个函数,在add里访问 this ,this绑定到的是全局对象 add(1, 2); //输出: //add:value = 11 //add:this.value = 100
下面定义一个对象
//对象 var myObj = { //对象的属性 value:0, //方法 increment:function(inc){ //此时访问this时,this绑定的时myObj对象 log("myObj.increment():myObj.value = " + this.value);//输出 myObj.value 的值 //调用一次 value的值增加1 this.value += typeof inc ==='number'?inc : 1; } };
有时候我们在方法内部会定义函数,那么函数怎么调用对象属性呢,如果在函数内容直接用this是访问不到对象的
//对象 var myObj = { //对象的属性 value:0, //方法 increment:function(inc){ //此时访问this时,this绑定的时myObj对象 log("myObj.increment():myObj.value = " + this.value);//输出 myObj.value 的值 //调用一次 value的值增加1 this.value += typeof inc ==='number'?inc : 1; //定义内部函数,注意还是函数,所以函数内部访问this还是只能访问到 全局对象 var inFun = function(){ //此时访问this时,this绑定的全局对象,如 this.value 可以访问到上面定义的 value log("myObj.increment.inFun:this.value = " + this.value); }; inFun(); } };
为了能在inFun函数内访问到myObj对象,我们先把myObj对象保存在一个变量里,
//对象 var myObj = { //对象的属性 value:0, //方法 increment:function(inc){ //把当前对象myObj引用保存在self变量,随后的函数就可以访问self 来代替访问myObj对象 var self = this; //此时访问this时,this绑定的时myObj对象 log("myObj.increment():myObj.value = " + this.value);//输出 myObj.value 的值 //调用一次 value的值增加1 this.value += typeof inc ==='number'?inc : 1; //定义内部函数,注意还是函数,所以函数内部访问this还是只能访问到 全局对象 var inFun = function(){ //此时访问this时,this绑定的全局对象,如 this.value 可以访问到上面定义的 value log("myObj.increment.inFun:this.value = " + this.value); // log("myObj.increment.inFun:myObj.value = " + self.value); }; inFun(); } };
给 myObj增一个double方法
myObj.double = function(){ var self = this; var helper = function(){ //此处不能用 this.value 访问到myObj.value的值 //add函数前的this可以省略,也可以用 this.add(a,b); self.value = add(self.value, self.value); }; helper(); };
调用double方法,即可使用myObj.value的值翻倍