谈谈对this的理解

谈谈对this的理解

什么是this

每个函数在被调用时都会创建一个执行上下文，这个上下文包含了变量环境、this、作用域链等，this就是执行上下文中的一个属性，他是在函数运行时进行绑定的，this的绑定和函数的声明位置没有关系，它取决于函数的调用方式。

this的绑定规则

• 默认绑定

首先要说的就是函数最常用的调用方式独立函数调用，这时this就会遵守默认绑定规则。看下面这个例子：

var name="zhangsan";
function a(){
     
	console.log(this.name)//zhangsan
}
a()

这里我们看到，当我们调用函数a时，this.name指向的全局中的name，这是因为这个例子采用的的就是this的默认绑定，指向的是全局对象，但是这里要注意区分严格模式和非严格模式，非严格模式下默认绑定this指向的是全局对象，而在严格模式下，默认绑定this指向的是undefined。

• 隐式绑定

隐式调用就是函数作为对象的方法被调用，此时this会指向这个对象。

let name="lisi"
let obj={
     
	name:"zhangsan",
	paly:function(){
     
		console.log(this.name);
	}
}
obj.paly();//zhangsan

但是对于隐式绑定存在一种特殊性等情况就是隐式丢失，就是说隐式绑定的函数会丢失掉绑定的对象而变成默认绑定。

var name="lisi"
let obj={
     
    name:"zhangsan",
    paly:function(){
     
    	console.log(this.name);
	}
}
let fun=obj.paly;
fun()//lisi

虽然fun是obj.paly的一个引用，但是实际上是引用这个函数本身。

• 显示绑定

显示绑定就是将某个对象直接绑定到this上，此时这个this就指向这个对象，一般我们通过call/apply/bind来实现显示绑定。

function fun(){
     
	console.log(this.name);
}
let obj={
     
	name:"zhangsan"
}
let name="lisi";
fun.call(obj)//zhangsan

我们通过call方法直接把obj绑定到函数fun的this上。

• new绑定

使用new方法时函数会作为构造函数，最终返回一个新的对象，而这个函数中的this会直接指向这个新的对象。

function fun(name){
     
	this.name=name;
}
var newFun=new fun("zhangsan");
console.log(newFun.name)//zhangsan

• 箭头函数

调用箭头函数时，不会隐式的传入this，而是从定义时的函数继承上下文，这个作用可以有效地帮我们解决DOM事件绑定出现的问题，因为给DOM绑定事件时this会指向绑定事件的元素，还有一点要注意，当箭头函数作为对象字面量的时候this是指向window。

var name="wangwu"
function fun(){
     
    let name="lisi";
    let obj={
     
        name:"zhangsan",
        paly:()=>{
     
            console.log(this.name);
        }
    }
    obj.paly();
}
fun();//wangwu