JavaScript this的理解
1 | 一直对js的 this 不怎么理解,最近看了JavaScript 语言精髓的相关章节,有点清晰的理解了,记录记录 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | /* 来自: 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 |
下面定义一个对象
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | //对象 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是访问不到对象的
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | //对象 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对象保存在一个变量里,
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | //对象 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方法
1 2 3 4 5 6 7 8 9 | 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的值翻倍
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 数据库服务器 SQL Server 版本升级公告
· C#/.NET/.NET Core技术前沿周刊 | 第 23 期(2025年1.20-1.26)
· 程序员常用高效实用工具推荐,办公效率提升利器!