Javascript数据模型

本文主要描述Javascript的数据模型,即对Javascript所支持的数据类型的一个全局概缆。文章比较的理论化,非常深入,因此不易理解,但务必对数据模型有一个映象,因为他是理解Javascript对象模型与Javascript执行模型的基础。

基本的数据类型

 原始类型(简单数据类型、基本数据类型)

Undefined类型: 表示声明了变量但未对其初始化时赋予该变量的值。undefined为Undefined类型下的唯一的一个值。

Null类型:用于表示尚未存在的对象。Null类型下也只有一个专用值null。

Boolean类型:有两个值true和false,主要用于条件判断,控制执行流程。

Number类型:代表数字(即包括32的整数,也包括64位的浮点数)

String类型:用于代表字符串。

对象:一个无序属性的集合,这些属性的值为简单数据类型、对象或者函数。注:这里对象并不特指全局对象Object.

函数:函数是对象的一种,实现上内部属性[[Class]]值为"Function",表明它是函数类型,除了对象的内部属性方法外,还有 [[Construct]]、[[Call]]、[[Scope]]等内部属性。函数作为函数调用与构造器(使用new关键字创建实例对象)的处理机制不一样(Function对象除外),内部方法[[Construct]]用于实现作为构造器的逻辑,方法[[Call]]实现作为函数调用的逻辑。同上,这里的函数并不特指全局对象Function。

注:关于函数与对象的关系可以引申出很多问题,现在可以不去深究函数实现内部的细节,这将在以后的文章中探讨。

内置数据类型(内置对象)

Function: 函数类型的用户接口。 Object: 对象类型的用户接口。 Boolean, Number, String: 分别为这三种简单数值类型的对象包装器,对象包装在概念上有点类似C#/Java中的Box/Unbox。 Date, Array, RegExp: 可以把它们看作是几种内置的扩展数据类型。

首先,Function, Object, Boolean, Number, String, Date, Array, RegExp等都是JavaScript语言的内置对象,它们都可以看作是函数的派生类型,例如Number instanceof Function为true,Number instanceof Object为true。在这个意义上,可以将它们跟用户定义的函数等同看待。 其次,它们各自可以代表一种数据类型,由JS引擎用native code或内置的JS代码实现,是暴露给开发者对这些内置数据类型进行操作的接口。在这个意义上,它们都是一种抽象的概念,后面隐藏了具体的实现机制。 在每一个提到Number, Function等单词的地方,应该迅速的在思维中将它们实例化为上面的两种情况之一。

数据类型实现模型描述

Build-in *** data structure: 指JS内部用于实现***类型的数据结构,由宿主环境(浏览器)提供,这些结构我们基本上无法直接操作。 Build-in *** object: 指JS内置的Number, String, Boolean等这些对象,这是JS将内部实现的数据类型暴露给开发者使用的接口。 Build-in *** constructor: 指JS内置的一些构造器,用来构造相应类型的对象实例。它们被包装成函数对象暴露出来,例如我们可以使用下面的方法访问到这些函数对象:

?


1

2

3

4

5

6

7

8

9

10

11

12

//Passed in FF2.0, IE7, Opera9.25, Safari3.0.4

//access the build-in number constructor

var number = new Number(123);

var numConstructor1 = number.constructor; //or

var numConstructor2 = new Object(123).constructor;

//both numConstructor1 and numConstructor2 are the build-in Number constructor

numConstructor1 == numConstructor2 //result: true

//access the build-in object constructor

var objConstructor1 = {}.constructor; //or

var objConstructor2 = new Object().constructor;

//both objConstructor1 and objConstructor2 are the build-in Object constructor

objConstructor1==objConstructor2 //result: true

关于"接口"的解释:简单的说,接口就是可以调用的方法。如:

?


1

2

3

4

5

6

7

8

//String就是一个接口,它定义了String的行为.它可以由外部调用

var str = new String(‘笨蛋的座右铭‘);

//我们自已定义一个接口

function say(msg){

   alert(msg);

}

//调用定义的接口

say("hello world");

注:完全理解接口的概念需要有一定的强类型语言编程经验(java/c#),因为本文已经够复杂了,就不再将问题复杂化了。所以对于接口的答案并不是很严谨,但已经够用了,望高人见谅。

关于简单数据类型的对象化

这是一个细微的地方,下面描述对于Boolean, String和Number这三种简单数值类型都适用,以Number为例说明。 JS规范要求: 使用var num1=123;这样的代码,直接返回基本数据类型,就是说返回的对象不是派生自Number和Object类型,用num1 instanceof Object测试为false;使用new关键字创建则返回Number类型,例如var num2=new Number(123); num2 instanceof Number为true。 将Number当作函数调用,返回结果会转换成简单数值类型。下面是测试代码:

?


1

2

3

4

5

6

7

8

9

10

11

//Passed in FF2.0, IE7, Opera9.25, Safari3.0.4

var num1 = new Number(123); //num1 derived from Number & Object

num1 instanceof Number //result: true

num1 instanceof Object //result: true

//convert the num1 from Number type to primitive type, so it‘s no longer an instance of Number or Object

num1 = Number(num1);

num1 instanceof Number //result: false

num1 instanceof Object //result: false

var num2 = 123; //num2 is a primitive type

num2 instanceof Number //result: false

num2 instanceof Object //result: false

结论:虽然我们得到了一个简单数值类型,但它看起来仍然是一个JS Object对象,具有Object以及相应类型的所有属性和方法,使用上基本没有差别,唯一不同之处是instanceof的测试结果。由此也就产生了一个概念"Literal Syntax"

Literal Syntax

在简单数据类型的对象化一节中,我们也看到了简单类型和其包装类型可以相互转换,并且两者之间的行为相同。但两者相比较,明显简单类型的定义更加轻量,因此我们可以用简单类型定义替换相应的包装类型定义。如:

?


1

2

3

Number: var i = 100; //替代var i = new Number(100);

Boolean: var b = true//替代var b = new Boolean(true);

String: var str = ‘this is a string.‘; //替代var str = new String(‘this is a string‘);

其实这种类似于var i = 100;var b=true;var str=‘this is a string‘这种定义方式就叫做Literal Syntax。难道就只有简单数据类型才有这种Literal Syntax的表示方法吗!不是的,复合数据类型同样有。

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

//对象定义的字面量表示法

var obj  = {name:‘笨蛋的座右铭‘,age:25}

/*

//对象的非字面量表示法

var obj = new Object();

obj.name = ‘笨蛋的座右铭‘;

obj.age = 25;

*/

//数组定义的字面量表示法

var arr = [‘笨蛋的座右铭‘,25];

/*

//数组的非字面量表示法

var arr = new Array();

arr[0]=‘笨蛋的座右铭‘];

arr[1]=25;

*/

//正则表达式字面量表式法

var reg = /\d+/;

/*

//正则表达式非字面量表式法

var reg = new RegExp("\\d+");

*/

那函数呢!其实函数的定义已经是Literal Syntax的表示形式了。

在实际工作中,我们建议尽量采用Literal Syntax的形式定义变量,因为这样更简单,更高效。

时间: 2024-08-07 00:37:19

Javascript数据模型的相关文章

【JavsScript】JavaScript MVC 框架技术选型

你很喜欢Gmail和Trello之类的单页面应用,但是不太确定该从何开始.也许你的JavaScript代码是如此的杂乱无章,以致于你很想在下一个项目上尝试下JavaScript MVC库和框架,却苦于没有头绪?我正在撰写一本单页面应用的书,所以我阅读了大量网上的相关资料.在这里我尝试提供一些看法,希望可以帮助你下决定. 简介 这里讨论的是时下最热的框架,AngularJS.Backbone.Ember和Knockout.同时提到了Batman.CANjs.Meteor和Spine,但是没有详细展

数据的双向绑定 Angular JS

接触AngularJS许了,时常问自己一些问题,如果是我实现它,会在哪些方面选择跟它相同的道路,哪些方面不同.为此,记录了一些思考,给自己回顾,也供他人参考. 初步大致有以下几个方面: 数据双向绑定 视图模型的继承关系 模块和依赖注入的设计 待定 数据的双向绑定 Angular实现了双向绑定机制.所谓的双向绑定,无非是从界面的操作能实时反映到数据,数据的变更能实时展现到界面. 一个最简单的示例就是这样: <div ng-controller="CounterCtrl"> &

Angular之双向数据绑定

---恢复内容开始--- angular最初进入前端开发人员视野的时候,给人以不可磨灭的印象之一就是它的双向数据绑定的实现.本篇章会先介绍如何使用此功能,然后在深入解释它的双向绑定的机制是如何实现的. angular中的data-binding指的是模型models和视图views之间的自动同步.angular实现双向绑定后,会让你觉得数据模型是页面中数据唯一的真实来源.当model改变后,视图反映改变,反之亦然.通俗的说,所谓的双向数据绑定,无非就是从界面的操作能实时反映到数据,数据的变更能实

深入学习AngularJS中数据的双向绑定机制

来自:http://www.jb51.net/article/80454.htm Angular JS (Angular.JS) 是一组用来开发Web页面的框架.模板以及数据绑定和丰富UI组件.它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作. AngularJS很小,只有60K,兼容主流浏览器,与 jQuery 配合良好.双向数据绑定可能是AngularJS最酷最实用的特性,将MVC的原理展现地淋漓尽致. AngularJS的工作原理是:HTML模板将会被浏览器解析到DOM中,

Angular数据双向绑定机制

数据的双向绑定 Angular实现了双向绑定机制.所谓的双向绑定,无非是从界面的操作能实时反映到数据,数据的变更能实时展现到界面. 一个最简单的示例就是这样: <div ng-controller="CounterCtrl"> <span ng-bind="counter"></span> <button ng-click="counter=counter+1">increase</butto

Mozilla正在SpiderMonkey中测试JavaScript并行计算

Mozilla正致力于实现JavaScript“并行(parallelism)计算”,以便充分利用硬件性能.Dave Herman是Mozilla Research的首席研究员和策略总监.近日,他在一篇博文中提到,他们正在其JavaScript引擎SpiderMonkey中进行相关实验. 他们试图通过一种底层的.渐进的方法为JavaScript添加更加灵活和强大的并行计算原语.他首先指出: 我正在谈论的不是“并发(concurrency)”……JavaScript的异步并发模型很受欢迎,也取得了

监听 javascript 对象的变化

这一章话题的由来,还要从一些学员的作业说起.写这篇文章主要是想让大家能从不同的角度分析问题,学习的过程中多看,多练,多想,多查,多用心.在特别多的学习网站中大部分的学习资料基本都是循规蹈矩的,例如慕课网的 javascript 入门教程中,很多讲师都讲了一些实例,而这些例子中的代码风格如出一辙,没什么新意,而且这些教程占了很大一部分比例.在这里,给大家提供另外一种思路 ------ 监听,具体代码的实现大家自己实现.也欢迎大家评论区写出不同想法. 先给出监听的概念:监听一个对象的某个属性是否发生

【转】全Javascript的Web开发架构:MEAN和Yeoman【译】

引言 最近在Angular社区的原型开发者间,一种全Javascript的开发架构MEAN正突然流行起来.其首字母分别代表的是:(M)ongoDB——noSQL的文档数据库,使用JSON风格来存储数据,甚至也是使用JS来进行sql查询:(E)xpress——基于Node的Web开发框架:(A)agular——JS的前端开发框架,提供了声明式的双向数据绑定:(N)ode——基于V8的运行时环境(JS语言开发),可以构建快速响应.可扩展的网络应用. MEAN的支持者宣称,如果整个开发栈均能使用JS,

从数组中选出和等于固定值的n个数(JavaScript实现)

现实生活中的问题,可能会抽象为这样一种数据模型: 从一个数组中挑选出几个数,让这几个数相加的和为指定的值. 大多数读者应该有过网购的经历,网购一般会有个凑单功能,假如读者买了70元的商品,但是必须满100元才能包邮,这时系统会自动推荐一些商品,加起来差不多就100块钱了. 系统如何确定推荐哪些商品呢?这其实就是刚刚提到的模型,我们可以把热销商品的价格放到一个数组中,然后利用算法,找出数组中哪些价格的和为30元. 废话少说,小菜给大家分享一个JavaScript版本的算法实现. 算法代码: 1 f