Javascript中的this

Javascript语言的一个关键字。它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用

全局环境中输出this、指向谁？

console.log(this) // Window {window: Window, self: Window, document: document, name: '', location: Location, …}

全局函数中输出this、指向谁？

function fun(){
    console.log(this)
}
fun() // Window {window: Window, self: Window, document: document, name: '', location: Location, …}

"use strict"; 
fun() //undefined

对象的方法输出this、指向谁？

let obj = {
    name: '小红',
    getName: function () {
        console.log( this.name );
    }
}
obj.getName() // 小红

DOM事件输出this、指向谁？

<button>按钮</button>

const btn = document.querySelector( "button" );
btn.onclick = function () {
    console.log( this ); // <button>按钮</button>
}

构造函数中的this，指向谁？

function FUN() {
    this.name = "小红";
}
const f = new FUN();

console.log( f ); // FUN {name: '小红'}

new干了些什么？

1.创建一个新的空对象{}

2.将空对象的__proto__属性指向构造函数的prototype属性（{}.__proto__ = 构造函数.prototype）

3.执行构造函数中的代码（为这个新对象添加属性）

4.根据上一步是否有返回值，如果无返回或非对象值，则将obj返回作为新对象。否则会将返回值作为新对象返回

总结

全局环境下指向全局对象
全局函数中的this，指向全局对象
内部函数中的this，指向全局对象
方法中的this，指向调用方法的对象
事件中的this，指向触发事件的DOM对象
构造函数中的this，指向new创建的对象
箭头函数中的this，指向定义函数上下文的this