this在使用时指向的理解

先看导图有大概的理解：

 

函数中使用this：（函数中直接使用【指向window对象】；函数作为对象的方法去调用【指向对象】）

a.严格模式下this指向的undefined；

b.非严格模式（use strict）this指向window；

在函数中使用理解：

1）谁执行函数this就指向谁；

var obj = {
    a:'10',
    b:function(){
        console.log(this)
    }
};
obj.b();//10
//obj.b() == obj.b().call(obj)  指向的是调用的它的obj对象
var fn = obj.b;
fn(); // this指向window对象

2）函数在被直接调用的时候，this指向window

-this在call方法：平时执行函数只是省略了call，可以理解为  say（‘here’） == say.call(window,'here');

图二：

function say(content){
   console.log(`hello word ${this} come ${content}`);    
};
/**
*call执行步骤
*把第二个参数作为函数执行的参数传入
*函数执行时的this执行第一个参数
*调用函数的语法糖
*/
say.call('I','here'); //hello word I come here
//正常调用的话，this指向到window的对象
say('here'); //hello word [object Window] come here

3）匿名函数（IIFE）的this指向window对象；

图三

(function (content){

})('here');
//2个其实是一个意思，就是一个简写了
(function (content){

}).call(window,'here');

4）函数作为new出来的新对象，this指向新对象

图四

var a = function(){
    this.a = '20';
    console.log(this); 
};
var b = new a(); // 打印 a的对象
b.a; //20

 

 --总结常见面试题：

题一：

/**
*第一个打印的20，因为是obj调用了函数，this的指向是obj（上面理解中第一点）；第二个打印是10，属于函数直接执行，对象会指向window（理解中的第二点）
*/
var a = 10;
var obj = {
    a:20,
    b:function(){
        console.log(this.a)
        var fn = function(){
            console.log(this.a)
        }
        fn();
        //fn.call(window)
    }
}
obj.b(); // 20 10
//obj.b.call(obj)



题二：
var a = 10;
var obj = {
    a:20,
    b:function(){
        console.log(this.a)
    }
}
obj.b(); // 20

var fn = obj.b;
fn(); //10 , 属于直接调用，this指向window

var obj2 = {
    a:30,
    c:obj.b
};
obj2.c(); //30 , 属于obj2调用了，this就指向obj2了



题三：
var title = 'hello';
var obj = {
    title ： 'hi',
    say:function(){
        console.log(this.title );
    }
}
var fn = obj.say;
fn(); // hello
obj.say();//hi

var obj2 = {
    title ： 'hey',
    say:function(fun){
       fun();
    }
}

obj2.say(obj.say);//传参数后，还是属于直接调用  所以this指向的是window   hello
obj2.say = obj.say;
obj2.say();
//obj的say方法赋值给了obj2，obj2就变成了下面
var obj2 = {
    title ： 'hey',
    say:function(){
        console.log(this.title );
    }
}
所以，obj2.say()调用就是 obj2.say().call(obj2) ,this指向了obj2

 

 

不在函数中使用：

不在函数中使用，this指向了window对象

var a = 1;
var obj = {
    a：10，
    b:this.a+1
};
console.log(obj.b);//2

 

es6的箭头函数中的this：

箭头函数没有this,默认指向定义它的时候的所在的对象

//全局变量创建时，指向window
const obj1 = ()=>{
    console.log(this); 
};
obj1();// window

//对象中创建时，指向当前对象

var obj2 = {
    a:'aa',
    b:function(){
        console.log(this);//obj2
        var fn = ()=>{
            console.log(this.aa)
        };
        fn();//aa
    }
};
obj2.b();