js中的this机制

66 阅读2分钟

全局执行上下文中的this

⾸先我们来看看全局执⾏上下⽂中的this是什么。 我们可以在控制台中输⼊console.log(this)来打印出来全局执⾏上下⽂中的this,最终输出的是window对象。所以我们可以得出这样⼀个结论:全局执行上下⽂中的this是指向window对象的。这也是this和作⽤域链的唯⼀交点,作⽤域链的最底端包含了window对象,全局执⾏上下⽂中的this也是指向window对象。

函数执行上下文的this

现在你已经知道全局对象中的this是指向window对象了,那么接下来,我们就来重点分析函数执⾏上下⽂中的this。还是先看下⾯这段代码:

function foo() {
  console.log(this)
}

foo()

执⾏这段代码,打印出来的也是window对象,这说明在默认情况下调⽤⼀个函数,其执⾏上下⽂中的this也是指向window对象的。我们可以通过以下几种方法来改变this的执行。

1.通过函数的call、apply、bind改变指向

2.通过对象调用方法如

var myObj = {

    name : "abc",

    showThis: function() {

    console.log(this)

    }

}

myObj.showThis()

在这段代码中,我们定义了⼀个myObj对象,该对象是由⼀个name属性和⼀个showThis⽅法组成的,然后再通过myObj对象来调⽤showThis⽅法。执⾏这段代码,你可以看到,最终输出的this值是指向myObj的。

3.通过构造函数

function CreateObj(){

this.name = "abc"

}

var myObj = new CreateObj()

当执⾏new CreateObj()的时候,JavaScript引擎做了如下四件事:

1.⾸先创建了⼀个空对象myObj;

2.接着调⽤CreateObj.call⽅法,并将myObj作为call⽅法的参数,这样当CreateObj的执⾏上下⽂创建时,它的this就指向了myObj对象;

3.然后执⾏CreateObj函数,此时的CreateObj函数执⾏上下⽂中的this指向了myObj对象;

4.返回myObj对象