彻底搞懂Javascript的this
在Javascript中,最玄妙的特性之一,就是this的指向玄幻莫测,一会儿指向这一会儿指向那,让初学者十分伤脑筋。
本文总结一下,方便初学者掌握奥妙之处,同时方便老鸟温故而知新。
首先,看一段代码:
var module = { x: 42, getX: function() { return this.x; } } console.log(module.getX());//42 var unboundGetX = module.getX; console.log(unboundGetX()); //undefined
一个输出42,一个输出undefined,这是为何呢??
var unboundGetX = module.getX;
相当于是
var unboundGetX = function(){ return this.x; }
这是不是就比较容易懂了?OK,引出结论:
函数体内的this指向执行上下文环境(Excution Context)
没错,this的定义就是就这么简单。
那么该怎么找上下文环境呢?调用函数时,该函数名往左由“·”符号连起来的对象,就是执行上下文。
console.log(module.getX());
很明显,这句函数调用,是通过module对象调用的,那么上下文环境就是module,this指向module,module.x=42,所以输出42;
console.log(unboundGetX());
而上面这句,调用unboundGetX()时没有通过“·”指明是通过谁来调用的,那么this就全局执行上下文,很明显func函数是在全局执行上下文下定义的,全局对象是window,所以this指向window,而window.x未定义,当然返回undefined。
OK,讲到这里,最重要的内容基本上就讲完了。
放一段代码,大家利用我讲的知识,去思考为什么是这个运行结果?
var name = "window" function func() { console.log(this.name); } var TB = { name: "object", test(fn) { fn && fn(); return function() { return this.name; } } } console.log(TB.test(func)());
最后一些tips:
1)严格模式下,函数体内的this是undefined。
2)new Foo()的形式生成对象的时候,Foo函数内部的this指向该对象。
3)apply、call、bind 允许切换函数执行的上下文环境(context),即 this 绑定的对象,可以将 this 引用到任何对象。
4)在ES6中,当使用箭头函数(=>)时,this的指向总是指向定义它的上下文环境(context)。
本博客所有随笔,若未明确标示为转载或未带有原文链接,皆为原创。
本博客所有随笔版权归博客园和kai.ma所有,欢迎转载,转载请保留:
本博客所有随笔版权归博客园和kai.ma所有,欢迎转载,转载请保留:
- 出处:http://kaima.cnblogs.com
- 作者:kai.ma
分类:
Javascript
标签:
javascript, this
【推荐】2025 HarmonyOS 鸿蒙创新赛正式启动,百万大奖等你挑战
【推荐】博客园的心动:当一群程序员决定开源共建一个真诚相亲平台
【推荐】开源 Linux 服务器运维管理面板 1Panel V2 版本正式发布
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 从 Redis 客户端超时到 .NET 线程池挑战
· C23和C++26的#embed嵌入资源指南
· 「EF Core」框架是如何识别实体类的属性和主键的
· 独立开发,这条路可行吗?
· 我在厂里搞 wine 的日子
· 他没买 iPad,而是花了半年时间,为所有“穷学生”写了个笔记神器
· Visual Studio 现已支持新的、更简洁的解决方案文件(slnx)格式
· 只需一行命令,Win11秒变Linux开发主机!
· 也是出息了,业务代码里面也用上算法了。
· 2025年中总结:我想我克服公众演讲的恐惧了,一个社恐分子突破自我的故事
2008-08-23 微软发布了ASP.NET MVC框架的第4个预览版本
2008-08-23 为什么会出现ASP.NET平台下的MVC框架?(转)