JavaScript中this情况的几种说明

this的情况说明

我相信在学习JS过程中，有不少人对this感到疑惑，而以下是我在学习的过程中对this的总结。

首先我们要明白this是什么，它是指上下文中所指的对象，在不同的情况下它所指向的对象不同

在方法中的this

首先我们要明白什么是方法，方法指的就是对象中的函数。只要这个函数是对象中的属性，那么这个函数就叫做这个对象的方法。
例如：
var person = {
name:‘张三’,
sayName:function(){
console.log(‘名字是:’+this.name)
}
}
person.sayName();
调用person对象的sayName函数(等价于person的sayName方法，同一个函数的不同叫法 它的意义跟鲁迅和周树人是一个意思，所指向的都是同一个人) 控制台输出的就是: 名字是:张三

单独情况下的的this

当this单独使用时，它就等价于window ,它会去找全局的变量[object Window]。例如：
var person = {
name:‘张三’,
sayName:function(){
name=‘王五’,
console.log(‘名字是:’+this.name)
}
}
person.sayName();
var name = ‘李四’
console.log(this.name) 它输出的name是李四。

函数中的this

在函数中使用this,它也会去找全局的变量即[object Window]。但是它跟单独情况下的this的最大不同是，它会优先查找自身有无该变量，如果有则使用，如果没有就沿着自身的函数域链查找，如果都没有就找外部全局的变量，如果都没有那么就会出现undefined

构造函数中的this

在构造函数中，我们遵循一个原则，及通过构造函数创建的对象，哪个对象调用，那么这个this就指向谁，及this就是谁。例如：首先创建一个构造函数
function Person (name,age,gender){
this.name = name;
this.age =age;
this.gender =gender;
this.sayName =fun;
}
function fun(){
alert(“hello,我是”+this.name);
}
然后创建一个Person的实例
var per =new Person(“熊大”,12,“男”);
调用这个方法 per.sayName()
警告框弹出的是 hello,我是熊大
如果创建另一个P的实例例如
var per2=new Person(“熊二”,9,“男”);
调用这个方法 per2.sayName()
警告框弹出的是 hello,我是熊二

在事件中的this

在事件中我们遵循一个原则，那就是给哪个元素绑定事件，那么这个this就是指向哪个元素，例如

<div onclick=function(){this.style.background='red'}>点了盒子会变色</div>

里面的this就是div这个盒子，因为我们把事件绑定给了div，所以this就指向了这个div

箭头函数中的this

在箭头函数中this是静态的，永远都指向背景中的this，感兴趣的朋友可以查阅相关资料

如果有哪里说错或者需要补充的，欢迎朋友指出不足与错误谢谢