箭头函数中的this和普通函数中的this对比
ES6中新增了箭头函数这种语法,箭头函数以其简洁性和方便获取this的特性。下面来总结一下他们之间的区别:
普通函数下的this:
- 在普通函数中的this总是代表它的直接调用者,在默认情况下,this指的是window,
- 在严格模式下,没有直接调用者的函数中的this是 undefined使用
- call,apply,bind(ES5新增)绑定的,this指的是 绑定的对象
箭头函数中的this:
- 箭头函数没有自己的this, 它的this是继承而来; 默认指向在定义它时所处的对象(宿主对象),
- 而不是执行时的对象, 定义它的时候,可能环境是window,也有可能是其他的。
看下面这段代码:
function a() { console.log(this); //window } a();
因为a是一个全局函数,也就是挂载在window对象下的,所以a(),等价于window.a();
var obj = { say: function () { setTimeout(function () { console.log(this); //window }); } } obj.say();
定时器中的函数,由于没有默认的宿主对象,所以this指向window
var obj = { func: function() {}, say: function () { console.log(this);//obj,此时的this是obj对象 setTimeout(function () { console.log(this); //window that.func(); }); } } obj.say();
此时say的宿主环境是obj,所以say里面的this是obj,定时器中的函数, 由于没有默认的宿主对象,所以默认this指向window
严格模式下的this:
function test() { 'use strict'; console.log(this); //undefined } test();
在严格模式下,没有直接调用者的函数中的this是 undefined
"use strict"; var obj={ say:function(){ console.log(this); //obj } }; obj.say();
有直接调用者的this是它的调用者
箭头函数中的this:
var obj = { say: function () { setTimeout(() => { console.log(this);// obj }); } } obj.say();
此时的 this继承自obj, 指的是定义它的对象obj, 而不是 window!
var obj = { say: function () { var f1 = () => { console.log(this); // obj setTimeout(() => { console.log(this); // obj }) } f1(); } } obj.say()
因为f1定义时所处的函数 中的 this是指的 obj, setTimeout中的箭头函数this继承自f1,所以不管有多层嵌套,都是 obj
var obj = { say: function () { var f1 = function () { console.log(this); // window, f1调用时,没有宿主对象,默认是window setTimeout(() => { console.log(this); // window }) }; f1(); } } obj.say()
结果: 都是 window,因为 箭头函数在定义的时候它所处的环境相当于是window, 所以在箭头函数内部的this函数window