彻底搞懂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 @ 2019-08-23 01:46  Kai.Ma  阅读(264)  评论(0编辑  收藏  举报