了解JS运行机制,分析this绑定 、作用域、作用域链和闭包的形成

摘要:北京时间20191203关于【了解JS运行机制,分析this绑定 、作用域、作用域链和闭包的形成】的具体情况和说明,让www.pccec.cn新闻频道的以图文形式为您慢慢道来。

了解js的运行机制有助于我们在日常的工作中,写成高质量的代码,减少bug的产生,节约维护成本。也有助于我们通过造火箭的面试。了解JavaScript引擎。通过运行机制看作用域和作用域链。通过运行机制理解this的绑定和优先级。通过运行机制理解闭包。

二、渲染引擎 | JavaScript引擎(JavaScript Engine)

了解运行机制之前,我们先来搞清楚几个基本概念。

2.1 渲染引擎

渲染是根据描述或者定义构建一个数据模型,生成图形的过程。渲染引擎将页面资源(html、css、javaScript等)构建成可视化、可听化的多媒体结果。也就是我们看到的浏览器网页呈现。

2.2 JavaScript引擎

当我们在运行一段代码时,真正赋予这段代码生命的就是JavaScript引擎。JavaScript引擎是一个专门处理JavaScript脚本的虚拟机,一般会附带在网页浏览器中。JavaScript引擎从头到尾负责整个JavaScript程序的编译和执行过程。

2.2.1 JavaScript引擎有许多种

最为大家熟知的无疑是V8引擎,他用于Chrome浏览器和Node中。V8 — 开源,由 Google 开发,用 C ++ 编写。Rhino — 由 Mozilla 基金会管理,开源,完全用 Java 开发。SpiderMonkey — 是第一个支持 Netscape Navigator 的 JavaScript 引擎,目前正供 Firefox 使用。JavaScriptCore — 开源,以Nitro形式销售,由苹果为Safari开发。KJS — KDE 的引擎,最初由 Harri Porten 为 KDE 项目中的 Konqueror 网页浏览器开发。Chakra (JScript9) — Internet Explorer。Chakra (JavaScript) — Microsoft Edge。Nashorn, 作为 OpenJDK 的一部分,由 Oracle Java 语言和工具组编写。JerryScript —  物联网的轻量级引擎。

2.3 渲染引擎和JavaScript引擎的关系

渲染引擎通过调用接口来处理JavaScript的逻辑。JavaScript通过桥接接口来访问渲染引擎的DOM等元素。

三、JavaScript运行时(JavaScript Runtime)

如果想让一段JavaScript代码真正的运气起来,单单靠JavaScript引擎是不够的,JavaScript Engine的工作是编译并执行 JavaScript 代码,完成内存分配、垃圾回收等,但是缺乏与外部交互的能力。

比如单靠一个V8引擎是无法进行ajax请求、设置定时器、响应事件等操作的,这就需要JavaScript运行时(JavaScript Runtime)的帮助,它为 JavaScript 提供一些对象或机制,使它能够与外界交互。

比如,虽然Chrome和node都是用了V8引擎,但是他们的运行时却不同,比如process、fs浏览器都无法提供。

一段javaScript代码的运行我们可以分为两个阶段。

四、JavaScript运行的两个阶段

4.1 编译阶段分词/词法分析解析/语法分析预编译(代码生成、解释阶段)

4.2 执行阶段JavaScript并非是简单的一行一行解释执行代码,而是将JavaScript划分为一块一块的可以执行代码块进行执行。JavaScript中代码块又分为三种。

4.2.1 代码块全局可以执行代码。函数可执行代码。Eval可执行代码。

接下里我们主要说说,JavaScript的执行阶段。

五、JavaScript执行

JavaScript既是编译语言,又是解释语言。JavaScript引擎实际上在执行代码前仅几微秒就编译了代码。

称为JIT(及时编译)。它本身是一个很大的话题。但是现在,我们可以跳过编译背后的理论,而只关注执行阶段,这仍然很有趣。

JavaScript引擎,编译和解释我们的JavaScript代码。JavaScript引擎其实也包含了很多较小的部分,这些较小的部分,分工合作来保证JavaScript的运行。全局内存(Global Memory)调用堆栈(Call Stack)执行上下文等等其他组件

5.1 全局内存(Global Memory)

先看一段代码

var num = 2;

function pow(num) {

return num * num;

}

复制代码

看到这段代码,大家思考一下会发生什么。可能大家已经想到JavaScript引擎,在执行到第一行代码时就立刻讲引用放入全局内存(Global Memory)。全局内存是JavaScript引擎保存变量和什么函数的地方。当引擎读取以上代码时,全局内存将填充两个绑定:

上面的代码不会执行,接下来我们尝试执行函数。

5.2 调用栈(Call Stack)

var num = 2;

function pow(num) {

return num * num;

}

pow(num);

复制代码

当我们执行函数的时,JavaScript引擎会用到调用堆栈(Call Stack)。调用堆栈是一个堆栈类的数据结构,意味着它是先进后出的执行方式。如果是多个函数,将依次进栈,先进后出。

打开浏览器控制台,然后查看“来源”标签。您将看到一些框,其中一个更有趣的名称是Call Stack。

当代码块在执行时,JavaScript引擎会创建一个执行上下文,已作为代码运行的基础运行环境。

六、执行上下文

在"4.2.1代码块",有三种代码块,分别对应三种执行上下文全局可以执行代码 => 全局执行上下文。函数可执行代码 => 函数执行上下文。Eval可执行代码 => Eval执行上下文。

6.1 全局执行上下文

基础执行上下文,一个程序只有一个全局执行上下文,任何不在函数内部的代码都在全局执行执行上下文。全局执行上下文只要做两件事情:创建一个全局的 window 对象(浏览器的情况下)。置 this 的值等于这个全局对象。

6.2 函数执行上下文

如果我们的函数有一些嵌套变量或一个或多个内部函数怎么办?

var num = 2;

function pow(num) {

var a = 1,

b = 2,

c = 3;

function add(a, b, c) {

return a + b + c;

}

}

复制代码

每当一个函数被调用时,都会为该函数创建一个新的上下文。每个函数都有它自己的执行上下文,不过是在函数被调用时创建的。函数上下文可以有任意多个。每当一个新的执行上下文被创建。

6.3 Eval执行上下文

执行在 eval 内部的代码也会有它属于自己的执行上下文,请不要、不要、不要轻易使用它。

执行上下文也分为创建和执行阶段。在创建阶段就非常有意思了。

七、执行上下文的创建

执行上下文的创建阶段主要做了三件事:决定this的绑定。创建词法环境。创建变量环境。

7.1 this绑定

在创建可执行上下文的时候,根据代码的执行条件,来判断分别进行默认绑定、隐式绑定、显示绑定等。

7.1.1 this绑定分类普通函数的调用:this指向window(浏览器环境)。对象方法的调用:this指向调用对象。(隐式绑定)构造函数:this指向构造函数实例。apply、call、bind:this指向绑定值。(显示绑定)箭头函数this:this指向外层第一个普通函数调用的this。(默认绑定)

7.1.2 this绑定优先级

this绑定也是有优先级的,优先级规则如下:函数是否存在new绑定调用:如果是的话this绑定到新创建的对象上。函数是否通过apply、call、bind显示绑定:如果是,this绑定到指定对象上。函数是否在对象方法隐式调用:如果是的话,this绑定到调用对象。如果上面三条都不满足的话:在严格模型下,this绑定到undefined,在非严格模式下,this绑定到全局对象上。

7.2 词法环境

词法环境是JavaScript引擎内部用来跟踪标识符和特定变量之间的映射关系。词法环境是Js作用域的实现机制。如果之前了解过作用域概念的话,和词法环境是类似的(ES6之后作用域概念变为词法环境概念)。

作用域就是一个独立的地盘,让变量不会外泄、暴露出去。也就是说作用域最大的用处就是隔离变量,不同作用域下同名变量不会有冲突。 ES6 之前 JavaScript 没有块级作用域,只有全局作用域和函数作用域。ES6的到来,为我们提供了‘块级作用域’,可通过新增命令let和const来体现。

7.2.1 词法环境分类全局环境:全局环境的外部环境引用是 null,它拥有内建的对象 Object/Array/等、环境记录器内的原型函数、定义的全局变量。模块环境:模块环境的外部环境引用是全局环境(window,浏览器环境),它拥有模块顶级声明的绑定、模块显式导入的绑定。函数环境:函数环境外部引用可以是其他函数环境,也可以是全局环境。它拥有声明变量和函数。

7.2.2 词法环境组成外部环境的引用(outer Lexical Environment):指它可以访问其父级词法环境(即作用域)。环境记录器 (Environment Record):存储变量和函数声明的实际位置。(声明式环境记录器,对象式环境记录器是两个比较主要环境记录器)。

词法环境中含有外部词法环境的引用,我们可以通过这个引用获取外部词法环境的变量、声明等,这些引用串联起来一直指向全局的词法环境,因此形成了作用域链。

词法环境中含有外部词法环境的引用,我们可以通过这个引用获取外部词法环境的变量、声明等,因此形成了闭包。

7.3 变量环境

查看大量资料都没有详细的记录变量环境。

ES5标准文档中规定,执行环境包括:词法环境、变量环境、this绑定。其中执行环境的词法环境和变量环境组件始终为词法环境对象。当创建一个执行环境时,其词法环境组件和变量环境组件最初是同一个值。在该执行环境相关联的代码的执行过程中,变量环境组件永远不变,而词法环境组件有可能改变。

变量环境的不变和词法环境的可能改变都是指引用的改变,规范12.10和12.14两部分的内容提到了词法环境在with以及catch语句块中会改变。

八、JavaScript的执行过程总结

九、预览整体过程,本文只是讲了一下部分

JavaScript既是编译语言,又是解释语言。但是JavaScript本质上是一种解释型语言,与编译型语言不同的是它需要一边执行一边解析,而编译型语言在执行时已经完成编译,可直接执行,有更快的执行速度。


查看更多

实时推荐

北京通州区一路面塌陷现3米深大坑 疑因管路漏水所致
推荐 2020-05-31 15:14 109 6833
黄晓明穿黑西装搭配链条潮范儿十足 机场暖心签名超接地气
推荐 2020-05-31 15:14 357 5195
3 - 1后1 - 0,励志!霍村打破8场不胜后又赢了,积分已追平欧战区
推荐 2020-05-31 15:14 244 5313
新手练胸,老手练背!一组背肌训练,改善体态,强化上半身线条
推荐 2020-05-31 15:14 967 4721
汽修案例:斯巴鲁傲虎仪表故障灯点亮、无法正常换挡
推荐 2020-05-31 15:14 992 5416
印度“封城”期间,农民工为回家徒步2000公里,用时10天…
推荐 2020-05-31 15:14 108 4863
市妇联“社会妈妈”看望牵手结对的贫困学生
推荐 2020-05-31 15:14 811 9855
盐城交警接到线报:920条名牌烟装进电视柜纸箱 藏身集装箱货车
推荐 2020-05-31 15:14 573 4971
你家买白菜吗?这4种不要带回家,别不当回事,等吃亏就来不及了
推荐 2020-05-31 15:14 404 9988
鹰潭推进农村“法律明白人”培养工程
推荐 2020-05-31 15:14 487 2737
进出岛收费站6月完成拆除
推荐 2020-05-31 15:14 900 7403
杨颖时尚造型登封面,银发配“二次元”穿搭,挑战超现实主义风
推荐 2020-05-31 15:14 912 8324
揪心!通渭县大部分乡镇遭受风雹灾害,农作物受灾严重
推荐 2020-05-31 15:14 985 6270
马粉有福了!“跑旅SUV”亮相,自然吸气+8气囊,预售价亮了
推荐 2020-05-31 15:14 541 5618
解忧路边摊,不只是“治愈系”
推荐 2020-05-31 15:14 997 5523
天津大邱庄:从钢铁“天下第一庄”到疑似“传销据点”的陨落
推荐 2020-05-31 15:14 418 3010
甜蜜暴击!消防员求婚,消防搜救犬送起戒指
推荐 2020-05-31 15:14 904 2027
沈阳顺达重矿获中国破碎机品牌影响力优质奖
推荐 2020-05-31 15:14 495 8353
为什么在日本的垃圾桶内,总能捡到成捆的现金?背后原因让人心酸
推荐 2020-05-31 15:14 503 8387
世界上最脏的国家,生活环境让人无法忍受,印度都自愧不如
推荐 2020-05-31 15:14 547 2572
全球最珍贵河流,盛产翡翠禁止私人开采,有军队24小时看守
推荐 2020-05-31 15:14 223 7600
2名90后驴友门头沟清水镇深山遇险 今日凌晨获救
推荐 2020-05-31 15:14 467 7728
原创 22岁场均23+7入选全明星 美记爆料塔图姆拿顶薪基本没有悬念
推荐 2020-05-31 15:13 212 2725
《青你2》最大遗珠,乃万卡位失败,但凭最后感言显现不同的格局
推荐 2020-05-31 15:13 882 1646
林志颖妈妈曝光儿子“黑料”陈若仪听到后愣住了,不相信是真的
推荐 2020-05-31 15:13 690 7725
如今55岁还拍戏谋生!21岁红遍全国,225岁嫁世界冠军
推荐 2020-05-31 15:13 109 1253
《传闻中的陈芊芊》陈小千穿越时间点分析,为什么抢亲当夜魂穿
推荐 2020-05-31 15:13 134 1825
大连女子离家一个月后,求人上门看看8狗6猫​!屋内景象惊呆众人
推荐 2020-05-31 15:13 445 4068
精益求精 持续改进——九江学院附属医院开展第五次静脉输液现状横断面调研
推荐 2020-05-31 15:13 837 953
娄星工业集中区召开环境影响跟踪评价报告书专家审查会
推荐 2020-05-31 15:13 385 6226
从小灌输3句话,解决孩子爱哭闹、爱发脾气、胆小懦弱的坏习惯
推荐 2020-05-31 15:13 608 8752
这就是山东|鲁力助农 绝佳饮品!济宁经开区副主任带您品尝上花林菊花茶
推荐 2020-05-31 15:13 964 5733
通辽市:交警进社区深化“一盔一带”安全守护行动
推荐 2020-05-31 15:13 828 1521
一直期待的《假偶天成/只因我们天生一对》大结局,对此的看法
推荐 2020-05-31 15:13 90 6968
泉州石狮:祥芝这群中老年骑行者 组队骑游永春
推荐 2020-05-31 15:13 777 4371
重实绩、清底数、稳发展,我镇已全面 完成村“两委”干部届中考核
推荐 2020-05-31 15:13 850 7223
「镇街动态」乐陵黄夹镇:护航“开学季”志愿服务进校园
推荐 2020-05-31 15:13 939 5455
张馨予背头造型太帅了,哪吒同款表情超撩人,要把人掰弯的节奏?
推荐 2020-05-31 15:13 125 1086
呀诺达景区观鸟
推荐 2020-05-31 15:13 104 5388
如果别人威胁要打我,我通过报警解决了但过了些天,当别人又打我的时候,我反击属于正当防卫吗?
推荐 2020-05-31 15:13 209 1962
咬伤男配角手臂,逼年轻演员喝酒,周冬雨在剧组真的那么大姐头?
推荐 2020-05-31 15:12 737 3383
雪峰科技:拟定增募资不超过6.05亿元 引入战略投资者宝地投资
推荐 2020-05-31 15:12 524 3697
身残志坚开店 脱贫路上标兵——记博爱县磨头镇柳庄村严豆豆脱贫故事
推荐 2020-05-31 15:12 531 4609
27岁金靖从小透明到“喜剧女王”:其实“丑女”也会闯出一片天
推荐 2020-05-31 15:12 345 7806
河南理工大学、河南科技大学、河南工业大学,哪所大学实力最强?
推荐 2020-05-31 15:12 271 1626
“百日劳动竞赛”千名快速路建设者“比学赶超”
推荐 2020-05-31 15:12 662 3646
娄底市财政局:进村入户走访 消费助力扶贫
推荐 2020-05-31 15:12 835 3672
宁武县图书馆总馆宁化古城分馆挂牌成立
推荐 2020-05-31 15:12 134 2261
德阳组织企业参加疫情后举办的首次展会——2020成都美好生活系列会展之品牌消费展
推荐 2020-05-31 15:12 512 4240
茶盖中华,价甲天下——宁红茶
推荐 2020-05-31 15:12 330 2903
湖南师大思沁新化实验学校天门中心学校合作校举行揭牌仪式
推荐 2020-05-31 15:12 447 1165
国企服务五队组织莱芜公交到济南公交交流工作
推荐 2020-05-31 15:11 424 8137
河南最受欢迎的19所高校,郑大居首,河南财大、河科大表现出色
推荐 2020-05-31 15:11 576 3475
自知 自爱 自律 ——大英县实验学校教育集团(本部)举行初2022级学生青春期知识讲座
推荐 2020-05-31 15:11 310 2312
保定市通报3起破坏营商环境典型案例--河北省纪委监委网站
推荐 2020-05-31 15:11 952 6840
“未”爱出发!漯河“线上检察开放日”活动干货满满
推荐 2020-05-31 15:11 215 6155
大渡河畔的“金枇杷”——四川石棉县农村产业结构调整让农民走上致富的快车道
推荐 2020-05-31 15:11 162 7818
全民核酸检测,加油牡丹江
推荐 2020-05-31 15:11 641 6823
黎城县副县长、公安局长郭益民深入太行钢铁有限公司召开“创优环境 全优全创”座谈会
推荐 2020-05-31 15:11 388 4048
美媒评本赛季最佳一阵,詹皇字母哥领衔,库里落选无缘最佳
推荐 2020-05-31 15:11 885 6705
林州建筑职业技术学院召开第一次全体教职工会议
推荐 2020-05-31 15:11 655 8052
章泽天晒老公视角健身照,轻松举铁秀肌肉,意外暴露豪宅内景
推荐 2020-05-31 15:10 819 994
女排“激烈冲突”!辽宁大将冲上看台挥拳打人,她和队友大打出手
推荐 2020-05-31 15:10 451 2907
严歌苓小说《芳华》中刘峰的命运告诉我们:人的善良要带点锋芒
推荐 2020-05-31 15:10 985 1745
吉克隽逸就是敢穿,白衬衫衣领低到胃,配高腰短裤成机场焦点
推荐 2020-05-31 15:10 722 9196
中超3外援政策让鲁能因祸得福,李霄鹏有望签超级射手搭档郭田雨
推荐 2020-05-31 15:10 709 899
一个女人用这几句话骂你,那你还等什么,她一定是对你有意思
推荐 2020-05-31 15:10 677 6232
省无委办副主任赵在源赴我州调研指导工作
推荐 2020-05-31 15:10 553 8591
都是三双猛男,罗伯特森为什么排在威斯布鲁克前边?
推荐 2020-05-31 15:10 653 5611
38岁的姚笛真会穿,一件大红色衬衫连衣裙优雅大气,透露出时尚感
推荐 2020-05-31 15:10 536 4117
秦国的祖先靠养马得“秦国”,因为勤王被封诸侯,这都是运气吗?
推荐 2020-05-31 15:10 749 7179
【彰显省会担当,公安怎么干】湾里公安分局20小时内破获系列盗取车内财物案
推荐 2020-05-31 15:10 274 3698
盘点明星的减肥史:张艺兴月瘦26斤,逆袭前杜海涛逆袭后彭于晏
推荐 2020-05-31 15:10 858 2191
5年2.18亿!又一个四千万先生要来了,合同没毛病,两点存疑!
推荐 2020-05-31 15:10 944 1636
今年羊价会下跌吗?后市又会如何演变?这些问题养羊户要了解清楚
推荐 2020-05-31 15:10 526 7468
宁德新闻:交警大队深入屏南客运企业开展交通安全知识宣传活动
推荐 2020-05-31 15:10 909 1368
勤勉自闭儿 琴键上重生
推荐 2020-05-31 15:10 973 4195
原创 30岁210斤!这个胖女孩没有减肥成功,《大饿》教会了我们做自己
推荐 2020-05-31 15:09 165 6910
如何雕刻女神的马甲线身材?体脂率降至20%,5个动作练出马甲线
推荐 2020-05-31 15:09 669 7921
这次签约将会影响到喀什东城的房价走向
推荐 2020-05-31 15:09 650 8726
易烊千玺厨房做“羊蝎子”,何炅晒出无滤镜照片,粉丝:有点失望
推荐 2020-05-31 15:09 295 2309
听信婆婆偏方治湿疹?4个方法科学消疹,娃不遭罪
推荐 2020-05-31 15:09 146 6494
真的回来了!西甲下周起允许各支球队恢复合练
推荐 2020-05-31 15:09 1000 1358
原创 又闹不愉快?小丁经纪人回怼山东媒体,球迷:归队时间又不好说了
推荐 2020-05-31 15:09 796 4628
海贼王:百兽海贼团现状,敌人入侵,内部争斗,还有卧底
推荐 2020-05-31 15:09 166 4601
原创 海贼王反派背后的感人故事!谁说反派除了坏什么也没有?
推荐 2020-05-31 15:09 818 5900
沈阳市网络直播带货节 为家乡特产打Call
推荐 2020-05-31 15:08 133 3912
电视剧《西部世界 第三季》,很多人给盖“神剧”头衔?
推荐 2020-05-31 15:08 493 1281
幼儿园作业调查家境,让孩子画“我家的车”,宝妈的处理太机智
推荐 2020-05-31 15:08 324 9113
哪类父母晚年最有福报?过来人经历让人意外,不是勤劳无私的
推荐 2020-05-31 15:08 186 1532
《奔跑吧》关晓彤遭排挤?与baby几乎零互动,妆发也不如baby
推荐 2020-05-31 15:08 178 2607
Karsa:雷达顶不住天音波 希望他手下留情
推荐 2020-05-31 15:08 583 7330
绿意盎然的“大漠名胜”统万城
推荐 2020-05-31 15:08 115 1904
放弃连衣裙吧,今年流行这种美得出众还不贵的小衫,端午穿正合适
推荐 2020-05-31 15:08 804 1190
邻几便利店3年400店 5月新开门店已达40家
推荐 2020-05-31 15:08 445 4719
省煤监局来武平县督导煤矿安全隐患大排查大整治工作
推荐 2020-05-31 15:08 321 1970
教你在家炸鸡排,成本不到5元又香又脆,学会别去外面买了
推荐 2020-05-31 15:08 883 2911
还是小将!意媒:布冯已决定与尤文续约一年
推荐 2020-05-31 15:08 964 2688
承德“的哥”张建民:身体力行 践行“诚信”
推荐 2020-05-31 15:08 994 3163
杨幂私服盘点,轻松驾驭各种风格,瘦的人这么穿时尚又好看
推荐 2020-05-31 15:08 253 9322