JavaScript学习笔记(三):JavaScript也有入口Main函数


Posted in Javascript onSeptember 12, 2015

在C和Java中,都有一个程序的入口函数或方法,即main函数或main方法。而在JavaScript中,程序是从JS源文件的头部开始运行的。但是某种意义上,我们仍然可以虚构出一个main函数来作为程序的起点,这样一来不仅可以跟其他语言统一了,而且说不定你会对JS有更深的理解。

1. 实际的入口

当把一个JavaScript文件交给JS引擎执行时,JS引擎就是从上到下逐条执行每条语句的,直到执行完所有代码。

2. 作用域链、全局作用域和全局对象

我们知道,JS中的每个函数在执行时都会产生一个新的作用域。具体来说,在执行流程进入函数时会建立一个新的作用域,在函数执行完成退出时会销毁这个作用域。函数的形参、局部变量都会绑定到这个作用域里,当函数调用完成作用域销毁时,它们随之被销毁。当然在特殊情况下,如果函数返回时作用域中的某些变量仍然被引用,那么作用域以及这些被引用的变量就不会被销毁,从而形成所谓的闭包。

另一方面,我们知道函数是可以嵌套的,因而作用域也是可以嵌套的。函数在定义的时候,JS引擎会给每个函数设置一个称为[[scope]]内置属性,它指向外部函数的词法作用域。通过这种方式,多个作用域形成了链式结构,称为作用域链。通常情况下,在任意时刻只存在一条作用域链,即从正在执行的函数的作用域开始,层层上溯,直到最外层的全局作用域。

[注]:作用域链上的函数就是JS源码里的层层嵌套的函数,跟函数执行时的顺序或函数调用栈无关,这也是词法作用域这个称呼的由来。

全局作用域是一个特殊的作用域,它不是一个函数作用域,但它是所有函数作用域的外层作用域,也是所有作用域链的终点。因此只要程序没有退出,全局作用域总是存在的,全局作用域内的变量也是一直有效的。

[函数3的作用域]-->[函数2的作用域]-->[函数3的作用域]-->[全局作用域]

另外,对应于全局作用域,还有一个全局对象。在浏览器中,全局对象就是window对象。全局对象是个特殊的对象:

在全局作用域中定义的变量,都会绑定到全局对象。

在任意作用域中定义的变量,如果定义时没有用 var 关键字,都会绑定到全局对象。

在全局作用域中, this 指向全局对象。

从上面列举的这些特性可以看出,如果把全局作用域当成一个对象的话,那么实际上它就是全局对象。另外,这也解释了在全局作用域中,下面的四条语句为什么是等价的:

var a = 1;
a = 1;
window.a = 1;
this.a = 1;

3. 虚构的main函数

既然都是作用域,为什么要有一个特殊的全局作用域呢?我们总是喜欢简单化、一致性,而尽量避免复杂化、特殊性。所以很自然地,我们会想能否让全局作用域看起来跟函数作用域没什么区别?答案是肯定的。我们可以做这样的构想:

 我们想象,在JS引擎执行源文件时,会将文件中的代码包装到一个叫做main的函数中。然后把这个main函数作为程序的入口。
也就是说,假设一个JS文件中有这样的代码:

var a = 1;
var b = 2;

function add(x, y) {
  var z = x + y;
  return z;
}
console.log(add(a, b));

JS引擎在程序开始执行前会把它包装成一个main函数:

// 虚构的main函数
function main() {
  var a = 1;
  var b = 2;

  function add(x, y) {
    var z = x + y;
    return z;
  }

  console.log(add(a, b));
}

然后,调用这个main函数:

main._current_scope_ = window; // 将全局作用域(对象)设为window
main.call(window) // 将this指向window

4. 意义何在?

(1) JS也有了入口函数main,跟其他语言一致了。

(2) 省去了全局作用域的概念,或者说全局作用域也成了函数作用域。

(3) 通过上面对main函数的调用过程,可以明白全局作用域中的那些特殊性质的由来。

(4) 最后一点,将所有JS源码当成一个函数,是为了后面讲事件队列、事件循环做铺垫。

以上就是小编给大家介绍的JavaScript学习笔记(三):JavaScript也有入口Main函数,希望大家喜欢。

Javascript 相关文章推荐
JavaScript之appendChild、insertBefore和insertAfter使用说明
Dec 30 Javascript
js 取时间差去掉周六周日实现代码
Dec 25 Javascript
js模仿windows桌面图标排列算法具体实现(附图)
Jun 16 Javascript
JQuery插件Marquee.js实现无缝滚动效果
Apr 26 Javascript
前端面试题及答案整理(二)
Aug 26 Javascript
利用vue写todolist单页应用
Dec 15 Javascript
TypeScript学习之强制类型的转换
Dec 27 Javascript
js实现模糊匹配功能
Feb 15 Javascript
JS实现的随机排序功能算法示例
Jun 09 Javascript
Javascript和jquery在selenium的使用过程
Oct 31 jQuery
手写Vue2.0 数据劫持的示例
Mar 04 Vue.js
uniapp引入支付宝原生扫码插件步骤详解
Jul 23 Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
Sep 11 #Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
Sep 11 #Javascript
jQuery+css实现的蓝色水平二级导航菜单效果代码
Sep 11 #Javascript
js实现的后台左侧管理菜单代码
Sep 11 #Javascript
微信企业号开发之微信考勤Cookies的使用
Sep 11 #Javascript
微信企业号开发之微信考勤百度地图定位
Sep 11 #Javascript
JavaScript处理解析JSON数据过程详解
Sep 11 #Javascript
You might like
php一个文件搞定微信jssdk配置
2016/12/12 PHP
Laravel 5.4前后台分离,通过不同的二级域名访问方法
2019/10/13 PHP
一种JavaScript的设计模式
2006/11/22 Javascript
js ondocumentready onmouseover onclick onmouseout 样式
2010/07/22 Javascript
js 获取class的元素的方法 以及创建方法getElementsByClassName
2013/03/11 Javascript
JS模拟自动点击的简单实例
2013/08/08 Javascript
AJAX跨域请求json数据的实现方法
2013/11/11 Javascript
JavaScript中判断整数的多种方法总结
2014/11/08 Javascript
JS实现在网页中弹出一个输入框的方法
2015/03/03 Javascript
JS基于Mootools实现的个性菜单效果代码
2015/10/21 Javascript
JS实现页面载入时随机显示图片效果
2016/09/07 Javascript
微信小程序 开发指南详解
2016/09/27 Javascript
jquery.multiselect多选下拉框实现代码
2016/11/11 Javascript
工作中常用的js、jquery自定义扩展函数代码片段汇总
2016/12/22 Javascript
Javascript es7中比较实用的两个方法示例
2017/07/21 Javascript
详解vue-cli项目中用json-sever搭建mock服务器
2017/11/02 Javascript
详解vue通过NGINX部署在子目录或者二级目录实践
2018/09/03 Javascript
CryptoJS中AES实现前后端通用加解密技术
2018/12/18 Javascript
layui前端时间戳转化实例
2019/11/15 Javascript
微信小程序连接服务器展示MQTT数据信息的实现
2020/07/14 Javascript
JS typeof fn === 'function' && fn()详解
2020/08/22 Javascript
Python文件和目录操作详解
2015/02/08 Python
深入理解Python中命名空间的查找规则LEGB
2015/08/06 Python
Python paramiko模块的使用示例
2018/04/11 Python
深入flask之异步非堵塞实现代码示例
2018/07/31 Python
Python字符串和正则表达式中的反斜杠('\')问题详解
2019/09/03 Python
Django框架 Pagination分页实现代码实例
2019/09/04 Python
python删除指定列或多列单个或多个内容实例
2020/06/28 Python
pandas apply多线程实现代码
2020/08/17 Python
CSS3 3D立方体效果示例-transform也不过如此
2016/12/05 HTML / CSS
美国礼品卡交易网站:Cardpool
2018/08/27 全球购物
怎样声明子类
2013/07/02 面试题
C语言编程题
2015/03/09 面试题
优秀食品类广告词
2014/03/19 职场文书
工商局局长个人对照检查材料思想汇报
2014/09/23 职场文书
万里长城导游词
2015/01/30 职场文书