前言

对于一个前端初学者来说，this的指向是一个必须要掌握的知识点，尤其是es6之后的this指向更加变得飘忽不定，我们今天就来了解一下各种情况下this的指向。

什么是this

首先，this不是一个函数也不是某个对象，它具体指向什么东西取决于我们在哪里去调用这个this，只有函数调用的时候才会发生this的绑定

1.全局作用域

console.log(this === window) //true

当我们在全局作用域中调用的时候，this指向的是window对象，相当于window调用的这个tihs

2.纯函数调用

 function fun(){
     console.log(this)//this指向window
 }
 
 fun()

为什么在函数体内this也是指向的window，我们可以看到是在全局调用的fun函数，当我们调用的时候会进行默认绑定，也就是绑定到window上。

3.作为对象方法和对象的属性值

var Person = {
    name:'张三',
    that:this,
    age:function(){
        console.log(this)//Person对象
        console.log(this.name)//李四
    }
}
console.log(Person.that) //window 类似纯函数调用
Person.age() //调用对象的age方法

当我们把this作为对象的某个方法去调用的时候，this指向的是这个对象，相当于这个对象调用这个方法

var Person = {
    obj:{
        name:'李四',
        sex:function(){
            console.log(this)//obj对象
        }
    }
}

Person.obj.sex()//调用penson对象中的obj对象的sex方法

嵌套对象的时候this的指向同样是谁调用指向谁，这时候是obj对象调用的

4.构造函数中的this

function fun(name,age){
    this.name = name;
    this.age = age;
}

var obj = new fun('李四',20)

console.log(obj)//控制台打印如下

这时候的this指向的是构造函数所创建出来的obj对象

5.class类中的this

   class Person {
        constructor(name){
            this.name = name
            this.say = function () {
                console.log('my name is '+ this.name)
            }
        }

        sleep = function(){
            console.log(this)
        }
    }
    var objA = new Person('李四')
    objA.say()//调用objA对象的say方法 控制台打印 ‘my name is 李四’
    objA.sleep()//调用objA对象的sleep方法 打印 objA对象

在class中的this都是指向这个构造函数生成的对象

6.es6中的箭头函数this指向

 var obj = {
        name:'张三',
        say:()=>{
            console.log(this)
        }
    }
    obj.say()//控制台打印window

箭头函数没有自己的this 会默认继承父级执行上下文的this，这里的上下文this就是window

注：当函数执行时，会创建一个称为执行上下文的内部对象（可理解为作用域）。一个执行上下文定义了一个函数执行时的环境。对象是没有执行上下文的。 --

 var obj = {
        name:'李四',
        person:function() {
          return {
                name:'张三',
                say:()=>{
                    console.log(this)
                }
            }
        }

    };

    obj.person().say()//调用say方法这里的this指向的是obj对象，箭头函数没有this会向上查找。普通函数创建时会绑定this，如果person函数也是箭头函数的话this指向window

更改this指向（面试经常问到）

var Person = {
    name:'张三',
    say:function(age){
       console.log(`my name is ${this.name},i am ${age} years old`)//es6语法模板字符串
    }
}

var obj = {
   name:'李四'
}

直接调用 Person.say()

bind()

Person.say.bind(obj,'20','第二个参数',...)()//bind返回的是一个重新绑定this的函数需要调用
Person.say.bind(obj)('20','第二个参数',...)//两种传参方式,参数依次加在后面

call

Person.say.call(obj,'20','第二个参数',...)//call返回的是重新绑定this并且立即调用之后的结果,参数依次加在后面

apply

Person.say.apply(obj,['20','第二个参数'])//返回的同样是绑定了this并且立即调用之后的结果，参数是数组格式

总结：

bind 跟 call和apply相比区别显而易见，返回的结果不同需要自己去调用，那么call跟apply有什么区别呢？其实除了传参方式不同并没有很大的区别，有传闻apply对内存的消耗更小一点，因为基本数据类型和引用数据类型在内存中存放的方式不同，具体是不是还需要去验证一番。

本文为作者原创，手码不易，允许转载，转载后请以链接形式说明文章出处。

简单学习Es6中的this指向

前言