1.背景介绍
在javaScript中,this是动态绑定的,它可以是全局对象、当前对象或者任意对象,这完全取决于函数的调用方式。这就导致了this具备了多重含义,可以使得this可以更灵活地使用。但是,带来了灵活性的同时也会给我们初学者带来不少困惑。
2.知识剖析




报错。
在javaScript中,不一定只有对象方法的上下文中才有this, 全局函数调用和其他的几种不同的上下文中也有this指代。 它可以是全局对象、当前对象或者任意对象,这完全取决于函数的调用方式。JavaScript 中函数的调用有以下几种方式:作为对象方法调用,作为函数调用,作为构造函数调用,和使用 apply 或 call 调用。
1.作为对象方法调用:this指向该对象本身


2.作为函数调用:this指向全局对象


3.作为构造函数调用:this 绑定到新创建的对象上


4.使用 apply 或 call 调用:当使用apply和call时,表示把一个函数表达式放入call或apply括号后面的第一个参数的环境中,this则指向这个参数;两者不同的地方在于apply第二个参数必须是个数组。

3、常见问题


现象:两次打印的this不一样

现象:加了严格模式,this仍然指向了window
setTimeout()其实全名为window.setTimeout(),是window下面的一个方法,不管是否是严格模式,指向的都是window。
4、解决方案
1.将this赋给一个变量,然后通过闭包来访问这个变量来打印出我们想要的值。

2.使用bind()将执行环境放到obj这个对象中去,可以用this代替。

3.使用ES6中的箭头函数。

5、编码实战




6.扩展思考
问题:如何理解this?
1.当函数作为对象的方法调用时,this指向该对象。
2.当函数作为单独函数调用时,this指向全局对象(严格模式时,为undefined)
3.构造函数中的this指向新创建的对象
4.嵌套函数中的this不会继承上层函数的this,可以用前面讲过的三种方法来使this指向宿主对象。
7.参考文献
参考四:如何理解 JavaScript 中的 this 关键字?
8、更多讨论
问题1:this默认场景?
1.当函数作为对象的方法调用时,this指向该对象。
2.当函数作为单独函数调用时,this指向全局对象(严格模式时,为undefined)
3.构造函数中的this指向新创建的对象
4.嵌套函数中的this不会继承上层函数的this,可以用前面讲过的三种方法来使this指向宿主对象。
问题2:常见的this场景?
1.当函数作为对象的方法调用时,this指向该对象。
2.当函数作为单独函数调用时,this指向全局对象(严格模式时,为undefined)
3.构造函数中的this指向新创建的对象
4.嵌套函数中的this不会继承上层函数的this,可以用前面讲过的三种方法来使this指向宿主对象。
问题3:geiTimeout函数?
getTimeout函数全名window.getTimeout,是window下面的一个方法,所以不管是不是严格模式,this都指向window。
网友评论