Javascript执行上下文顺序的深入讲解


Posted in Javascript onNovember 04, 2020

一 执行上下文?

1什么是执行上下文?

执行上下文就是当前的 JavaScript 代码被解析和执行时所在环境的抽象概念, JavaScript 中运行任何的代码都是在执行上下文中运行的.

2 执行上下文的类型

执行上下文分为三种类型:

全局执行上下文:只有一个,这是默认的,也是基础的执行上下文.(不在任何函数中的代码都是全局执行上下文)他有两个作用,一个是创建了全局变量,也就是指向window下的变量,另一个是将this的指向全局.

函数执行上下文:有无数个,每个函数都拥有自己的执行上下文,但是只有在函数被调用的时候才会被创建,每次调用时,都会为该函数创建一个新的执行上下文…

Eval 函数执行上下文: 指的是运行在 eval 函数中的代码,很少用而且不建议使用。

二 执行上下文的生命周期

1.创建阶段

执行上下文的生命周期有三个阶段:创建阶段?执行阶段—回收阶段(主要说创建阶段)

当函数被调用,但没有执行任何其内部代码之前,会先确定这三个步骤:

1) 创建变量对象:首先初始化函数的参数 arguments,提升函数声明和变量声明
2) 创建作用域链:在执行期上下文的创建阶段,作用域链是在变量对象之后创建的.作用域链本身包含变量对象。
作用域链用于解析变量。当被要求解析变量时,JavaScript 始终从代码嵌套的最内层开始,如果最内层没有
找到变量,就会跳转到上一层父作用域中查找,直到找到该变量。
3) 确定 this 指向:有多种情况.

2. 执行阶段

执行变量赋值、代码执行

3. 回收阶段

执行上下文出栈等待虚拟机回收执行上下文

三. 变量提升和this的指向

1.变量声明提升:

大部分编程语言都是先声明变量再使用,但在 JS 中,事情有些不一样:

console.log(a); // undefined
var a = 10;

上述代码正常输出undefined而不是报错Uncaught ReferenceError: a is not defined,这是因为声明提升.
相当于:

var a; //声明 默认值是undefined “准备工作”
console.log(a);
a = 10; //赋值

2. 函数声明提升

创建函数的方法有两种,一种是通过函数声明function aa(){}

另一种是通过函数表达式var aa = function(){} ,那这两种在函数提升有什么区别呢?

console.log(f1); // function f1(){}
function f1() {} // 函数声明
console.log(f2); // undefined
var f2 = function() {}; // 函数表达式

接下来我们通过一个例子来说明这个问题:

function test() {
 aa(); // Uncaught TypeError "aa is not a function"
 bar(); // "this will run!"
 var aa = function() {
  // function expression assigned to local variable 'aa'
  alert("this won't run!");
 };
 function bar() {
  // function declaration, given the name 'bar'
  alert("this will run!");
 }
}
test();

在上面的例子中,aa()调用的时候报错了,而 bar 能够正常调用。

我们前面说过变量和函数都会上升,遇到函数表达式 var aa = function(){}时,首先会将var aa上升到函数体顶部,然而此时的 aa 的值为 undefined,所以执行aa()报错。

而对于函数bar(), 则是提升了整个函数,所以bar()才能够顺利执行。

细节必须注意:当遇到函数和变量同名且都会被提升的情况,函数声明优先级比较高,因此变量声明会被函数声明所覆盖,但是可以重新赋值。

alert(a); //输出:function a(){ alert('我是函数') }
function a() {
 alert("我是函数");
} //
var a = "我是变量";
alert(a); //输出:'我是变量'

function 声明的优先级比 var 声明高,也就意味着当两个同名变量同时被 function 和 var 声明时,function 声明会覆盖 var 声明
这代码等效于:

function a() {
 alert("我是函数");
}
var a; //hoisting
alert(a); //输出:function a(){ alert('我是函数') }
a = "我是变量"; //赋值
alert(a); //输出:'我是变量'

3. 确定this指向

// 情况1
function foo() {
 console.log(this.a) //1
}
var a = 1
foo() // this->window
// 情况2
function fn(){
 console.log(this);
}
var obj={fn:fn};
obj.fn(); //this->obj

// 情况3
function CreateJsPerson(name,age){
//this是当前类的一个实例p1
this.name=name; //=>p1.name=name
this.age=age; //=>p1.age=age
}
var p1=new CreateJsPerson("尹华芝",48);

// 情况4
function add(c, d){
 return this.a + this.b + c + d;
}
var o = {a:1, b:3};
add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16
add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34

// 情况5
<button id="btn1">箭头函数this</button>
<script type="text/javascript">
 let btn1 = document.getElementById('btn1');
 let obj = {
  name: 'kobe',
  age: 39,
  getName: function () {
   btn1.onclick = () => {
    console.log(this);//obj
   };
  }
 };
 obj.getName();
</script>

结果:

1 this指向window;

2谁调用了函数,谁就是 this,所以在这个场景下 foo 函数中的 this 就是 obj 对象

3 在构造函数中,this 是当前类的一个实例

4call、apply 和 bind:this 是第一个参数

5箭头函数 this 指向:箭头函数没有自己的 this,看其外层的是否有函数,如果有,外层函数的 this 就是内部箭头函数的 this,如果没有,则 this 是 window。

到此这篇关于Javascript执行上下文顺序的文章就介绍到这了,更多相关Javascript执行上下文顺序内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Node.js入门教程:在windows和Linux上安装配置Node.js图文教程
Aug 14 Javascript
浅析JS操作DOM的一些常用方法
May 13 Javascript
webpack常用配置项配置文件介绍
Nov 07 Javascript
jquery hover 不停闪动问题的解决方法(亦为stop()的使用)
Feb 10 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
May 05 Javascript
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 jQuery
JS简单实现滑动加载数据的方法示例
Oct 18 Javascript
Vue+webpack+Element 兼容问题总结(小结)
Aug 16 Javascript
基于JavaScript实现一个简单的Vue
Sep 26 Javascript
如何使用CSS3+JQuery实现悬浮墙式菜单
Jun 18 jQuery
小程序实现分类页
Jul 12 Javascript
vue.js 子组件无法获取父组件store值的解决方式
Nov 08 Javascript
解决vant中 tab栏遇到的坑 van-tabs
Nov 04 #Javascript
解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题
Nov 04 #Javascript
基于js实现的图片拖拽排序源码实例
Nov 04 #Javascript
在vant中使用时间选择器和popup弹出层的操作
Nov 04 #Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
Nov 04 #Javascript
vant 时间选择器--开始时间和结束时间实例
Nov 04 #Javascript
Vue绑定用户接口实现代码示例
Nov 04 #Javascript
You might like
PHP 获取MSN好友列表的代码(2009-05-14测试通过)
2009/09/09 PHP
PHPMailer 中文使用说明小结
2010/01/22 PHP
smarty获得当前url的方法分享
2014/02/14 PHP
Javascript的构造函数和constructor属性
2010/01/09 Javascript
JS保留小数点(四舍五入、四舍六入)实现思路及实例
2013/04/25 Javascript
Javascript页面添加到收藏夹的简单方法
2013/08/07 Javascript
JS中的异常处理方法分享
2013/12/22 Javascript
js动态创建上传表单通过iframe模拟Ajax实现无刷新
2014/02/20 Javascript
js获取checkbox复选框选中的选项实例
2014/08/24 Javascript
javascript实现根据iphone屏幕方向调用不同样式表的方法
2015/07/13 Javascript
Bootstrap的图片轮播示例代码
2015/08/31 Javascript
jquery模拟实现鼠标指针停止运动事件
2016/01/12 Javascript
十大热门的JavaScript框架和库
2017/03/21 Javascript
详解如何提高 webpack 构建 Vue 项目的速度
2017/07/03 Javascript
JavaScript之Canvas_动力节点Java学院整理
2017/07/04 Javascript
vuedraggable+element ui实现页面控件拖拽排序效果
2020/07/29 Javascript
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
2019/07/08 Javascript
JavaScript基于面向对象实现的无缝滚动轮播示例
2020/01/17 Javascript
用jQuery实现抽奖程序
2020/04/12 jQuery
python在linux中输出带颜色的文字的方法
2014/06/19 Python
Python实现的生成自我描述脚本分享(很有意思的程序)
2014/07/18 Python
对Python中gensim库word2vec的使用详解
2018/05/08 Python
使用Python制作自动推送微信消息提醒的备忘录功能
2018/09/06 Python
python创建与遍历List二维列表的方法
2019/08/16 Python
如何在Django中使用聚合的实现示例
2020/03/23 Python
Python实现树莓派摄像头持续录像并传送到主机的步骤
2020/11/30 Python
经济贸易系毕业生求职信
2014/05/31 职场文书
物理学专业求职信
2014/07/04 职场文书
诚实守信道德模范事迹材料
2014/08/15 职场文书
村党的群众路线教育实践活动工作总结
2014/10/25 职场文书
2014年教师学期工作总结
2014/11/08 职场文书
2014年企业党建工作总结
2014/12/18 职场文书
2016年教师节感言
2015/12/09 职场文书
心得体会格式及范文
2016/01/25 职场文书
详解Redis集群搭建的三种方式
2021/05/31 Redis
js基于div丝滑实现贝塞尔曲线
2022/09/23 Javascript