ES6中this指向相关问题
上代码,看效果
this是一个关键字,指向一个对象,在不同的调用环境this指向是不一样的
1、全局this指window
console.log(this)
2、全局函数里的this指window
function fn() {
console.log(this)
}
fn()
3、事件处理函数里的this指绑定事件的DOM对象(不一定是事件源,谁绑定就是谁)
document.querySelector('#box').onclick = function () {
console.log(this)
}
4、没有特别指向的匿名函数的this指window
; (function () {
console.log(this)
})()
setTimeout(function () {
console.log(this)
}, 1000)
注意: 包括数组的map,reduce等方法里面的匿名函数this都是指window
匿名回调函数里的this也是window
5、对象方法里的this指对象本身,不管是字面量声明还是原型方法或者class,this都是当前实例对象
var obj = {
name: 'lisi',
say: function () {
console.log(this) // obj
}
}
6、构造函数里的this指将来new的实例
function Dog(name) {
this.name = name
}
var a = 2;
function fun() {
console.log(this.a);
}
fun()
var o = { a: 3, fun: fun }
o.fun(); // 3 this指向o
var p = { a: 4 };
// 赋值语句的结果就是赋的值
// 把赋值的结果也就是fun这个函数放进一个自调用函数里来执行,this指window
(p.fun = o.fun)(); // 2
7、箭头函数没有自己的this
var obj2 = {
name: 'lisi',
say: function () {
// 点击box打印name
document.querySelector('#box').onclick = () => {
console.log(this.name)
}
}
}
obj2.say()
// 1、如果希望this指向当前函数调用对象就用普通函数
// 2、如果希望this指向外层就用箭头函数
// 3、如果内外都要,用普通函数,在外层 const _this = this, 这样this指内层, _this 指外层
ES6中箭头函数和普通函数的区别
1、普通函数中的this总是指向调用它的那个对象,
箭头函数没有自己的this,他的this永远指向其定义环境,任何方法都改变不了其指向,如call()、bind()、apply()。(正是因为它没有this,所以也就不能用作构造函数,也没有原型对象)
2、箭头函数不能当作构造函数,也就是说,不能使用new命令,否则会报错。
3、箭头函数不能使用yield命令,因此箭头函数不能用作genertor函数。
4、箭头函数没有原型属性。
5、箭头函数不能使用argumen对象,该对象在函数体内不存在。如果要用,可以用rest参数代替。
6、变量提升:由于js的内存机制,function的级别最高,而用箭头函数定义函数的时候,需要var(let、const)关键字,而var所定义的变量不能得到变量提升。故箭头函数一定要定义于调用之前。