浅谈javascript函数执行过程

时间:2021-04-04 23:11:26

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]] 属性中

浅谈javascript函数执行过程

(2)new Person() 创建对象,调用之后,存在全局变量对象,Person对象

  用new调用构造函数会经过以下4个步骤:

    1. 创建一个新对象

    2. 将构造函数的作用域赋给新对象(因此this就指向这个新对象——person,这也是变量name为什么不是对象属性的原因)

    3. 执行构造函数中的代码(为新对象添加属性)

    4. 返回新对象

  重点说第3个过程,执行过程如图:

浅谈javascript函数执行过程

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

  调用完毕后,返回Person对象

浅谈javascript函数执行过程

Person执行环境在函数执行完毕后销毁,Person活动对象没有被销毁

  为什么Person活动对象没有被销毁???

    这种情况属于闭包:Person活动对象仍然被getName、setName的 [[scopes]] 引用,即仍在作用链域中,所以没有被销毁

  注意:

    Person() 构造函数中定义了getName()、setName() 两个函数,还有函数的参数name

    new Person() 创建的 Person对象 的属性只有getName()、setName(),没有name属性,name不是用this声明的,不是Person对象的属性

    

(3)调用setName(),存在全局变量对象,Person对象

浅谈javascript函数执行过程

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

函数执行完毕后:

浅谈javascript函数执行过程

setName执行环境和setName活动对象都被销毁,因为setName活动对象没有被引用

- 其他:

通过这个例子,也很好理解为什么person.name是undefined,因为person对象没有name这个属性,getName、setName能访问name属性是因为它们通过作用链域访问到了Person活动对象中的name属性

PS:用构造函数创建的对象是独立的

浅谈javascript函数执行过程

浅谈javascript函数执行过程的更多相关文章

  1. 浅谈 JavaScript new 执行过程及function原理

    前言 最近在学习JavaScript语言精粹,感觉写得相当不错.所以这里也算是总结一下.一个方法使用new的方式创建到底是怎样的过程,一个function的声明内部又是怎样执行的呢 另外学的过程中,不 ...

  2. 浅谈javascript函数节流

    浅谈javascript函数节流 什么是函数节流? 函数节流简单的来说就是不想让该函数在很短的时间内连续被调用,比如我们最常见的是窗口缩放的时候,经常会执行一些其他的操作函数,比如发一个ajax请求等 ...

  3. [转载]浅谈JavaScript函数重载

     原文地址:浅谈JavaScript函数重载 作者:ChessZhang 上个星期四下午,接到了网易的视频面试(前端实习生第二轮技术面试).面了一个多小时,自我感觉面试得很糟糕的,因为问到的很多问题都 ...

  4. [转]浅谈javascript函数劫持

    转自:Ph4nt0m Security Team 这么多年了,现在学习依然还是有很多收货,向前辈致敬.转载一方面是自己存档一份,另一方面是让更多喜欢安全的人一同学习. ================ ...

  5. 浅谈javascript引擎执行代码的步骤-(2019-2)

    平时面试经常会遇到类似下面的这种题,而且千变万化,让人一个头两个.示例这道题算是稍微有点难度的了,这种题考查的是JavaScript引擎执行代码的步骤. b = 'cba'; function a(a ...

  6. 浅谈JavaScript 函数作用域当中的“提升”现象

    在JavaScript当中,定义变量通过var操作符+变量名.但是不加 var 操作符,直接赋值也是可以的. 例如 : message = "hello JavaScript ! &quot ...

  7. 浅谈javascript函数,变量声明及作用域

    javascript函数跟变量的声明.作用域这些概念网上都已经讲烂了. 这里写个博客,也相当于做个笔记. 变量声明 首先看个例子: var globalVar = "gv"; fu ...

  8. 浅谈JavaScript函数

    JavaScript作为一种基于对象(非严格面向对象)的语言,函数在JS中的地位非同一般:用函数声明类和对象.甚至函数本身也是对象. 一.函数的三种声明方式辨析. 1.function命令 funct ...

  9. 浅谈JavaScript函数重载

    上个星期四下午,接到了网易的视频面试(前端实习生第二轮技术面试).面了一个多小时,自我感觉面试得很糟糕的,因为问到的很多问题都很难,根本回答不上来.不过那天晚上,还是很惊喜的接到了HR面电话.现在HR ...

随机推荐

  1. iOS富文本的使用

    NSString *name = nil; if (_payNumber == 1) { name = [NSString stringWithFormat:@"向%@收款",na ...

  2. Silverlight中本地化的实现(语言切换)

    对于本地化这个功能我个人一直觉得在需求阶段就要确定该项目需不需要实行本地化,这样后面就可以减轻许多工作量,Sl中对本地化功能的支持与ASP.NET 中一样,主要使用CultureInfo类来完成的. ...

  3. CAD字体显示错乱问题解决方案

    最近这两天一直在画竣工图,用CAD用得挺多的,所以老是发现一些问题.今天在打开别人发过来的图纸时,我看到竟然还有钢筋符号无法显示…… 像这种问题的解决,据我所知就两种方法: 一.替换使用的字体 首先选 ...

  4. 一些CMS网站系统漏洞,练手用(持续更新)

    仅供拿shell,提权测试用,请勿恶意破坏 XuSoft系统: 后台万能密码:'or'='or'  可直接登陆,后台地址 /manage/login.asp inurl:ReadArticlemb.a ...

  5. API例子:用Python驱动Firefox采集网页数据

    1,引言 本文讲解怎样用Python驱动Firefox浏览器写一个简易的网页数据采集器.开源Python即时网络爬虫项目将与Scrapy(基于twisted的异步网络框架)集成,所以本例将使用Scra ...

  6. 一个基于JRTPLIB的轻量级RTSP客户端(myRTSPClient)——实现篇:(二)用户接口层之RtspClient类及其构造函数

    RtspClient类是myRTSPClient函数库所有特性集中实现的地方. 主要为用户提供: 1. RTSP协议通信接口函数,如DoOPTIONS(): 2. RTSP账号.密码设置函数,如Set ...

  7. python猜数字(多种实现方法)

    设定一个理想数字比如:66,让用户输入数字,如果比66⼤,则显示猜测的结果⼤了:如果比66⼩,则显示猜测的结果小了;只有等于66,显示猜测结果 第一种方式(最简单的方式实现) n = 66 # 理想数 ...

  8. intellj idea show "run dashboard" panel

    workspace.xml edit this point <component name="RunDashboard"> <option name=" ...

  9. python selenium-8 Page Object模式

    封装空间操作为一个接口使用,而不是直接在页面中查找 from selenium import webdriver from selenium.webdriver.common.by import By ...

  10. OC -网络请求 - NSURLConnection - POST

    #import "ViewController.h" @interface ViewController () @end @implementation ViewControlle ...