JavaScript大杂烩1 - 理解JavaScript的类型系统
随着硬件水平的逐渐提高,浏览器的处理能力越来越强大,本人坚信,客户端会越来越瘦,瘦到只用浏览器就够了,服务端会越来越丰满;虽然很多大型的程序,比如3D软件,客户端仍然会存在,但是未来的主流必将是浏览器,也就是Web程序/网站。
Web前端开发模式:Thinking in "DIV + CSS + JS (JavaScript)"
任何面向用户的程序,最终都表现为3个部分:界面,逻辑,数据。而经过几十年的编程实践,大家都发现,当把这3个部分以弱耦合的形式结合起来的时候,开发的灵活性和效率最好,而且这种形式的程序应对变化的能力也比较强。这条原则在Web前端开发中就体现为"DIV + CSS + JS"的分离与开发。
对照上面的3个部分,我们很容易找到对应的关系:以DIV为代表的HTML构成网页上面的数据,CSS控制界面的显示效果,JavaScript执行网页的逻辑。这3个部分可以互不干扰,独立进行开发,为Web的程序设计和团队合作带来了无与伦比的灵活性。
这个系列是以总结JavaScript开发为主,涉及到另外两个方面的内容都是简单的提及一下。
浏览器的兼容性
JavaScript是运行在浏览器中的,但是由于各家软件公司,像微软,并不按照规定的套路出牌,不去执行相关的标准去实现浏览器的行为,所以JavaScript从诞生那天起,在不同的浏览器中就充满着兼容性问题。不过还好,渐渐的大家都服从相同的ECMAScript标准了,兼容性的问题得到了一定的缓解,不过在很多时候还是值得我们去注意。
从某种意义上说,各种JavaScript类库的出现一方面是为了重用更多的功能,另一方面也是为了更好的屏蔽浏览器的兼容性问题,本质上其实都还是重用,这是计算机技术向前发展的动力。
所以很多时候,我们进行Web开发的时候,选择合适的类库不仅能快速开发出我们想要的功能,还能够最大程度的减少浏览器的兼容性问题。
JavaScript的组成部分
简单的来说,JavaScript就是这样的:
JavaScript = ECMAScript (语言标准) +
DOM (Document Object Model,文档内容的建模对象) +
BOM (Browser Object Model,浏览器的建模对象)
ECMAScript规范: 这个不用多说,就是语法规范,这个是JavaScript编程的基石。
DOM: 这个是JavaScript的重点,我们学了那么多,就是为了要为HTML提供逻辑功能,从HTML元素抽象出来的DOM自然是重中之重。
BOM: JavaScript是运行在浏览器中的,与浏览器打交道是必须的,但是通常不会很频繁。
基本类型
从语言的类型来说,JavaScript是一门脚本语言,是动态语言,特点就是不需要编译,直接解释执行。
动态语言也有基本的类型系统,而且通常比较简单,这一点在JavaScript中体现最为明显。
通常来说,JavaScript定义了如下6种基本类型:
1. number
这是一切数字类数据的类型,包括浮点数(如0.1),整数(如10),还有像NaN这样的特殊值。
NaN代表非法的数字,这个值通常是在将一个类型转换成数字失败以后返回的数值。
此外,与别的编程语言一样,也可以使用十六进制或八进制表示数字,比如0xFF, 012等。
2. string
这个类的重要性就不需重复了,不过需要注意,在JavaScript中,既可以用双引号""定义字符串,也可以用单引号''定义字符串。但是考虑到HTML中的属性大多用双引号定义属性,所以在JavaScript中习惯上只用单引号定义字符串。
3. boolean
这个类型很简单,只有true和false两个值。
4. object
这个类型是JavaScript的基石,因为JavaScript是面向对象的语言,object就是整个类型系统的根,其他的所有类型都是对象,并且都是直接或者间接的从object继承而来。
object类型有一个特殊的值null,代表对象的值是空值。
5. function
这个类型时JavaScript的第一等成员,它构成了JavaScript编程的主旋律,function类型作为一种基元类型,可以使用在任何数据类型可以出现的场合,比如变量,参数,返回值等等。不用怀疑,function是从object继承来的。
6. undefined
这个类型比较特别,它只有一个值,就是undefined。它代表已经声明,但还没有赋值的数据。任何的数据类型,只要声明了,没赋值,那么这个变量的类型就是undefined,值就是undefined。
动态语言的变量不要求像静态语言那样,严格的定义类型,然后使用;在JavaScript中,一切类型都由var来定义,不需要指定类型。没有指定类型,就决定了定义的变量的类型取决于赋值的数据的类型。下面例子给出了常见的用法:
var age = 10; // number
var name = 'Frank'; // string
var married = false; // boolean
var obj = new object(); // object
var fun = function() { alert('Hi');}; // function
var extend; // undefined
这些类型定义很简单,使用起来也与别的语言没什么区别,但是有几点还是需要注意的:
1. 空串,NaN,null,undefined的辨析
空串很简单,其类型string类型,值为''。
NaN也很简单,其类型为number类型,值为NaN。只不过NaN与任何值都不相等,即使是与NaN自身也不相等,判断一个值是否是NaN的唯一方式就是使用全局的isNaN()方法。
null也很简单的,其类型为object类型,值为null。
undefined最简单,其类型为undefined类型,值为undefined。
这些相似的东西很多时候是相似的,比如在if语句的条件表达式中,不过只要我们记住了它们的类型,那么在下面的全等运算符(===)面前,它们是无所遁形的。
2. 类型之间的转换
类型转换的方式主要有下面几种:
1). 使用全局方法:String(),Number(),parseInt(),parseDouble()等等。
2). 使用对象的方法:比如所有对象转成string类型都可以使用object内置的toString()方法。
3). 使用运算符: 比如所有对象转成string类型的间接方式: var s = '' + obj;其本质上与第二个方法是一样的。
4). 使用new操作: 比如new String(),new Number()等等。
从上面我们看到了两种类型,以字符串类型为例,一种是string类型,一种是String类型,因为JavaScript是区分大小写的,这两种不是同一种类型。如何理解这种现象呢?有C#背景的同学可能比较熟悉值类型与引用类型的区别,实际上在JavaScript中也存在类似情况,string作为基本的类型,算是一种与值类型相当的类型,而String是作为string的包装类型存在,是完整的与引用类型相当的类型。
所以使用new String()的方式得到的字符串会与普通的使用''定义的字符串会有那么一点不同,比如在命令行(浏览器的调试工具)中本别输入:
String(10) 输出的结果是"10"
new String(10) 输出的结果是String {0: "1", 1: "0", length: 2}
通常我们不会使用第四种转换方式去强行构造一个字符串对象。
此外需要注意Number()与parseInt()处理的过程是不一样的,Number('10a')会返回NaN,而parseInt('10a')会返回10。
3. 其它类型到boolean类型的转换
boolean类型是比较特殊的,因为很多的语句(比如if,while等等)都要使用boolean值。其他类型转换成boolean类型的显式方式是Boolean()方法。但是我们还是要了解一下,哪些值会转成true,哪些值会转成false。
除了'',null,undefined,0,NaN这几个值会转成false以外,其它的所有值都会转成true。
基本运算
看完基本类型,我们再看看基本的运算,这个和其他语言没什么区别,基本的数学运算(+,-,*,/,+=,-=,*=,/=),取模(%,%=),赋值(=),判等(<,>,==,!=),取反(-),自增自减(++,--),唯一的三元条件运算符(?:)等等都是一样的。
但是,在JavaScript中,有几个运算符与别的语言是有些区别:
1. 全等(===),不全等(!===)
全等代表着类型和值都相等,不全等代表着类型或值不相等,细细辨别下面这些语句的不同:
alert(null == undefined); // true
alert(null === undefined); // false
结论是我们需要判等的时候,尽量使用全等运算===,而不是普通的相等运算==。
2. 逻辑运算符(&&,||,!)
这些运算符的第一层用法就是判断一组boolean类型的逻辑运算结果,当然其他的类型的值可以先转成boolean后参与运算。
这个运算符的第二层用法就是像下面这种常见的写法:
var Common = Common || {};
这种用法是确保Common被初始化了,然后可以作为一种namespace使用,这个在后面对象的总结中还会提及到。
结合起来,其实可以简单总结为:
||是这样运算的:从第一个操作数开始,遇到有意义的操作数就返回,否则返回最后一个表达式(不一定是boolean值);
&&是这样运算的:从第一个操作数开始,遇到无意义的操作数返回,否则返回最后一个表达式(注意同上);
!是这样运算的:对表达式的值取非(注意不是对表达式)。
无意义的值指的就是'',null,undefined,0,NaN这几个与false等价的值。
3. 位运算符(&,|,^, >>,<<,>>>)
这几个运算符中前4个没什么可说的,关键就是最后这个个无符号右移位操作:
expression1 >>> expression2
>>> 运算符将 expression1 的位右移 expression2 中指定的位数,用零填充右移后左边空出的位,这是它与>>最大的不同(>>会保持符号,如果第一位是1的话,右移还是用1填充左边), 右移的位被丢弃。
4. undefined参与运算
这是一个特殊的类型,导致参与运算的结果也比较特别,品味下面的例子:
undefined + 1; // 结果为NaN
undefined + ''; // 结果为'undefined'
所以一旦程序中出现undefined的话,往往会出现一些奇怪的问题,所以程序中要特别注意出现undefined的情况。
此外,JavaScript的基本语句与别的C系语言也相同,比如if,switch,return,for,while,break,continue,包括注释(//,/*...*/)等等,这里就不多说了。
自动垃圾回收机制
JavaScript是使用自动垃圾回收机制的,这个有C#或者Java这些语言背景的同学还是比较清楚的。原理也是差不多,没有再被有效引用的变量会自动被当做垃圾回收掉。如何辨别一个变量是不是垃圾有很多方法,常用的是标记清楚和引用计数两种方法,“标记清除”是目前主流的垃圾回收算法,这种算法的思想是给当前不使用的值加上标记,然后再回收其内存。“引用计数”算法的思想是跟踪记录所有值被引用的次数。JavaScript引擎不再使用“引用计数”这种算法;但在较低版本的IE(较高版本中据说已修复,不过我不用IE久矣)中访问非原生JavaScript对象(如DOM元素),还是使用这种垃圾收集的。
当代码中存在循环引用现象时,“引用计数”算法就会导致内存泄露问题。比如:
var a = {name:'a'};
var b = {name:'b'};
a.bname = b
b.aname = a;
这种和数据库死锁差不多的的情况还好,至少说程序员不会有意为之。但是下面这种情况在IE中却是普遍存在的:
$(document).ready(function() {
var div = document.getElementById("mydiv");
div.onclick = function(){
console.log("div");
};
});
这个是网上某位仁兄给出的例子,据说当指定的单击事件处理程序时,创建了一个在其封闭的环境中包含div变量的闭包环境。而div也包含一个指向闭包的引用(onclick属性自身),这就导致了内存都不能得到释放。当然解决方法很简单:
$(document).ready(function() {
var div = document.getElementById("mydiv");
div.onclick = divonclicked;
}); function divonclicked() {
console.log("div");
};
此时因为divonclicked函数不在包含div的引用,所以没有形成循环,内存可以得到释放。
可能很多人都知道将一个对象置为null,那么它的内存就会回收。这是因为变量的指向了一个null,那么它原来指向的那块内存空间就会因为没有被指向,或者说没有被引用,而被垃圾回收掉,这种做法在JavaScript中仍然适用。
上面的例子姑且不管现在存不存在,总的来说,为了避免这些内存泄露的情况,方法就是少用IE,然后是多注意闭包中引用HTML对象的情况,在大部分情况下自动垃圾回收是没有太大问题的。
Client端JavaScript与Server端JavaScript
JavaScript发展至今,已经不再仅仅满足于活动在浏览器端了,它把触角已经伸向了后面的服务器端,这对程序猿来说应该是好事,因为只要学好JavaScript,就可以前后通吃了。不过大家还是要注意,后端的JavaScript完全可以称之为全新的编程语言,不能再以老的对待浏览器中的JavaScript的眼光去看待它了。
浏览器端的JavaScript由于运行在浏览器的这个沙箱中,所以它不可能有多么大的权限。它的主要职责就是操作浏览器中的对象,完成相应的逻辑功能。即使存在各种类库,但是本质上还是没有脱离浏览器的限制。
但是服务器端的JavaScript中,例如在NodeJs环境中,JavaScript是作为一门独立的语言存在的,它与C#等语言一样,拥有各种丰富的各种类库,去完成丰富的功能,比如读取文件,开启线程等等,这些特性与浏览器端的JavaScript已经完全不可同日而语了。
这个系列的重点是在Client端的JavaScript,这里的基础知识对Server端的JavaScript完全是适用的。
JavaScript大杂烩1 - 理解JavaScript的类型系统的更多相关文章
- JavaScript大杂烩6 - 理解JavaScript中的this
在JavaScript开发中,this是很常用的一个关键字,但同时也是一个很容易引入bug的一个关键字,在这里我们就专门总结一下页面中可能出现的this关键字(包括几种在其他页面文件中出现的this) ...
- JavaScript大杂烩4 - 理解JavaScript对象的继承机制
JavaScript是单根的完全面向对象的语言 JavaScript是单根的面向对象语言,它只有单一的根Object,所有的其他对象都是直接或者间接的从Object对象继承.而在JavaScript的 ...
- JavaScript大杂烩3 - 理解JavaScript对象的封装性
JavaScript是面向对象的 JavaScript是一种基于对象的语言,你遇到的所有东西,包括字符串,数字,数组,函数等等,都是对象. 面向过程还是面向对象? JavaScript同时兼有的面向过 ...
- JavaScript大杂烩2 - 理解JavaScript的函数
JavaScript中的字面量 书接上回,我们已经知道在JavaScript中存在轻量级的string,number,boolean与重量级的String,Number,Boolean,而且也知道了之 ...
- JavaScript大杂烩12 - 理解Ajax
AJAX缘由 再次谈起这个话题,我深深的记得就在前几年,AJAX被炒的如火如荼,就好像不懂AJAX,就不会Web开发一样.要理解AJAX为什么会出现,就要先了解Web开发面临的问题. 我们先来回忆一下 ...
- 深入理解JavaScript系列+ 深入理解javascript之执行上下文
http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html http://blog.csdn.net/hi_kevin/article/d ...
- JavaScript大杂烩11 - 理解事件驱动
前面我们回顾了前端JavaScript只干的两件事:操作BOM与操作DOM,那么什么时候去干这些事呢?答案是需要干的时候去干.那么什么时候是需要干的时候呢?答案是事件被触发的时候.这就是通常所说的“事 ...
- JavaScript大杂烩9 - 理解BOM
毫无疑问,我们学习JavaScript是为了完成特定的功能.在最初的JavaScript类型系统中,我们已经分析过JavaScript在页面开发中充当着添加逻辑的角色,而且我们知道JavaScript ...
- JavaScript大杂烩10 - 理解DOM
操作DOM 终于到了JavaScript最为核心的部分了,通常来说,操作DOM,为页面提供更为友好的行为是JavaScript根本目标. DOM树 - HTML结构的抽象 既然DOM是操纵HTML ...
随机推荐
- Could not load file or assembly Microsoft.SqlServer.management.sdk.sfc version 11.0.0.0
I have installed MS SQL Server 2012 R2 and when I try to update model from database under EDMX file ...
- ARM架构处理器扩展结构-NEON
是适用于ARM Cortex-A系列处理器的一种128位SIMD(Single Instruction, Multiple Data,单指令.多数据)扩展结构. 从智能手机和移动计算设备到HDTV,它 ...
- Maven - 实例-4-依赖传递
这里以Eclipse创建Maven工程来演示. Setp-1 创建Maven项目 File ---> New ---> Maven Project ---> 默认勾选"Us ...
- HoloLens开发手记 - 使用HoloLens模拟器 Using HoloLens emulator
首先下载HoloLens模拟器 HoloLens模拟器运行在没有真机的情况下在你的PC上测试应用,属于HoloLens开发工具系列.模拟器使用了Hyper-V虚拟机.通常通过传感器获取的人体和环境输入 ...
- Django --需求文件requirements.txt
在虚拟环境中使用pip生成: (venv) $ pip freeze >requirements.txt 当需要创建这个虚拟环境的完全副本,可以创建一个新的虚拟环境,并在其上运行以下命令: (v ...
- 第三章:Activity的生命周期
一:Activity的生命周期方法 Android提供了很多Activity的生命周期方法,比如我们常用的onCreate.onPause.onResume等.这里主要介绍粗粒度的周期方法,诸如onP ...
- Android_Fragment和Activity之间的通信
Fragment 的生命周期是随着activity变化而变化的. 如果activity要给在运行的时候给fragment传人数据则需要fragment实现一个自定义的接口,并且实现接口里面的方法,在a ...
- Android privilege escalation to mediaserver from zero permissions (CVE-2014-7920 + CVE-2014-7921)
墙外通道:http://bits-please.blogspot.com/2016/01/android-privilege-escalation-to.html In this blog post ...
- 自己动手实现java数据结构(六)二叉搜索树
1.二叉搜索树介绍 前面我们已经介绍过了向量和链表.有序向量可以以二分查找的方式高效的查找特定元素,而缺点是插入删除的效率较低(需要整体移动内部元素):链表的优点在于插入,删除元素时效率较高,但由于不 ...
- Kafka实战解惑
目录 一. kafka简介二. Kafka架构方案三. Kafka安装四. Kafka Client API 4.1 Producers API 4.2 Consumers API 4.3 消息高可靠 ...