理解Javascript_03_javascript全局观

先来看一张图吧：

解释一下：

核心（ECMAScript)：定义了脚本语言的所有对象，属性和方法

文档对象模型（DOM)：HTML和XML应用程序接口

浏览器对象模型(BOM)：对浏览器窗口进行访问操作

现在来具体的讲一个各个成分：

关于ECMAScript

ECMAScript的工作是定义语法和对象，从最基本的数据类型、条件语句、关键字、保留字到异常处理和对象定义都是它的范畴。

在ECMAScript范畴内定义的对象也叫做原生对象。

其实上它就是一套定义了语法规则的接口，然后由不同的浏览器对其进行实现,最后我们输写遵守语法规则的程序，完成应用开发需求。

关于DOM

根据DOM的定义(HTML和XML应用程序接口)可知DOM由两个部分组成，针对于XML的DOM即DOM Core和针对HTML的DOM HTML。

那DOM Core 和DOM HTML有什么区别与联系呢?

DOM Core的核心概念就是节点(Node)。DOM会将文档中不同类型的元素(这里不元素并不特指<div>这种tag,还包括属性，注释，文本之类）都看作为不同的节点。

节点结构图

上图描述了DOM CORE的结构图，比较专业,来看一个简单的：


代码如下:

<div id="container">
<span>hello world</span>
</div>

来看一下这段代码在标准浏览器里的DOM表现:

div和span元素被展现成了一个元素节点，对应到节点结构图中的Element元素

"hello world"和div与span之间的间隔，被展现成了文本节点，对应到节点结构图中的CharacterDate元素

DOM CORE在解析文档时，会将所有的元素、属性、文本、注释等等视为一个节点对象（或继承自节点对象的对象,多态、向上转型）,根据文本结构依次展现，最后行成了一棵"DOM树"

DOM HTML的核心概念是HTMLElement，DOM HTML会将文档中的元素（这里的元素特指<body>这种tag,不包括注释，属性，文本)都视为HTMLElement。而元素的属性，则为HTMLElement的属性。

再来看一个示例：

从Node接口提供的属性

myElement.attributes["id"].value;很明显myElement.attributes["id"]返回一个对象.value是得到对象的value属性

Element实现的方法返回

myElement.getAttributes("id");很明显此时id现在只是一个属性而已，这只是一个得到属性的操作。

其实上DOM Core和DOM html的外部调用接口相差并不是很大，对于html文档可以用DOM html进行操作，针对xhtml可以用DOM Core。

关于BOM

老规则，先来一张图：

BOM与浏览器紧密结合,这些对象也被称为是宿主对象，即由环境提供的对象。

这里要强调一个奇怪的对象Global对象，它代表一个全局对象，Javascript是不允许存在独立的函数，变量和常量，如果没有额外的定义，他们都作为Global对象的属性或方法来看待.像parseInt(),isNaN(),isFinite()等等都作为Global对象的方法来看待，像Nan,Infinity等"常量"也是Global对象的属性。像Boolean,String,Number，RegExp等内置的全局对象的构造函数也是Global对象的属性.但是Global对象实际上并不存在，也就是说你用Global.NaN访问NaN将会报错。实际上它是由window来充当这个角色，并且这个过程是在javascript首次加载时进行的。

好了，好了，就到这吧，本来还有一部分，算了，以后另开一节再说吧。

赞 (0)

相关推荐

  • 理解Javascript_07_理解instanceof实现原理

    理解Javascript_07_理解instanceof实现原理

    那么instanceof的这种行为到底是如何实现的呢,现在让我们揭开instanceof背后的迷雾. instanceof原理 照惯例,我们先来看一段代码: 复制代码 代码如下: function Cat(){} Cat.prototype = {} function Dog(){} Dog.prototype ={} var dog1 = new Dog(); alert(dog1 instanceof Dog);//true alert(dog1 instanceof Object);//t

  • 理解Javascript_14_函数形式参数与arguments

    理解Javascript_14_函数形式参数与arguments

    注:在阅读本博文前请先阅读<理解javascript_13_执行模型详解> 注:本文的部分内容是自已的一些推论,并无官文文档作依据,如有错误之后,还望指正. 生涩的代码 我们先来看一段比较生涩的代码: 复制代码 代码如下: function say(msg,other,garbage){ alert(arguments[1]);//world var other = 'nice to meet you!'; var msg; alert(arguments.length); alert(msg

  • 理解Javascript_10_对象模型

    理解Javascript_10_对象模型

    对象模型 红色虚线表示隐式Prototype链. 这张对象模型图中包含了太多东西,不少地方需要仔细体会,可以写些测试代码进行验证.彻底理解了这张图,对JavaScript语言的了解也就差不多了.下面是一些补充说明: 1. 图中有好几个地方提到build-in Function constructor,这是同一个对象,可以测试验证: 复制代码 代码如下: //Passed in FF2.0, IE7, Opera9.25, Safari3.0.4 Function==Function.constr

  • 理解Javascript_09_Function与Object

    理解Javascript_09_Function与Object

    注:理论过于深入,本人不改保证所有的理论都是正确的,但经过多方测试还未发现实际代码与理论冲突的问题.如有错误,望高人指点! Function 首先回顾一下函数对象的概念,函数就是对象,代表函数的对象就是函数对象.所有的函数对象是被Function这个函数对象构造出来的.也就是说,Function是最顶层的构造器.它构造了系统中所有的对象,包括用户自定义对象,系统内置对象,甚至包括它自已.这也表明Function具有自举性(自已构造自己的能力).这也间接决定了Function的[[call]]和[

  • 理解Javascript_01_理解内存分配原理分析

    理解Javascript_01_理解内存分配原理分析

    原始值和引用值 在ECMAScript中,变量可以存放两种类型的值,即原始值和引用值. 原始值指的就是代表原始数据类型(基本数据类型)的值,即Undefined,Null,Number,String,Boolean类型所表示的值. 引用值指的就是复合数据类型的值,即Object,Function,Array,以及自定义对象,等等 栈和堆 与原始值与引用值对应存在两种结构的内存即栈和堆 栈是一种后进先出的数据结构,在javascript中可以通过Array来模拟栈的行为 复制代码 代码如下: va

  • 理解Javascript_06_理解对象的创建过程

    理解Javascript_06_理解对象的创建过程

    简单的代码 我们先来看一段简单的代码: 复制代码 代码如下: function HumanCloning(){ } HumanCloning.prototype ={ name:'笨蛋的座右铭' } var clone01 = new HumanCloning(); alert(clone01.name);//'笨蛋的座右铭' alert(clone01 instanceof HumanCloning);//true HumanCloning.prototype = {}; alert(clon

  • 理解Javascript_08_函数对象

    理解Javascript_08_函数对象

    函数对象 首先,大家得明确一个概念:函数就是对象,代表函数的对象就是函数对象.既然是对象,那它又是被谁构造出来的呢?下面我们来看一段描述:JavaScript代码中定义函数,或者调用Function创建函数时,最终都会以类似这样的形式调用Function函数:var newFun=Function(funArgs, funBody); .由此可知函数对象是由Function这个函数对象构造出来的. 注:Function对象本身也是一个函数,因此它也一个函数对象.关于Function的深入理解,请

  • 理解Javascript_13_执行模型详解

    函数执行环境 简单的代码: 复制代码 代码如下: function say(msg,other){ var str = "nobody say:"; this.name = '笨蛋的座右铭'; function method(){};//var method = function(){}; alert(str+msg); } say('hello world'); alert(name);//笨蛋的座右铭 当调用say方法时,第一步是创建其执行环境,在创建执行环境的过程中,会按照定义的

  • 理解Javascript_12_执行模型浅析

    理解Javascript_12_执行模型浅析

    简单的开始 简单的代码: 复制代码 代码如下: <script type="text/javascript" src="xxx.js"></script> <script type="text/javascript"> var i = 10; function say(msg){ alert(msg); } </script> <script type="text/javascrip

  • 理解Javascript_05_原型继承原理

    理解Javascript_05_原型继承原理

    prototype与[[prototype]] 在有面象对象基础的前提下,来看一段代码: 复制代码 代码如下: //Animal构造函数 function Animal(name){ this.name = name; } //Animal原型对象 Animal.prototype = { id:"Animal", sleep:function(){ alert("sleep"); } } var dog = new Animal("旺才");

  • 理解Javascript_11_constructor实现原理

    理解Javascript_11_constructor实现原理

    constructor是什么 简单的理解,constructor指的就是对象的构造函数.请看如下示例: 复制代码 代码如下: function Foo(){}; var foo = new Foo(); alert(foo.constructor);//Foo alert(Foo.constructor);//Function alert(Object.constructor);//Function alert(Function.constructor);//Function 对于foo.con

  • 理解Javascript_15_作用域分配与变量访问规则,再送个闭包

    理解Javascript_15_作用域分配与变量访问规则,再送个闭包

    作用域分配与变量访问规则 在 ECMAScript 中,函数也是对象.函数对象在变量实例化过程中会根据函数声明来创建,或者是在计算函数表达式或调用 Function 构造函数时创建.(关于'函数对象'请见<理解Javascript_08_函数对象>).每个函数对象都有一个内部的 [[scope]] 属性,这个属性也由对象列表(链)组成.这个内部的[[scope]] 属性引用的就是创建它们的执行环境的作用域链,同时,当前执行环境的活动对象被添加到该对象列表的顶部.当我们在函数内部访问变量时,其实

  • 理解Javascript_02_理解undefined和null

    理解Javascript_02_理解undefined和null

    来自普遍的回答: 其实在 ECMAScript 的原始类型中,是有Undefined 和 Null 类型的. 这两种类型都分别对应了属于自己的唯一专用值,即undefined 和 null. 值 undefined 实际上是从值 null 派生来的,因此 ECMAScript 把它们定义为相等的,通过下列代码可以验证这一结论: alert(undefined == null); //true 尽管这两个值相等,但它们的含义不同. undefined 是声明了变量但未对其初始化时赋予该变量的值,n

随机推荐