函数this的三种指向(面试)
环境对象 this: 谁'调用'我 , 我指向谁(与函数的声明方式无关,与调用方式有关)
1.普通函数 : 函数名() this指向window
2.构造函数: new 函数名() 指向 new 创建的实例对象
3.对象方法 : 对象名.方法名() 指向对象
function fn(){
console.log( this )
}
//普通函数 : window
fn()
//构造函数 : new创建实例对象
new fn()
let obj = {
name:'张三',
eat:fn
}
//对象方法 : obj对象
obj.eat()
补充: 定时器里面的this永远指向 window, 用上下文调用也无法修改
箭头函数
- 如果箭头函数只有一个形参,则可以省略小括号
- 如果箭头函数的 函数体 只有一行代码，则可以省略大括号。 （此时必须省略return）
let fn = () => console.log('爱你')
fn()
!!! this指向: 箭头函数自己没有this, 本质是访问上级作用域中的this
1.由于箭头函数没有this,所以箭头函数不能作为构造函数 (new会修改this指向,而箭头没有this)
2.箭头函数也无法修改this (call apply bind)对箭头函数是无效的
3.由于箭头函数没有this,所以箭头函数一般不作为事件处理函数 来测试一下 以下题目 最终打印什么?
let obj = {
name: "ikun",
eat() {
//1级 this : obj
function fn1() {
//2级
console.log(this)//window
}
fn1()
let fn2 = () => {
//2级 ： 箭头函数访问上级 1级obj
console.log(this)//obj
}
fn2()
},
learn: () => {
//1级 ： 上级 this->window
function fn1() {
console.log(this)//window
}
fn1()
let fn2 = () => {
//2级 访问1级 this -> window
console.log(this)//window
}
fn2()
}
}
obj.eat()
obj.learn()
