javascript中的this指向问题

全局下的this

• 非严格模式的情况下，下面的this都是指向window的

console.log(this);//window
        
function abc(){
    console.log(this);//window
}

对象当中的this

• 属性描述this时，这个时候对象还没有生成，所以this指向外层的this指向。
• 对象的方法this指向该对象本身

var a = 10;
var obj1 = {
    a: 100,
    c: this.a,
    //window，对象当中，this指向window，因为是属性描述，对象还没有生成，所以指向外层this指向
    init: function () {//对象的属性函数中，this指向对象obj1
        var obj = {
            a: 1,
            c: this.a,//属性描述this,obj1
            b: function () {
                // obj对象的方法中this指向obj对象
                console.log(this.a);//1
            }
        }
    }
}//到这里对象算是创建完成

var a=20;
var obj={
    a:1
}
obj.b={
    a:100,
    c:this.a,//20
    //创建obj.b.c的时候，obj.b还没创建完成，所以不认为b是obj上的属性，所以this依然指向外层this的指向，也就是window
    d:function(){
        console.log(this.a);//100 this指向本属性
    }
}

console.log(obj.b.c);

var obj={
    a:1,
    b:function(){
        // this->obj
        var o={
            // 判定o对象没有创建完，this指当前对象外this的指向，这里的this指向是obj
            c:this.a
        }
        console.log(o.c);//1
    }
}
        
obj.b();

回调函数的this

function ab(fn){
    fn();
}
function cd(){
    // this因为回调函数重定向指向window
    console.log(this);//window
}

ab(cd);

var obj={
    a:function(fn){
        fn();
    },
    b:function(){
        // 如果直接执行obj.b() 这里的this应该是obj对象
        // 如果通过上面a方法回调执行当前b的时候，this被重定向到window
        console.log(this);
    }
}

obj.a(obj.b);//window

//forEach,filter,reduce,some,every,flatMap等里面都是回调函数都指向window
var obj = {
    a: function () {
        setTimeout(function () {
            console.log(this)//window,匿名回调函数
        }, 100);
        // 所有的函数一旦被写在一个方法中，这个函数就是匿名的回调函数，在该函数中this指向window
        setInterval(function(){
            console.log(this);
        },100)
        var arr=[1,2,3];
        arr.map(function(){
            console.log(this);//window
            //匿名回调函数
        });
        new Promise(function(resolve,reject){
            console.log(this);//window
        })
    }
}

事件this指向

事件侦听的回调函数是特殊的回调函数，this是被重新处理了，this指向被侦听的对象

document.addEventListener("click", clickHandler);

function clickHandler(e) {
    // this===e.currentTarget
}

var obj={
    a:function(){
        document.addEventListener("click",this.b);//点击后触发，打印document
        this.b();//直接运行 打印obj对象
    },
    b:function(e){
        // 因为b函数是事件侦听的回调函数，因此这里this指向事件侦听的对象，也就是document
        console.log(this);
    }
}
obj.a();

ES6 this指向

类中的this基本都是指向实例化后的对象，静态的this指向类本身

class Box{
    // ES7后才有的
    // 这里的内容是constructor执行后赋值
    b=3;
    constructor(){
        this.a=this.b;
        Box.b=20;
        Box.a=Box.b;
        //之前没有static所以都是上述方式，来静态操作，上下等同
        // static b=20; 
        // static a=this.b;//一旦被设为静态属性，this指向都会被设置为当前的类名Box
    }
    play(){
        // 这里的this都是实例化的对象
        console.log(this.a);
    }

    static run(){
       console.log(this);
        // this
        // 因为使用static定义的方法，this指向为当前类名Box
        // 对于面向对象语言来说，一般在静态属性和方法中不允许使用this这个概念
    }
           
}

//新建类然后继承
class Ball extends Box{
    constructor(){
        super();
    }
  
}

var b=new Ball();
Ball.run();//这里打印的Ball类，继承会重定向this到新类中
//继承后静态方法也会被继承


var b=new Box();
console.log(b.a);//3
b.play();//3
console.log(Box.a);//20

Box.run()//打印box类

ES6箭头函数的This指向

//所有箭头函数内的this都是指当前函数外的this指向
var fn=()=>{

};
var obj={
    a:()=>{
        console.log(this);//this--->window
    },
    b:function(){
        console.log(this);//this--->obj
    },
        c(){
        console.log(this);//this--->obj
    }
}
obj.a();//window
obj.b();//obj
obj.c();//obj

var obj={
    a:function(){
        setTimeout(()=>{
            // 因为本来是回调函数，this统一都会被执行window
            // 但是使用了箭头函数，就会全部把这里this指向setTimeout外的this指向，也就是obj
            console.log(this);
        },100)
    }
}
obj.a();//obj

ES5 中的this

因为es5没有类的方法，所以我们都是如下方式建立一个类

function Box(){//构造函数
    this.play();
    // 构造函数中this，new出的对象
}
Box.a=function(){
    // 这个方法类似于ES6的静态方法
    // this  -->Box
}
Box.b=3;//和ES6静态定义属性一样

Box.prototype.play=function(){
    // this  就是当前调用该方法的实例对象
}
Box.prototype.c=10;

console.log(Box.b);//3
Box.a();

var b=new Box();
b.play()
// b对象没有play这个对象属性，因此就去原型链中找到最近的play方法，执行这个play方法是由b这个对象执行
console.dir(Box);//打印Box类   console.dir()可以显示一个对象的所有属性和方法

//因为box只是一个函数所以用dir打印成为一个类
// 静态方法只和类有关系，与实例化的对象没有任何关系