文档章节

浅析javascript中的函数及执行环境

x
 xszl
发布于 2017/09/08 21:34
字数 1427
阅读 8
收藏 0

###函数简介 函数是javascript中一个主要的组成部分,像闭包、this、全局变量和局部变量都和函数息息相关,想要真正了解javascript是如何工作的,首先就得了解函数。

函数能访问内部声明的局部变量,也可以访问那些通过函数参数传递进来的变量,还能访问当前作用域外声明的全局变量,所有的这些都是基于函数的执行环境,一个提供变量可以被函数访问的环境。

要了解清楚函数被调用时所发生的一切细节会相对有些困难,下面所述部分只是技术说明的一个简化,想要了解详情的可以参考ECMA文档。

###执行环境的创建 当函数被调用时,会创建该函数的执行环境,下面来看看这个执行环境是如何构建的,你需要注意每一步的顺序

  1. 创建arguments属性,这是一个具有整数键的数组式对象(并非是数组),对象引用传入函数调用的值,同时该对象还包括length(函数传递进来的参数的数量)和callee(指向该函数的引用)属性
  2. 通过[[scope]]属性和执行环境创建函数的作用域。后面会详细说明
  3. 变量实例化,分为三步
    • 执行环境将argument对象中的值赋给函数签名,如果argument中没有,则赋值成undefined
    • 扫描函数体,检测是否有函数声明,如果有,将函数名作为环境变量的一个属性
    • 扫描函数体,检测是否有变量声明,如果有,将变量名作为函数变量的一个属性,属性值为undefined
  4. 创建this属性,这个需要依据函数如何被调用
    • 作为正常函数被调用,this指向全局对象
    • 作为对象的方法被调用,this指向该对象
    • 作为构造函数被调用,this指向那个构造函数生成的新对象
    • 使用call或者apply调用,this指向call或者apply的第一个参数
    • 使用setTimeout或者setInterval调用,this指向全局对象

####示例:

    function foo(a, b ,c) {
        function z() {
            alert('z!');
        }
        var d = 3;
    }
    foo('foo', 'bar');

调用foo('foo', 'bar'):

  • step1:创建arguments属性
ExecutionContext: {
    arguments: {
        0: 'foo',
        1: 'bar',
        length: 2,
        callee: function() //Points to foo function
    }
}
  • step3a: 变量实例化,arguments
ExecutionContext: {
    arguments: {
        0: 'foo',
        1: 'bar',
        length: 2,
        callee: function() //Points to foo function
    },
    a: 'foo',
    b: 'bar',
    c: undefined
}
  • step3b:变量实例化,function
ExecutionContext: {
    arguments: {
        0: 'foo',
        1: 'bar',
        length: 2,
        callee: function() //Points to foo function
    },
    a: 'foo',
    b: 'bar',
    c: undefined,
    z: function() //Created z() function
}

-step3c:变量实例化,variables

ExecutionContext: {
    arguments: {
        0: 'foo',
        1: 'bar',
        length: 2,
        callee: function() //Points to foo function
    },
    a: 'foo',
    b: 'bar',
    c: undefined,
    z: function(), //Created z() function
    d: undefined
}

-step4:this赋值

ExecutionContext: {
    arguments: {
        0: 'foo',
        1: 'bar',
        length: 2,
        callee: function() //Points to foo function
    },
    a: 'foo',
    b: 'bar',
    c: undefined,
    z: function(), //Created z() function
    d: undefined,
    this: window
}

###环境栈 函数的作用域创建完之后,函数开始执行代码,从第一行直到函数结束(最后一行或者return),这期间访问变量都是从上面ExecutionContext这个对象中读取。

每个函数都会有一个与之相关联的ExecutionContext,所有的声明都是在ExecutionContext中执行(在全局执行环境中有一个GlobalExecutionContext,和ExecutionContext类似,只是全局执行环境中没有arguments,所以没有第一步)

随着程序的执行,从一个函数进入另一个函数,那么就会创建一个环境栈。我们来看下述代码

    function a() {
        function b() {
            var c = {
                d: function() {
                    alert(1);
                }
            };
            c.d();
        }
        b.call();
    }
    a();

当javascript引擎将要执行aler()函数时,执行环境栈是:

  • d() Execution context
  • b() Execution context
  • a() Execution context
  • Global execution context

进入一个函数,就会将它的执行环境压入环境栈中,这个环境栈也被称作作用域链,需要注意的是作用域链和函数调用栈大是不同的。

在函数中查找一个变量,javascript引擎会先从作用域链的最前端开始搜索,如果没有找到,会向下一级的作用域链查找,直到作用域链的最底端,如果还没找到,就返回undefined 。

###总结

  • this的值是在函数被调用的时候动态绑定,因此具备多重含义
  • arguments不是数组,而是一个带有数字作为属性的常规对象
  • 变量的定义实际是在步骤3c中定义,当代码执行到达初始化指令时,会发生初始化
  • 可以在函数声明之前调用函数
  • 不会执行的函数声明依旧会被创建(js作用域提升)
    function foo() {
        if (false) {
            function bar() {
                alert(1);
            }
        }
        bar();
    }

在执行代码进行if判断之前,bar() 已经在作用域中被创建,所以能正常运行

  • 变量覆盖,基于作用域链
  • 闭包:子函数会携带父函数的作用域,当我们访问一个变量时,如果当前执行环境中没有找到,但在下一级的作用域链中能找到
  • 全局变量在作用域链的最底端,访问全局变量需要遍历整个作用域链,效率很低。

javascript函数的核心其实就是执行环境和作用域链,合理利用这些进行设计,会让程序变得更简单自然,基于mixin的继承系统也很容易实现。很多javascript库,比如jquery,依靠执行环境加载模块,从而不会污染全局变量,尽可能深入的去了解执行环境和作用域链能发挥javascript的强大能力

© 著作权归作者所有

共有 人打赏支持
下一篇: JS闭包
x
粉丝 0
博文 14
码字总数 17267
作品 0
私信 提问
浅析setTimeout与Promise

关于JavaScript异步编程,前文解析过了JavaScript并发模型,该并发模型基于事件循环。正巧又在Stackoverflow上回答了一个关于setTimeout与Promise执行顺序相关的问题,于是总结这一知识点,与...

熊建刚
08/13
0
0
Javascript中闭包(closure)的理解与浅析

最近在网上查阅了不少Javascript闭包(closure)相关的资料,写的大多是非常的学术和专业。对于初学者来说别说理解闭包了,就连文字叙述都很难看懂。撰写此文的目的就是用最通俗的文字揭开Jav...

长平狐
2013/01/06
114
0
javascript深入理解js闭包

一、变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域。 变量的作用域无非就是两种:全局变量和局部变量。 Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量...

Yamazaki
2012/06/15
0
0
[JavaScript]-JavaScript的this原理.

一、问题的由来 学懂 JavaScript 语言,一个标志就是理解下面两种写法,可能有不一样的结果。 上面代码中,虽然obj.foo和foo指向同一个函数,但是执行结果可能不一样。请看下面的例子。 这种...

xiaoLoo
06/27
0
0
【译】理解JavaScript闭包——新手指南

闭包是JavaScript中一个基本的概念,每个JavaScript开发者都应该知道和理解的。然而,很多新手JavaScript开发者对这个概念还是很困惑的。 正确理解闭包可以帮助你写出更好、更高效、简洁的代...

LINJIAJUN
11/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Qt那些事0.0.15

以下与Q_DECLARE_METATYPE相关内容全部是翻译自Qt文档。参看QVariant Class | Qt Core 5.9以及QMetaType Class | Qt Core 5.9 QVariant QVariant::fromValue(const T& value) 返回一份包含v......

Ev4n
1分钟前
0
0
spring上传文件返回绝对路径,简单工具类

import com.google.common.io.Files;import lombok.extern.slf4j.Slf4j;import org.springframework.web.multipart.MultipartFile;import java.io.File;import java.io.IOExceptio......

Boss-x
13分钟前
1
0
1个开发如何撑起一个过亿用户的小程序

本文由云+社区发表 2018年12月,腾讯相册累计用户量突破1亿,月活1200万,阿拉丁指数排行 Top 30,已经成为小程序生态的重量级玩家。 三个多月来,腾讯相册围绕【在微信分享相册照片】这一核...

腾讯云加社区
19分钟前
3
0
golang ssh包使用方法介绍

在使用gexpect包发现很多问题之外,这里又尝试使用ssh user@127.0.0.1的思路进行用户切换。这里记录下具体的使用方法,遇到的ssh: must specify HostKeyCallback 问题的解法方法及最终使用过...

linuxprobe16
24分钟前
0
0
layer

Layui Layer在open弹出层中异步加载数据和form表单radio、checkbox、select不渲染,不可点击的解决办法 layer 实现弹窗提交信息 function confirmUpdateAward(i) { layer.open({ ...

mickelfeng
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部