浅谈javascript函数执行过程
javascript函数执行过程:
1. 为函数创建一个执行环境
2. 复制函数的 [[scopes]] 属性中的对象构建起执行环境的作用链域
3. 创建函数活动对象并推入执行环境作用链域的前端
4. 执行代码
5. 销毁执行环境和活动对象(闭包情况下活动对象仍被引用没被销毁)
用例子来说明:
function Person(name) {
this.getName = function() {
return name;
};
this.setName = function(value) {
name = value;
};
}
var person = new Person("Candy");
alert(person.getName()); //"Candy"
person.setName("Greg");
alert(person.getName()); //"Greg"
以调用Person()构造函数、setName() 函数为例,函数执行过程中,各对象的关系如下:
(1)未调用前,只存在全局变量对象
全局变量中定义了Person() 构造函数,Person作为全局变量对象的一个属性,[[scopes]] 保存着Person() 构造函数的作用链域,因为Person() 构造函数是定义在全局变量对象里面的
Person为什么会有 [[scopes]] 属性???
在创建函数时,会创建一个预先包含全局变量对象的作用链域,这个作用链域被保存在内部的 [[scopes]] 属性中

(2)new Person() 创建对象,调用之后,存在全局变量对象,Person对象
用new调用构造函数会经过以下4个步骤:
1. 创建一个新对象
2. 将构造函数的作用域赋给新对象(因此this就指向这个新对象——person,这也是变量name为什么不是对象属性的原因)
3. 执行构造函数中的代码(为新对象添加属性)
4. 返回新对象
重点说第3个过程,执行过程如图:

在调用(执行)函数时,会为函数创建一个执行环境,然后通过复制函数的 [[scopes]] 属性中的对象构建起执行环境的作用链域。此后,又有一个活动对象(Person的活动对象)被创建并推入执行环境作用链域的前端,所以图中的作用链域有2层。
调用完毕后,返回Person对象

Person执行环境在函数执行完毕后销毁,Person活动对象没有被销毁
为什么Person活动对象没有被销毁???
这种情况属于闭包:Person活动对象仍然被getName、setName的 [[scopes]] 引用,即仍在作用链域中,所以没有被销毁
注意:
Person() 构造函数中定义了getName()、setName() 两个函数,还有函数的参数name
new Person() 创建的 Person对象 的属性只有getName()、setName(),没有name属性,name不是用this声明的,不是Person对象的属性
(3)调用setName(),存在全局变量对象,Person对象

创建setName() 的执行环境,然后通过复制函数的 [[scopes]] 属性中的对象构建起执行环境的作用链域。此后,又有一个活动对象(setName的活动对象)被创建并推入执行环境作用链域的前端,所以图中的作用链域有3层。
函数执行完毕后:

setName执行环境和setName活动对象都被销毁,因为setName活动对象没有被引用
- 其他:
通过这个例子,也很好理解为什么person.name是undefined,因为person对象没有name这个属性,getName、setName能访问name属性是因为它们通过作用链域访问到了Person活动对象中的name属性
PS:用构造函数创建的对象是独立的

浅谈javascript函数执行过程的更多相关文章
- 浅谈 JavaScript new 执行过程及function原理
前言 最近在学习JavaScript语言精粹,感觉写得相当不错.所以这里也算是总结一下.一个方法使用new的方式创建到底是怎样的过程,一个function的声明内部又是怎样执行的呢 另外学的过程中,不 ...
- 浅谈javascript函数节流
浅谈javascript函数节流 什么是函数节流? 函数节流简单的来说就是不想让该函数在很短的时间内连续被调用,比如我们最常见的是窗口缩放的时候,经常会执行一些其他的操作函数,比如发一个ajax请求等 ...
- [转载]浅谈JavaScript函数重载
原文地址:浅谈JavaScript函数重载 作者:ChessZhang 上个星期四下午,接到了网易的视频面试(前端实习生第二轮技术面试).面了一个多小时,自我感觉面试得很糟糕的,因为问到的很多问题都 ...
- [转]浅谈javascript函数劫持
转自:Ph4nt0m Security Team 这么多年了,现在学习依然还是有很多收货,向前辈致敬.转载一方面是自己存档一份,另一方面是让更多喜欢安全的人一同学习. ================ ...
- 浅谈javascript引擎执行代码的步骤-(2019-2)
平时面试经常会遇到类似下面的这种题,而且千变万化,让人一个头两个.示例这道题算是稍微有点难度的了,这种题考查的是JavaScript引擎执行代码的步骤. b = 'cba'; function a(a ...
- 浅谈JavaScript 函数作用域当中的“提升”现象
在JavaScript当中,定义变量通过var操作符+变量名.但是不加 var 操作符,直接赋值也是可以的. 例如 : message = "hello JavaScript ! " ...
- 浅谈javascript函数,变量声明及作用域
javascript函数跟变量的声明.作用域这些概念网上都已经讲烂了. 这里写个博客,也相当于做个笔记. 变量声明 首先看个例子: var globalVar = "gv"; fu ...
- 浅谈JavaScript函数
JavaScript作为一种基于对象(非严格面向对象)的语言,函数在JS中的地位非同一般:用函数声明类和对象.甚至函数本身也是对象. 一.函数的三种声明方式辨析. 1.function命令 funct ...
- 浅谈JavaScript函数重载
上个星期四下午,接到了网易的视频面试(前端实习生第二轮技术面试).面了一个多小时,自我感觉面试得很糟糕的,因为问到的很多问题都很难,根本回答不上来.不过那天晚上,还是很惊喜的接到了HR面电话.现在HR ...
随机推荐
- java 的HashMap底层数据结构
HashMap也是我们使用非常多的Collection,它是基于哈希表的 Map 接口的实现,以key-value的形式存在.在HashMap中,key-value总是会当做一个整体来处理,系统会根据 ...
- PAT Basic 1017 A除以B (20) [数学问题-⼤整数运算]
题目 本题要求计算A/B,其中A是不超过1000位的正整数,B是1位正整数.你需要输出商数Q和余数R,使得A = B * Q + R成⽴. 输⼊格式: 输⼊在1⾏中依次给出A和B,中间以1空格分隔. ...
- UML-领域模型-准则
1.是否使用工具维护模型? 在白板上画完草图后,整理到UML工具里去 2.模型中是否要包含“票据”? 不包含,因为,票据用于退货,而本次迭代不涉及退货所以不需要体现. 总结:概念一定在本次迭代需求内的 ...
- jquery.timepicker.js - 最常用的日期JS控件
客户提了个需求,输入日期,想也不用想,立刻翻查Jquery,发现是有timepicker.js这个控件,马上就用. 1. 导入库 <script src="https://cdnjs. ...
- Microsoft COCO 数据集
本篇博客主要以介绍MS COCO数据集为目标,分为3个部分:COCO介绍,数据集分类和COCO展示. 本人主要下载了其2014年版本的数据,一共有20G左右的图片和500M左右的标签文件.标签文件标记 ...
- linux 线程间发送信号
线程间通过 pthread_kill(thid,signo)给指定的thid线程发送signo信号. 创建线程与线程屏蔽字顺序 1. pthread_create(); pthread_sigm ...
- set_include_path详细解释(转)
首先我们来看这个全局变量:__FILE__它表示文件的完整路径(当然包括文件名在内)也就是说它根据你文件所在的目录不同,有着不同的值:当然,当它用在包行文件中的时候,它的值是包含的路径: 然后:我们看 ...
- 启动查看crontab日志服务
方法1: . 修改rsyslog文件,将/etc/rsyslog.d/-default.conf 文件中的#cron.*前的#删掉: . 重启rsyslog服务service rsyslog rest ...
- idea整合mybatis逆向工程
--pom.xml添加插件 <build> <finalName>hnapi</finalName> <plugins> <plugin> ...
- 40)PHP,mysql_fetch_row和mysql_fetch_array和mysql_fetch_assoc的区别
分析: mysql_fetch_row,这个函数是从结果集中取一行作为枚举数据,从和指定的结果标识关联的结果集中取得一行数据并作为数组返回.每个结果的列储存在一个数组的单元中,偏移量从 开始. 注意, ...