1.正常函数this指向
正常函数的this指向可以用一句话简单概括:
this在运行时确定,即指向函数调用对象,除非利用call、apply等方法改变this指向。
虽然上面那句话不是那么完善,但是也足以大概知道正常函数调用时的this指向哪里了,下面我们再来看一段代码来理解,代码如下:
<script> var objA = { name: "张三", age: 24, objAFun: function () { console.log("姓名", this.name) } } var objB = { name: "李四", age: 25, objBFun: function () { console.log("姓名", this.name) } } objA.objAFun(); // 姓名 张三 objB.objBFun(); // 姓名 李四 objA.objAFun.call(objB); // 姓名 李四 </script>
页面输出结果:
可以看到上面一共调用了三次函数,前面两次函数都是正常调用,this也是指向的调用者对象,第一个是objA调用的,所以this指向了objA,第二个同理。但是第三个我们通过call()方法改变了this的指向,所以输出了李四。
2.箭头函数this指向
箭头函数的this指向也可以用一句话简单的概括:
箭头函数的this指向于函数作用域所在的对象
<script> var name = "我是windown对象"; var objA = { name: "张三", age: 24, objAFun: () => { console.log("姓名", this.name) } } var objB = { name: "李四", age: 25, objBFun: () => { console.log("姓名", this.name) } } objA.objAFun(); // 姓名 张三 objB.objBFun(); // 姓名 李四 objA.objAFun.call(objB); // 姓名 李四 </script>
页面输出结果:
由上面可以看出,无论怎么调用箭头函数,输出的结果都是最外层的name,刚好印证了刚刚那句话:
箭头函数的this指向于函数作用域所在的对象
3.使用箭头函数注意事项
- 不可以当作构造函数
- 不可以使用
arguments
对象,该对象在函数体内不存在