JavaScript this关键字

停更一月有余，今天继续来更新我的博客，本篇文章我们学习一下JavaScript中的this关键字。在JS面向对象编程中，this表示对当前对象的引用，但JavaScript中的this指向并不是一成不变的，它会随着调用函数对象的改变而改变。简言之，谁调用的函数，this指向的对象就是谁。

全局下的this指向Window对象

在全局使用this或者单独使用，this指向的是全局对象，即window对象。

console.log(this);//Window{...}

当我们在浏览器控制台执行上面代码时，我们就可以查看全局Window对象的所有方法和属性。

构造函数中的this指向实例对象

我们在构造函数中会经常用到this，此时的this指向它的实例化对象。

function Person(name,age){
    this.name = name;
    this.age = age;
    console.log(this);
}
var person1 = new Person("Cherry",18);//this指向person1

var person2 = new Person("Maria",19);//this指向的就是person2

构造函数的this指向它的实例化对象，如果构造函数未被实例化，则this为undefined。

实例对象的this指向它自己

已经实例化的对象，this指向它自己。

var person3 = {
    name : "Crise",
    age : 20,
    greet : function (){
        console.log(this);//此时的this和person3是可以等价替换的
    }
}
person3.greet();//this指向person3

全局函数的this指向Window对象

如果一个函数定义在全局，那么它的this指向的也是全局对象。

function myFun() {
     console.log(this);
}
myFun();//this指向全局对象

上面的代码实际上是给全局对象增加了一个函数，同理，我们在全局创建的变量也是全局对象的属性

var name = "myWindow";
console.log(window.name);//myWindow

所以我们在全局声明变量和函数时，就容易污染全局对象，甚至修改全局对象原来的属性和方法。

严格模式下全局函数的this

严格模式下函数是没有绑定到 this 上，这时候 this 是 undefined。

"use strict"
function myFun(){
    console.log(this);
}
myFun();//this为undefined

HTML事件中的this

在HTML事件句柄中，this指向接收事件的HTML元素。

<button onclick="console.log(this)">点我观察控制台输出</button>
<button onclick="this.style.display='none'">点我隐藏当前元素</button>