此篇文章不是干货类型,也算不上概念阐述,就是简单的进行一个思路上的整理。

  要了解一样东西或者完成一件事情,首要的就是先要搞清楚他是什么。作为一个前端开发人员,JavaScript应该算作是最核心之一的内容。要想从掌握到熟悉再到精通这门语言,第一步要做的就是先弄明白JavaScript是个什么。

  1.JavaScript是什么。

  JavaScript是门语言,和C#、C++、Java这些编程语言一样,只不过不同语言间有各自的语言规范差异。当然,这是句废话。

  前端学习一般从写一个静态页面开始,这个以html或者htm后缀结束的文件有自己的标签结构,再加上层叠样式表也就是css就可以写出一个具有信息载体功能的页面。如果我们要想查看这个页面,就需要有工具,而这个工具就是各类浏览器。没错,浏览器是一个工具,他能够把我们写的html和css解析出来成为我们所希望的那个样子,至于具体怎么实现的,别问我,我还真说不清楚。但是我们需要从这个话题里抓住一个核心点,那就是我们所写的东西都是在浏览器这个工具也可以说成这个编程环境里才能展现出来,没错,浏览器就是一个宿主环境的角色。他提供了html、css和我们所要谈的JavaScript的运行环境。

  上面一段引出了我们写完代码怎么跑代码的问题,浏览器类似于Java里的JVM,也就是提供一个代码执行的环境,可以看成这个环境内部实现了我们对语言的包括编译在内的很多事情。

  还是没说到JavaScript到底是个什么东西。

  下面开始进入正题。首先JavaScript是门语言,语言都会有自己的语法词法变量作用域函数一类的概念,这些概念必须要遵循一个规范,在这个规范的前提下某些类似浏览器一类的编译器才能实现开发出针对这门语言特定的一门语言。所以JavaScript就是这样一门基于EMCAScript规范所实现出来的脚本语言。但问题是EMCAScript作为规范只是定义了这门语言该有的样子,而不会设计任何的具体实现细节。所以一众编译器的编写者们就根据这个规范进行自己的编译器开发,也就是我们现在所看到的各类浏览器。那么问题来了,浏览器不单单是JavaScript的执行环境,浏览器是为了用来进行网络传输并进行页面展示的,而实现JavaScript只是他的部分任务。而且为了更好地和html、css这些内容结合起来,还要对EMCAScript规范没有涉及到的一些内容进行拓展,最终形成了我们整个的前端开发环境。

  下面这张图就是简单的包含关系:

  由图中可以看出,JavaScript包含了三部分内容。第一个即EMCAScript规范的实现,另外两个是依据html和浏览器进行拓展出来的DOM和BOM,方便我们更好地和文档、浏览器进行交互。在这个基础上,我们才有能力通过JavaScript这门语言来实现在浏览器里进行前端工作的开发,说白了也就是各类网页的开发。

  2.EMCAScript

  ECMAScript 不是一种编程语言,仅仅是一种脚本语言规范,由欧洲计算机协会制定和发布,任何基于此规范实现的脚本语言都要遵守它的约定。  

  ECMAScript 规定了 JavaScript 脚本的核心语法,如 数据类型、关键字、保留字、运算符、对象和语句等,它不属于任何浏览器。Web 浏览器对于 ECMAScript 来说只是一个宿主环境,但它并不是唯一的宿主环境。事实上,还有不计其数的其他各种环境(例如Macromedia 同时用在 Flash 和 Director MX 中的 ActionScript,如现在很火的nodejs)可以容纳 ECMAScript 实现。 也就是说除了我们常说的JavaScript是基于他实现的,另外还有其他的语言也是根据他实现的,比如ActionScript等。当然ActionScript语言在实现这个规范的基础上也会做另外的扩展。这也就是说,在JavaScript 和 ActionScript 中声明变量,操作数组等语法完全一样,因为它们都是基于 ECMAScript 规范的。但是在操作浏览器等其他方面又有各自独特的方法,这些都是各个浏览器厂商进行的不同的扩展,这些扩展只有一些“事实上的标准”,没有规范的文档。

  ECMAScript 标准定义了 JavaScript 脚本中最为核心的内容,是 JavaScript 脚本的“骨架”,有了“骨架”,就可以在它上面进行扩展,如 DOM(文档对象模型)和 BOM(浏览器对象模型)。

  目前,ECMAScript 已经发布了五个版本,最新版本是 5,于2009年12月发布。所以现在我们可以看到很多地方很多人跃跃欲试在讨论ES6,没错,ES6就是ECMAScript 的第六个版本。

  3.DOM

  文档对象模型(DOM,Document Object Model)是针对XML 但经过扩展用于HTML 的应用程序编程接口。DOM把整个页面映射为一个多层节点结构。HTML或XML 页面中的每个组成部分都是某种类型的节点,这些节点又包含着不同类型的数据。

  举一个很简单的例子,我们所熟悉的getElementById函数是document对象下的一个方法。document对象就是DOM中定义的一个内容,浏览器实现了他,依据EMCAScript的特性,然后我们又可以通过他来获取到页面中的某一个节点,获取到的这个节点被实现为一个对象,他拥有许多属性和方法,这些属性和方法也是在DOM的定义下由浏览器实现的。但是DOM的这些实现依据的是EMCAScript规范所制定的语言的特性,所以这才会让我们误认为他们就是JavaScript,其实这个只是JavaScript的组成部分而已。

  类似于EMCAScript的版本迭代,DOM也有类似的规范更新,分为DOM1、DOM2、DOM3,每一级规范都有新的内容出现并对旧的规范进行修订。

  4.BOM

  浏览器对象模型是针对浏览器或者说是针对浏览器窗口的应用程序编程接口。这个概念实现就没有了标准规范了,都是根据各自浏览器厂商自定的规范实现的,但是也基本趋于一致。最多的像我们常用的navigator、window里的一些浏览器相关的对象、location等对象都是这个接口所提供的内容。

  

  总结。

  以上内容杂乱且枯燥,但是从大标题的角度可以理清JavaScript的脉络,还是呼应开始的那句话,想要学习JavaScript,首先要了解他是什么。本文设计很多知识点,细节性的东西没有展开来讲,如果有任何的问题可以去把JavaScript的红本书的第一章从头到尾读一遍,这篇文章要做的事情就是整理此书第一章的内容。

  完。

  祝愉快!

深入理解JavaScript系列:JavaScript的构成的更多相关文章

  1. JavaScript 系列--JavaScript一些奇淫技巧的实现方法(二)数字格式化 1234567890转1,234,567,890;argruments 对象(类数组)转换成数组

    一.前言 之前写了一篇文章:JavaScript 系列--JavaScript一些奇淫技巧的实现方法(一)简短的sleep函数,获取时间戳 https://www.mwcxs.top/page/746 ...

  2. JavaScript 系列--JavaScript一些奇淫技巧的实现方法(一)简短的sleep函数,获取时间戳

    一.前言 有些东西很好用,但是你未必知道:有些东西你可能用过,但是你未必知道原理.实现一个目的有多种途径,俗话说,条条大路通罗马.发散一下大家的思维以及拓展一下知识面. 二.实现一个简短的sleep函 ...

  3. JavaScript系列--JavaScript数组高阶函数reduce()方法详解及奇淫技巧

    一.前言 reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值. reduce() 可以作为一个高阶函数,用于函数的 compose. reduce()方 ...

  4. JavaScript 系列--JavaScript一些奇淫技巧的实现方法(三)数字取整,数组求和

    一.前言 简短的sleep函数,获取时间戳:https://www.mwcxs.top/page/746.html 数字格式化 1234567890 --> 1,234,567,890:argr ...

  5. 深入理解javascript系列(4):立即调用的函数表达式

    本文来自汤姆大叔 前言 大家学JavaScript的时候,经常遇到自执行匿名函数的代码,今天我们主要就来想想说一下自执行. 在详细了解这个之前,我们来谈了解一下“自执行”这个叫法,本文对这个功能的叫法 ...

  6. 深入理解javascript系列,读书笔记

    深入理解JavaScript系列(2):揭秘命名函数表达式 1.讲了函数声明和函数表达式的区别,包括一些在函数提升上的区别 2.如果给函数表达式的函数也取名,会在调试的时候受益 3.不要在block( ...

  7. 深入理解JavaScript系列

    转自http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html 深入理解JavaScript系列(1):编写高质量JavaScript代码 ...

  8. 深入理解JavaScript系列(1):编写高质量JavaScript代码的基本要点

    深入理解JavaScript系列(1):编写高质量JavaScript代码的基本要点 2011-12-28 23:00 by 汤姆大叔, 139489 阅读, 119 评论, 收藏, 编辑 才华横溢的 ...

  9. [JS]深入理解JavaScript系列(4):立即调用的函数表达式

    转自:汤姆大叔的博客 前言 大家学JavaScript的时候,经常遇到自执行匿名函数的代码,今天我们主要就来想想说一下自执行.在详细了解这个之前,我们来谈了解一下"自执行"这个叫法 ...

  10. 深入理解JavaScript系列(转自汤姆大叔)

    深入理解JavaScript系列文章,包括了原创,翻译,转载,整理等各类型文章,如果对你有用,请推荐支持一把,给大叔写作的动力. 深入理解JavaScript系列(1):编写高质量JavaScript ...

随机推荐

  1. 【原创】xgboost 特征评分的计算原理

    xgboost是基于GBDT原理进行改进的算法,效率高,并且可以进行并行化运算: 而且可以在训练的过程中给出各个特征的评分,从而表明每个特征对模型训练的重要性, 调用的源码就不准备详述,本文主要侧重的 ...

  2. 一些随机数据的生成(日期,邮箱,名字,URL,手机号,日期等等)

    直接上代码 import java.text.SimpleDateFormat; import java.util.Date; import java.util.HashMap; import jav ...

  3. vs启动调试很慢的解决办法

    1.关闭所有 Visual Studio 2010 实例. 2.单击“开始”,选择“运行...”. 3.键入“devenv.exe /resetuserdata”. 此命令会运行几分钟时间,与此同时, ...

  4. WebService的两种方式Soap和Rest比较

    我的读后感:由于第一次接触WebService,对于很多概念不太理解,尤其是看到各个OpenAPI的不同提供方式时,更加疑惑.如google map api采用了AJAX方式,通过javascript ...

  5. spark发行版笔记13

    本期概览: ReceiverTracker架构设计 消息循环系统 ReceiverTracker具体的实现 Spark Streaming作为Spark Core基础 架构之上的一个应用程序,其中的R ...

  6. 在QtCreator 2.1.0 下使用opencv231库加载图片并显示

    在.pro中库连接如上图,具体规则正在学习,注意debug下连接*d.lib.release下链接.lib.没有d的. 如果出现imread不可以加载图片,cvloadImage却可以,则是上面说的连 ...

  7. python常用的内置库

    标准库: import os os.getcwd()  //返回当前工作路径 os.chdir('/server/accesslogs')   # Change current working dir ...

  8. android studio 换护眼的颜色步骤

    设置--->Editor-->General-->Default Text-->Background护眼色是#D2E3C7

  9. Themida和Winlicense加壳软件脱壳教程

    (一)Themida和不用license的Winlicense加壳软件就不说了,直接上脚本脱壳. (二)先看看不同版本OEP的一些小特征: Temida2.1.X.X版本之后的OEP特征(2.0.8. ...

  10. HTML5与CSS3经典代码

    1)全屏背景 body { background: url(../img/pic.jpg) no-repeat center center fixed; background-size: cover; ...