执行上下文、this 的指向简单易懂

执行上下文类型 分为全局执行上下文 函数执行上下文 eval函数执行上下文

  • 全局执行上下文是任何不在函数内部的都说全局执行上下文,他首先会创建一个全局的window对象,并且设置this的值等于这个全局对象,一个程序中只有一个全局执行上下文
  • 函数执行上下文 当一个函数被调用时,就会为该函数创建一个新的执行上下文,函数的上下文可以有任意多个
  • eval函数中的代码有属于他们的执行上下文

创建执行山下文有两个阶段,一个是创建阶段一个是执行阶段:
创建阶段:
1.this绑定 在全局执行上下文中,this指向window 在函数执行上下文中,this指向取决于函数如何调用。如果被引用对象调用,this将指向呢个对象,否则this的值被设置为全局对象或者undefined
2.创建词法环境组件 词法环境是一种有标识符–变量映射的数据结构,标识符是指变量/函数名,变量是对实际对象或者原始数据的引用。
3.创建变量环境组件 环境变量也是一个词法环境,其环境记录器持有变量声明语句在执行上下文中创建的绑定关系

执行阶段:
此阶段会完成对变量的分配,然后执行玩代码

简单来说执行上下文就是在执行js代码之前,需要先解析代码。解析的时候先创建一个全局的执行上下文环境,先把代码中即将执行的变量函数声明都拿出来,先赋值为undefined 函数先声明好可使用。然后在执行正式程序。在函数执行之前,也会有执行上下文,但是比全局上下文多了this和argument,以及函数参数

this是执行上下文的一个属性,他指向最后一次调用他的对象。一般有四种调用模式
1.函数调用模式,一个函数不是对象的属性时,直接作为函数来调用时,this指向全局对象
2.方法调用 一个函数作为一个方法的属性时,this指向这个对象
3.构造器调用 一个函数用new方法是,产生的新对象,this指向这个新对象
4.apply,call, bind 这三个会指定this的指向,不同的是调用方式和接受参数的不同。
这四种方式构造器new这种模式优先级最高
1、this的绑定和函数的声明位置没有关系,只取决于函数的调用方式
2、当一个函数被调用时,会创建一个活动记录(有时候也称为执行上下文)。这个记录会包含函数在哪里调用、函数的调用方式、传入的参数等信息,this就是这个活动记录的一个属性,会在函数执行的过程中用到

直接调用
function get(content){
	console.log(content)
}
get('哈哈') 
get.call(window,'哈哈')上面的语法糖
作为对象的方法调用
var person = {
	name:'张三',
	run:function (time){
		console.log(this.name + time);
	}
}
person.run(100)
person.run.call(person,100) 上面的语法糖
箭头函数this

箭头函数中的this是再定义函数的时候绑定如而不是再执行函数的时候绑定
箭头函数中,this的指向的固定化,并不是因为箭头函数内部有绑定this的机制,实际箭头函数根本没有自己的this,导致内部的this就是外层代码块的this。因为它没有this,所以就不能用作构造函数。
箭头函数中的this实在定义函数时候绑定。

1.导致箭头函数内部this,取决于外部代码块的this。

var x = 11
var obj = {
	x:22,
	say:()=>{
		console.log(this.x) //11
	}
}
obj.say()

箭头函数外部的代码块首先要找到它的平级,而这里的箭头函数本身与say平级key:value的形式,和say同级的是x:22。所以say外部的代码块为x=11,

如何是22 ???

var x = 11;
var obj = {
	x:22,
	say:function (){
		console.log(this.x);
	}
}
obj.say() //x = 22
obj.say.call(obj)
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值