内容较长，包括各种案例，坚持看完，你就懂了。。。
1.全局this，指向window
console.log(this)
- 非严格模式：window
- 严格模式：window
2、普通函数中this
function fn(){
console.log(this); //window 严格：undefined
}
fn();
var obj={
a:function(){
function fn1(){ //此时是嵌套的函数，指向不同于a函数
console.log(this)
}
fn1();
}
}
obj.a();
- 非严格模式：window
- 严格模式：undefined
3、回调函数中this的指向（重要）
1)普通回调函数
function fn(){
fn1();//回调
}
function fn1(){
console.log(this) //此时的指向，区分window和undefined
}
fn();
- 非严格模式时this指向window - 严格模式时this执行undefined
2)在使用回调函数时，利用argumentsn这样的方式执行了回调
function fn(f){
arguments[0](); //利用arguments执行回调
}
function fn1(){
console.log(this)
}
fn(fn1);
- 回调函数中this指向调用该回调函数上下文环境函数中arguments
3)部分方法中提供了替换this的参数,方法中的this指向方法参数thisArg选项内容
拿数组方法中map举例
var arr=[1,2,3]
var arr1=arr.map(function(item){
console.log(this)
},5)
//此时Array.map(function(){},thisArg)就是this的指向
4）事件回调侦听函数，this指向监听者
var div=document.querySelector("div")
div.addEventListener("click",clickHandler)
function clickHandler(e){
console.log(this) //div
}
var obj={
a:function(){
document.addEventListener("click",this.clickHandler)
},
clickHandler(e){
console.log(this); //#document
}
}
obj.a()
5)回调函数赋值给谁，对应的回调函数中this指向就是根据对应的内容产生指向
function fn(){
console.log(this)//window|undefined
return function(){
console.log(this)
}
}
var aaa=fn()
aaa() //此时this指向window,严格模式undefined
var o={
a:fn()
}
o.a();//此时指向对象o
4.对象中this指向
var b=3;
var obj={
b:2,
a:this.b,//对象属性
c:function(){
console.log(this);//对象方法
}
}
console.log(obj)
obj.c()
var o={
b:function(){
return 3;
},
c:function(){
return function(){
console.log(this)
}
},
a:this.b(),//报错，因为当this为全局指向，会报错
d:this.c()
}
console.log(o.a)
console.log(o);
- 对象属性中如果使用this，这个this指向当前对象外上下文环境中的this指向
- 对象方法中的this，根据其调用情况，谁调用它，this指向谁
5.箭头函数
var fn=()=>{
console.log(this);
}
fn();//window
var o3={
b:()=>{
console.log(this)//此时指向this
},
c:function(f){
f();
}
}
o3.c(o3.b);
- 箭头函数内的this指向箭头函数外上下文环境（定义位置）中的this指向
6.ES5面向对象中的this
function Box(){
}
Box.prototype.a=1;
Box.prototype.b=this.a;//其他的this指向
Box.prototype.c=function(){
console.log(this); //实例化b
console.log(this.b); //1
}
Box.e=4
Box.d=3;
Box.run=function(){
console.log(this); //BOX
console.log(this.d); //3
}
var b=new Box();
b.c();
console.log("aa"+b.a)
Box.run();
- 原型方法中的this指向当前实例化的方法
- 构造函数下的方法指向当前构造函数
- 其他的this指向均是当前环境中this指向
7.ES6面向对象中this指向
var a=4;
class Box{
a=10;
static a=1;
static b=this.a;
c=this.a
constructor(){
console.log(this) //实例化b
}
play(){
console.log(this) //实例化b
console.log(this.c); //10
}
static run(){
console.log(this) //Box
console.log(this.b); //1
}
}
var b=new Box();
b.play();
Box.run();
console.log(b)
- 实例化的属性和方法中this指向调用当前方法或者属性的实例化对象
- 静态属性和方法中this指向当前类
如果看完还不懂，多敲几次就明白啦
