谈谈对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
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页