资讯专栏INFORMATION COLUMN

JavaScript的执行过程

gaomysion / 2583人阅读

摘要:变量对象实际上是一个逻辑上的概念,是逻辑上作用域链的组成元素。在全局上下文中,全局对象充当变量对象,全局上下文的作用域链中存放全局对象在函数进入执行上下文之前,会生成一个活动对象,将参数函数声明变量声明按这个顺序添加到变量对象之中。

javascript的执行过程

整个JavaScript的代码运行可以分为 <建立执行上下文> 和 <代码执行> 两个阶段;
其中执行上下文的建立包括:

初始化this

变量对象VO(活动对象AO)

作用域链SC;

代码执行时会实例化VO或AO对象中的变量;具体如下:

执行上下文 execution context

执行上下文会有三种情况:

全局执行上下文、

函数执行上下文、

eval执行上下文;

引擎会在执行时建立执行上下文堆栈;执行上下文会初始化三个对象:this、变量对象VO/活动对象AO、作用域链。

this对象

使用easy模式来判定this的指向,作为对象属性方法调用时指向对象,作为全局方法使用指向window,函数中的this主要是依赖于调用者,在进行赋值等操作时注意this的指向丢失问题;

变量对象VO/激活对象AO

看有些资料说变量对象和活动对象是一回事儿,甚至有些资料说其差异在于活动对象多了arguments属性。昨天的学习课程让我对这个问题有了清晰的认识。变量对象实际上是一个逻辑上的概念,是逻辑上作用域链的组成元素。而在实际的实践中则大部分时间由活动对象充当这个角色。在全局上下文中,全局对象window充当变量对象,全局上下文的作用域链中存放全局对象;在函数进入执行上下文之前,会生成一个活动对象,将arguments、参数、函数声明、变量声明按这个顺序添加到变量对象之中。

在VO/AO中存在同名变量时的覆盖顺序是:应该是函数声明>函数形参>变量;也就是在这里完成变量声明、函数形参和函数声明的提前的;而变量声明不会进行复制操作,函数形参也没有复制操作一说;需要注意的是函数声明会把函数体带入,此时函数会建立相应的隐式[[scope]]数组属性,这个数组指向的当前上下文的作用域链,需要注意的是这里只有函数声明,不会有函数表达式,函数声明都是在跟语句下,而函数表达式都是在执行代码时建立的;

函数中的激活对象最开始只有一个对象;就是arguments这个对象,有着length、callee等属性;

其实VO/AO都是作为当前上下文的作用于链的组成元素,

作用域链scope chain

全局执行上下文的作用域链就是[window];

函数的作用域链就是 [当前上下文的VO/AO,自身的scope内容];这里函数的隐式[[scope]]是在函数被声明或者被表达式执行时建立的,也就是上文说的当前执行上下文的作用域链;

变量实例化在代码执行前,上下文建立后来完成的

原型

所有的对象都是通过函数创建的,首先看看函数和new操作时都发生了什么:其中隐式[[prototype]]也就是浏览器中认为的 _protp_这个对象

prototype原型

函数也是一种对象。他也是属性的集合,你也可以对函数进行自定义属性。javascript自己就默认的给函数一个属性------prototype。对,每个函数都有一个属性叫做prototype。这个prototype的属性值是一个对象(属性的集合,再次强调!),默认的只有一个叫做constructor的属性,指向这个函数本身。

进行new Object()时的情况

隐式原型"_proto_"也是[[prototype]]
每个函数function都有一个prototype,即原型。这里再加一句话------每个对象都有一个_proto_,可成为隐式原型。这个_proto_是一个隐藏的属性,javascript不希望开发者用到这个属性值,有的低版本浏览器甚至不支持这个属性值。

每个对象都有一个_proto_属性,指向创建该对象的函数的prototype。

同样自定义函数的prototype。自定义函数的prototype本质上就是和 var obj = {} 是一样的,都是被Object创建,所以它的_proto_指向的就是Object.prototype。

但是Object.prototype确实一个特例------它的_proto_指向的是null,切记切记!

同样之前说了函数也是对象,那么函数的_proto_是谁?是Function.prototype,而Function.prototype指向的对象也是对象,它的_proto_是不是也指向Object.prototype?看一张大图慢慢理解:

其实在JavaScript中的instanceof就是跟着原型链这么来进行判定的;

创建function算法 函数有prototype属性是个对象和[[Prototype]]也就是_proto_属性

F=new Object();创建对象

F.[[class]]="Function";指定类型

F.[[Prototype]]=Function.prototype;把_proto_指向函数的prototype

F.[[Call]]=internalCall; 内部调用

F.[[Construct]]=internalConstructor; 内部构造

F.[[Scope]]=currentContext.Scope Chain.concat(); 把[[Scope]]是当前执行上下文作用域

F.length=FormalParameterNum

//DontDelete ReadOnly DontEnum

temp=new Object();  初始化prototype

temp.constructor=F; 初始化prototype下的constructor

//DontEnum DontDelete

F.prototype=temp; 完成初始化

return F 返回

new函数

function internalConstructor(parameters){

O=new Object();

O.[[Class]]="Object";

O.[[Prototype]]=Object.prototype;

R=F.[[Call]].apply(O,parameters);

return O;

}

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/87072.html

相关文章

  • javascript引擎工作原理初步了解

    摘要:引擎是能运行代码的程序或解释器。代码的运行明显的分成两个阶段,也就是编译阶段和运行字节码阶段。它首先由编译器编译成字节码文件,然后再通过虚拟机从文件中读一行解释执行一行。 Javascript引擎是能运行javascript代码的程序或解释器。做为前端开发人员,了解javascript底层的工作原理,可以用助于写出高效的javascript代码。那我们就来看一下,我们写的代码是如何在j...

    DevTTL 评论0 收藏0
  • Javascript系列之javascript机制

    摘要:异步任务必须指定回调函数,当异步任务从任务队列回到执行栈,回调函数就会执行。事件循环主线程从任务队列中读取事件,这个过程是循环不断的,所以整个的这种运行机制又称为。事件循环事件循环是指主线程重复从消息队列中取消息执行的过程。 参考链接:这一次,彻底弄懂 JavaScript 执行机制https://zhuanlan.zhihu.com/p/...从浏览器多进程到JS单线程,JS运行机制...

    13651657101 评论0 收藏0
  • JavaScript性能优化之加载与执行

    摘要:在浏览区中的性能,可以认为是开发者所面临的最严重的可用性问题。优化这个问题的第一步从它的加载和执行开始。这意味着在对象的事件触发后再下载脚本。属性指明本元素所含的脚本不会修改,因此代码能够安全地执行,但是浏览器的支持情况不理想。 JavaScript在浏览区中的性能,可以认为是开发者所面临的最严重的可用性问题。 优化这个问题的第一步从它的加载和执行开始。 霸道的script标签scr...

    call_me_R 评论0 收藏0
  • 浅析JavaScript异步

    摘要:回调函数,一般在同步情境下是最后执行的,而在异步情境下有可能不执行,因为事件没有被触发或者条件不满足。同步方式请求异步同步请求当请求开始发送时,浏览器事件线程通知主线程,让线程发送数据请求,主线程收到 一直以来都知道JavaScript是一门单线程语言,在笔试过程中不断的遇到一些输出结果的问题,考量的是对异步编程掌握情况。一般被问到异步的时候脑子里第一反应就是Ajax,setTimse...

    Tangpj 评论0 收藏0
  • 前端性能优化之--页面渲染优化全面解析

    摘要:下面我们撇开网络方面的优化,只分析静态资源方面的优化。不过,也会阻止的构建和延缓网页渲染。未优化正常加载优化后异步加载根据上面的分析,我们可以清楚的认识到,非必要优先加载的,选择异步加载是最优选择。 为什么做优化 经典问题:白屏时间过长,用户体验差产生的原因:网络问题、关键渲染路径(CRP)问题 怎么做优化 如何做好优化呢,网上随便一搜,就有很多优化总结,无非就是网络优化、静态资源(h...

    MadPecker 评论0 收藏0
  • 前端性能优化之--页面渲染优化全面解析

    摘要:下面我们撇开网络方面的优化,只分析静态资源方面的优化。不过,也会阻止的构建和延缓网页渲染。未优化正常加载优化后异步加载根据上面的分析,我们可以清楚的认识到,非必要优先加载的,选择异步加载是最优选择。 为什么做优化 经典问题:白屏时间过长,用户体验差产生的原因:网络问题、关键渲染路径(CRP)问题 怎么做优化 如何做好优化呢,网上随便一搜,就有很多优化总结,无非就是网络优化、静态资源(h...

    gghyoo 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<