彻底搞懂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)

 

posted @   Kai.Ma  阅读(318)  评论(0)    收藏  举报
编辑推荐:
· 从 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框架?(转)
点击右上角即可分享
微信分享提示