前端开发核心知识进阶 —— this指向问题

前端开发核心知识进阶 —— this指向问题

规律

• 在函数体中，非显示或隐式地简单调用调用函数时，在严格模式下，函数内的this会被绑定在到undefined中，在非严格模式下则会被绑定到全局对象window/global上
• 一般使用new方法调用构造函数时，构造函数内的this会被绑定到新创建的对象上
• 一般通过call/apply/bind方法显示调用函数时，函数体内的this会被绑定到制定参数的对象上
• 一般通过上下文调用函数时，函数体内的this会被绑定到该对象上
• 箭头函数中，this的指向是由外层（函数或全局）作用域来决定的

上下文对象调用中的this

const student = {
	name:'Lucas',
	fn:function(){
		return this
	}
}
console.log(student.fn() === student) // true

---

当存在更复杂的调用关系时，如以下代码中的嵌套关系，this会指向最后调用它的对象

const Person = {
    name:'Lucas',
    brother:{
        name:'Mike',
        fn:function(){
            return this.name
        }
    }
}

console.log(person.brother.fn()) // Mike

---

const o1 = {
    text:'o1',
    fn:function(){
        return this.text
    }
}

const o2 = {
    text:'o2',
    fn:function(){
        return o1.fn()
    }
}

const o3 = {
    text:'o3',
    fn:function(){
        var fn = o1.fn
        return fn()
    }
}

console.log(o1.fn()) // o1
console.log(o2.fn()) // o1
console.log(o3.fn()) // undefined

第一、二个console.log中fn()中this的指向都是fn的调用方，即谁调用了fn，this就指向谁
第三个console.log可以转换为以下代码，在函数中隐式调用函数，this指向undefined或window

const o3 = {
    text:'o3',
    fn:function(){
        return function(){
            return this.text
        }()
    }
}

---

如何让console.log(o2.fn())语句输出o2

const o1 = {
    text:'o1',
    fn:function(){
        return this.text
    }
}

const o2 = {
    text:'o2',
    fn:o1.fn
}