javascript类型系统——undefined和null
2016-07-13 08:53
531 查看
×
目录
[1]原因 [2]undefined [3]null
但是,JavaScript的设计者Brendan Eich,觉得这样做还不够,有两个原因。首先,null像在Java里一样,被当成一个对象。但是,JavaScript的值分成原始类型和对象类型两大类,Brendan Eich觉得表示”无”的值最好不是对象。其次,JavaScript的最初版本没有包括错误处理机制,发生数据类型不匹配时,往往是自动转换类型或者默默地失败。Brendan Eich觉得,如果null自动转为0,很不容易发现错误
因此,Brendan Eich又设计了一个undefined。他是这样区分的:null是一个表示”无”的对象,转为数值时为0;undefined是一个表示”无”的原始值,转为数值时为NaN
但是,目前null和undefined基本是同义的,都是原始类型,且只有一些细微的差别
对于尚未声明过的变量只能执行一项操作,使用typeof操作符检测其数据类型,但严格模式下会导致错误
【出现场景】
【1】已声明未赋值的变量
【2】获取对象不存在的属性
【3】无返回值的函数的执行结果
【4】函数的参数没有传入
【5】void(expression)
【类型转换】
逻辑角度看,null值表示一个空对象指针
[注意]null是空对象指针,而[]是空数组,{}是空对象,三者不相同
尽管null和undefined是不同的,但它们都表示"值的空缺",null表示"空值",undefined表示"未定义"。两者往往可以互换。判断相等运算符==认为两者是相等的
实际上,因为undefined和null不是构造器类型,所以它们没有任何的属性和方法,使用.和[]来存取这两个值的成员或方法都会产生一个类型错误
【类型转换】
【2】 W3School-Javascript高级教程——原始类型 http://www.w3school.com.cn/js/pro_js_primitivetypes.asp
【3】《javascript权威指南(第6版)》第3章 类型、值和变量
【4】《javascript高级程序设计(第3版)》第3章 基本概念
// var all = document.getElementById('cnblogs_post_body').children;
var select = [];
for(var i = 1; i < all.length; i++){
if(all[i].getAttribute('id')){
if(all[i].getAttribute('id').match(/anchor\d+$/)){
select.push(all[i]);
}
}
}
var wheel = function(e){
e = e || event;
var data;
if(e.wheelDelta){
data = e.wheelDelta;
}else{
data = -e.detail * 40;
}
for(var i = 0; i < select.length; i++){
if(select[i].getBoundingClientRect().top > 0){
return;
}
if(select[i].getBoundingClientRect().top <= 0 && select[i+1]){
if(select[i+1].getBoundingClientRect().top > 0){
change(oCon.children[i+2])
}
}else{
change(oCon.children[select.length+1])
}
}
}
document.body.onmousewheel = wheel;
document.body.addEventListener('DOMMouseScroll',wheel,false);
var oCon = document.getElementById("content");
var close = oCon.getElementsByTagName('span')[0];
close.onclick = function(){
if(this.innerHTML == '显示目录'){
this.innerHTML = '×';
this.style.background = '';
oCon.style.border = '2px solid #ccc';
oCon.style.width = '';
oCon.style.height = '';
oCon.style.overflow = '';
oCon.style.lineHeight = '30px';
}else{
this.innerHTML = '显示目录';
this.style.background = '#3399ff';
oCon.style.border = 'none';
oCon.style.width = '60px';
oCon.style.height = '30px';
oCon.style.overflow = 'hidden';
oCon.style.lineHeight = '';
}
}
for(var i = 2; i < oCon.children.length; i++){
oCon.children[i].onmouseover = function(){
this.style.color = '#3399ff';
}
oCon.children[i].onmouseout = function(){
this.style.color = 'inherit';
if(this.mark){
this.style.color = '#3399ff';
}
}
oCon.children[i].onclick = function(){
change(this);
}
}
function change(_this){
for(var i = 2; i < oCon.children.length; i++){
oCon.children[i].mark = false;
oCon.children[i].style.color = 'inherit';
oCon.children[i].style.textDecoration = 'none';
oCon.children[i].style.borderColor = 'transparent';
}
_this.mark = true;
_this.style.color = '#3399ff';
_this.style.textDecoration = 'underline';
_this.style.borderColor = '#2175bc';
}
// ]]>
目录
[1]原因 [2]undefined [3]null
前面的话
一般的程序语言,表示空的只有null,但javascript的设计者Brendan Eich却设计了一个undefined,这无疑增加了程序复杂度,但这样做也是有一定原因的。本文将详细介绍javascript中的undefined和null历史原因
1995年JavaScript诞生时,最初像Java一样,只设置了null作为表示”无”的值。根据C语言的传统,null被设计成可以自动转为0但是,JavaScript的设计者Brendan Eich,觉得这样做还不够,有两个原因。首先,null像在Java里一样,被当成一个对象。但是,JavaScript的值分成原始类型和对象类型两大类,Brendan Eich觉得表示”无”的值最好不是对象。其次,JavaScript的最初版本没有包括错误处理机制,发生数据类型不匹配时,往往是自动转换类型或者默默地失败。Brendan Eich觉得,如果null自动转为0,很不容易发现错误
因此,Brendan Eich又设计了一个undefined。他是这样区分的:null是一个表示”无”的对象,转为数值时为0;undefined是一个表示”无”的原始值,转为数值时为NaN
但是,目前null和undefined基本是同义的,都是原始类型,且只有一些细微的差别
undefined
Undefined类型只有一个值,就是undefined。当声明的变量未初始化时,该变量的默认值是undefined。所以一般地,undefined表示变量没有初始化var test;//undefined console.log(test == undefined);//true var test = undefined;//undefined
对于尚未声明过的变量只能执行一项操作,使用typeof操作符检测其数据类型,但严格模式下会导致错误
typeof(test);//undefined
【出现场景】
【1】已声明未赋值的变量
【2】获取对象不存在的属性
【3】无返回值的函数的执行结果
【4】函数的参数没有传入
【5】void(expression)
var i; console.log(i);//undefined var o = {}; console.log(o.p);//undefined function f(){}; console.log(f());//undefined function f(x){return x;} console.log(f());//undefined console.log(void(0));//undefined
【类型转换】
Boolean(undefined): false Number(undefined): NaN String(undefined): 'undefined'
null
Null类型只有一个值,就是null。null是javascript语言的关键字,它表示一个特殊值,常用来描述"空值"逻辑角度看,null值表示一个空对象指针
[注意]null是空对象指针,而[]是空数组,{}是空对象,三者不相同
console.log(typeof null);//'object'
尽管null和undefined是不同的,但它们都表示"值的空缺",null表示"空值",undefined表示"未定义"。两者往往可以互换。判断相等运算符==认为两者是相等的
console.log(null == undefined);//true
实际上,因为undefined和null不是构造器类型,所以它们没有任何的属性和方法,使用.和[]来存取这两个值的成员或方法都会产生一个类型错误
【类型转换】
Boolean(null): false Number(null): 0 String(null): 'null'
参考资料
【1】 阮一峰Javascript标准参考教程——语法概述 http://javascript.ruanyifeng.com/grammar/basic.html#toc21【2】 W3School-Javascript高级教程——原始类型 http://www.w3school.com.cn/js/pro_js_primitivetypes.asp
【3】《javascript权威指南(第6版)》第3章 类型、值和变量
【4】《javascript高级程序设计(第3版)》第3章 基本概念
// var all = document.getElementById('cnblogs_post_body').children;
var select = [];
for(var i = 1; i < all.length; i++){
if(all[i].getAttribute('id')){
if(all[i].getAttribute('id').match(/anchor\d+$/)){
select.push(all[i]);
}
}
}
var wheel = function(e){
e = e || event;
var data;
if(e.wheelDelta){
data = e.wheelDelta;
}else{
data = -e.detail * 40;
}
for(var i = 0; i < select.length; i++){
if(select[i].getBoundingClientRect().top > 0){
return;
}
if(select[i].getBoundingClientRect().top <= 0 && select[i+1]){
if(select[i+1].getBoundingClientRect().top > 0){
change(oCon.children[i+2])
}
}else{
change(oCon.children[select.length+1])
}
}
}
document.body.onmousewheel = wheel;
document.body.addEventListener('DOMMouseScroll',wheel,false);
var oCon = document.getElementById("content");
var close = oCon.getElementsByTagName('span')[0];
close.onclick = function(){
if(this.innerHTML == '显示目录'){
this.innerHTML = '×';
this.style.background = '';
oCon.style.border = '2px solid #ccc';
oCon.style.width = '';
oCon.style.height = '';
oCon.style.overflow = '';
oCon.style.lineHeight = '30px';
}else{
this.innerHTML = '显示目录';
this.style.background = '#3399ff';
oCon.style.border = 'none';
oCon.style.width = '60px';
oCon.style.height = '30px';
oCon.style.overflow = 'hidden';
oCon.style.lineHeight = '';
}
}
for(var i = 2; i < oCon.children.length; i++){
oCon.children[i].onmouseover = function(){
this.style.color = '#3399ff';
}
oCon.children[i].onmouseout = function(){
this.style.color = 'inherit';
if(this.mark){
this.style.color = '#3399ff';
}
}
oCon.children[i].onclick = function(){
change(this);
}
}
function change(_this){
for(var i = 2; i < oCon.children.length; i++){
oCon.children[i].mark = false;
oCon.children[i].style.color = 'inherit';
oCon.children[i].style.textDecoration = 'none';
oCon.children[i].style.borderColor = 'transparent';
}
_this.mark = true;
_this.style.color = '#3399ff';
_this.style.textDecoration = 'underline';
_this.style.borderColor = '#2175bc';
}
// ]]>
相关文章推荐
- js事件分类
- js事件处理
- js方面的书籍推荐
- 盖房子优化3
- 盖房子优化2
- 盖房子优化1
- 盖房子
- JS类的定义方法
- javascript第三天笔记
- JSP中out.write()和out.print()的区别
- JSP中out.write()和out.print()的区别
- JSP中out.write()和out.print()的区别
- Three.js学习笔记 – “我和小伙伴都惊呆了”的特效和Three.js初探
- 20个令人印象深刻的例子学习Three.js实现WebGL
- 解决js中文输入法下keyCode总为229的问题
- JavaScript闭包(Closure)学习笔记
- JS定时器案列图片轮播
- JavaScript中的函数的参数(简单类型,引用类型)+图解
- 【JavaScript高级程序设计】--第2章 在HTML中使用JavaScript
- JavaScript笔记