`
bevis.cn
  • 浏览: 154632 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

jQuery学习之JavaScript变量

阅读更多
平时工作中知道,要会用一门技术很简单,Google一下,然后再Copy+Paste,再修改一下就好了。可是往往我们是知其然不知其所以然。当真正碰到客户提一两个问题的时候,就会呆在那里,不知道从哪里下手,问其原因,得到的回答是:当初看到网上是这样的,不知道怎么修改。

这就给我们实际的工作带来很多麻烦。要用jQuery,就要看jQuery的源码,不能说全部看懂,但是大体的一些结构和用法要熟,这样才能以不变应万变。另外我相信jQuery之所以一出来就受到很多从业人员的喜欢,一定有它的道理,从里面的细节可以看到大师们是怎么用JavaScript的,会让我们 受益匪浅,会是你成长的催化剂。

看到jQuery的源码,会发现和其它的extjs,dojo等框架一样,用到了很多我们平时用不到的JavaScript的特性。因为平时很多属性都没有用到过。下面就还是一样从最基本的开始,虽说是基础,但是很重要。

一,JavaScript变量的认识
    1. 和JVM内部有分堆和栈一样,不同的区域来存放的东西不一样。JavaScript解释器里也是一样。在 JavaScript 中,变量可以存放两种类型的值,即原始值和引用值。
        (1)原始值是存储在栈(stack)中的简单数据段,也就是说,它们的值直接存储在变量访问的位置。
        (2)引用值是存储在堆(heap)中的 对象,也就是说,存储在变量处的值是一个指针,指向存储对象的内存处。
    2.原始值有:Undefined,Null,Boolean,String,Number五种类型。因为这五种类型,占用内存多大的空间是固定的,而且占用空间相对软小,所以会选择存放在stack中。在栈中除天存放以上五种原始值类型,还要存放一个值 ,就是引用值的地址(也是假如一个Function,Object等,他们本身是对象,是存放在heap中的,但是解释器要去引用这些对象的时候是通过地址去引用)这些程序里面的存对象的地址这种类型,长度大小也是固定的。所以存放在在heap中对象的地址也是存放在stack中的。
比如Date类型就是存放在heap中,请看下面的例子:
<html>
<head>
<script type="text/javascript">
function seeResult(){
   var day1=new Date();
   alert('First: day1='+DateDemo(day1)+',ms='+day1.getTime());
   var day2=day1;
   day2.setMilliseconds(day2.getMilliseconds()+1);
   alert('Second: day1='+DateDemo(day1)+',ms='+day1.getTime());
}
function DateDemo(d){
   var s = "";   
   s += (d.getMonth() + 1) + "/"; 
   s += d.getDate() + "/"; 
   s += d.getFullYear(); 
   return(s); 
}
</script>
</head>
<body>
<h1 id="myHeader" onclick="seeResult()">点击我,查看结果</h1>
</body>
</html>

stack中的两个地址day1和day2都指向heap中的同一个Date对象,所以在day2对应的Date上加一个毫秒,输出day1的两次毫秒数会不一样。
我以前刚写JavaScript的时候犯过这样的错误,@@!


二,五种原始值
上面有提到JavaScript中原始值有五种,分别是Undefined,Null,Boolean,Number,String,那么JS解释器是用什么来判断的呢。或者说我们如何来判断呢!
先看一个运算符typeof
typeof运算符需要一个参数,这个参数就是你要让typeof检查的变量:
比如:
var name="bevis";
var age = 29;
alert(typeof name);
alert(typeof age);

上面这段代码输出的结果分别是string,number
下面结一个对照关系:
typeof运算的结果        输入的变量
------------------------------------------
undefined               Undefined类型变量
boolean                 Boolean类型变量
number                  Number类型变量
string                  String类型变量
object                  引用类型变量或Null类型

运好typeof对我们程序会带来很多方便!

2.Undefined类型
Undefined类型只有一个值undefined,当声明一个变量的时候,没有对变量赋值的时候,这个变量就会被赋值undefined值。
通过下面语句可以证明:
var name;
alert(typeof name);//输出为undefined
alert(name==undefined);//输出为true


还有一种情况需要注意:
var name;
alert(typeof name);//输出为undefined
alert(typeof myname);//输出为undefined
alert(name=="undefined");//输出为false
alert(name==undefined);//输出为true

对以上代码得出如下结论:
      (1)name变量定义了没有赋值,所以用typeof输出结果为undefined,可是myname前面没有定义过,输出结果也为undefined。所以输出结果为undefined时,这个变量有可能是没有定义过,也可能是定义过了没有赋值。
而且要特别注意的时,因为没有定义过的变量过用typeof是可以的,而且也可以输出值,但是如果对mynqme进行如下运用alert(myname==undefined);时就会出错,因为变量要先用声明再使用。
      (2)undefined和字符串"undefined"不相等,undefined不是字符串,而是一种数据类型。


3.Null类型
Null类型,它也只有一个值null
null表示尚不存在的对象
alert(typeof null);//输出为"object"
alert(null==undefined);//输出为true,因为undefined派生于null


其实对于JavaScript最迷惑的两个就是Null和Undefined类型。

再补充一点,
前面用typeof进行比较时,如果原始类弄的话,调用typeof是输出相应的类型,如果对引用类型用typeof的话,总是输出object
如果要判断对象是不是哪种类型的对象,就要用instanceof
var name="bevis";
alert(typeof name);//输出为string
alert(name instanceof String);//输出为false
name= new String("bevis");
alert(typeof name);//输出为string object
alert(name instanceof String);//输出为true

分享到:
评论
4 楼 JackAndroid 2009-11-24  
typeof是有问题,即使是typeof Null,结果却是object.不过使用constructor能支持多态吗?

一般而言,我都使用instanceof.
3 楼 Teok 2009-11-23  
typeof 是有些问题,不能准确的得到type of。。这个已经被有人归类为js的糟粕部分。
2 楼 bevis.cn 2009-11-17  
这个我倒是很少用constructor,以后我试试看看
1 楼 飞雪无情 2009-11-17  
对于对象类型的判断我倾向于用对象的constructor属性,因为这样能更准确,下面看的小例子:
   var name="张三";
		function User(name,age){
			this.name=name;
			this.age=age;
		}
		var myUser=new User("李四",18);
		//下面四个输出都是true
		//下面是typeof示例
		alert(typeof name==="string");//是字符串string
		alert(typeof myUser==="object");//是字符串object
		//下面是constructor示例
		alert(name.constructor===String);//是类String
		alert(myUser.constructor===User);//是自定义类User


使用constructor属性的好处是能准确的判断变量是哪个类的示例,这对于自定义类最有用,因为用typeof判断自定义类的实例(就是那个myUser)返回的永远都是object,这样我们就不好区分到底是哪个类的实例了,采用constructor属性就可以解决这个问题。

相关推荐

    javascript and jquery学习笔记与资料

    这里,我们有针对这两个主题的学习笔记和参考资料,包括JavaScript培训、jQuery API、JavaScript基础、函数详解以及jQuery使用手册等内容。让我们逐一探讨这些知识点。 首先,`JavaScript培训.zip`可能包含的是对...

    JavaScript和jquery实战手册

    在实战中,学习如何将JavaScript和jQuery结合,可以创建出高效、用户友好的Web应用。例如,通过JavaScript进行前端验证,确保用户输入的数据符合规范;使用jQuery简化DOM操作,提高代码可读性和效率;利用Ajax实现无...

    jQuery和JavaScript使用小案例

    学习这些案例时,应重点理解它们是如何利用jQuery的便利性来简化JavaScript代码的,同时也要了解JavaScript的基础语法和原生API,以便在不适用jQuery或者需要更底层控制时能灵活应对。这些案例对于初学者来说是一份...

    JQuery学习资料

    例如,闭包可以用于创建私有变量,原型链则解释了如何通过对象之间的继承关系共享属性和方法,这对于理解JQuery的面向对象编程有很大帮助。 最后,`程序员常用javascript特效`可能是关于使用JQuery实现的各种常见...

    《JavaScript和jQuery实战手册》PDF

    JavaScript语法简洁,易于学习,但同时也具有强大的功能,如变量、数据类型、控制结构(条件语句、循环)、函数、对象和类等。在本书中,读者将学习如何利用这些基本概念来构建复杂的交互式网页应用。 JavaScript的...

    JavaScript+jQuery程序设计 源码

    通过分析和实践这个"JavaScript+jQuery程序设计 源码",学习者不仅能巩固JavaScript和jQuery的基础知识,还能提升实际项目开发经验,尤其是处理网页交互和动态效果的能力。同时,这也将有助于理解和应用更多高级特性...

    jquery+纯生javascript写的适合初学者

    在这个项目中,初学者可以学习到如何使用JavaScript操作DOM元素来创建游戏界面,处理用户输入,以及用jQuery进行动态更新。可能涉及的知识点包括事件监听、逻辑判断(检查是否有五子连珠)、数组遍历和一些基本的...

    jQuery.JavaScript与CSS开发入门经典

    1. **基础概念**:理解HTML结构、CSS选择器、JavaScript变量和数据类型等基础知识。 2. **DOM操作**:掌握如何使用JavaScript和jQuery来查找、修改和创建DOM元素。 3. **事件处理**:学习JavaScript和jQuery的事件...

    众妙之门 JavaScript与jQuery技术精粹

    在书中,你会学习到JavaScript的基础语法,包括变量、数据类型、运算符、流程控制(如条件语句和循环)、函数以及对象。同时,深入理解原型链、闭包、异步编程(如回调函数、Promise和async/await)等高级特性也是必...

    深入理解jquery和javascript系列

    深入理解JavaScript和jQuery是Web开发中的重要课题,这两者都是前端开发者不可或缺的工具。JavaScript作为浏览器端的主要脚本语言,负责动态交互,而jQuery则是一个轻量级的库,极大地简化了JavaScript的DOM操作,...

    精通JavaScript与jQuery

    JavaScript和jQuery是Web开发中的两个重要工具,它们在创建交互式和动态网页方面发挥着关键作用。对于初学者来说,理解和掌握这两者是至关重要的。 JavaScript,作为一种强大的客户端脚本语言,是所有现代网页开发...

    精通JavaScript jquery之父力作 附源码

    《精通JavaScript:jQuery之父力作 附源码》是一本深入探讨JavaScript编程技术的书籍,作者在jQuery领域的权威使得这本书具有极高的学习价值。本书旨在帮助读者从基础到高级,全面掌握JavaScript语言,尤其注重实际...

    jQuery JavaScript与CSS开发入门经典 源码

    JavaScript的基本语法、变量、数据类型、控制结构、函数以及对象等都是学习的重点。书中源码将展示如何利用JavaScript实现计时器、表单验证、AJAX请求等实际应用。 CSS(层叠样式表)则是用于描述HTML或XML(包括如...

    《JavaScript和jQuery实战手册 原书第3版》PDF

    《JavaScript和jQuery实战手册 原书第3版》是一本深入浅出的编程指南,专为想要掌握JavaScript和jQuery的开发者所设计。这本书详细介绍了这两种技术的核心概念、语法以及在实际开发中的应用,旨在帮助读者提升Web...

    jquery下载,javascript框架

    要学习jQuery和JavaScript框架,你可以通过以下步骤: 1. **理解基础**:首先,了解JavaScript的基础知识,包括变量、数据类型、控制流、函数和对象。 2. **学习jQuery**:阅读jQuery官方文档,理解选择器、DOM...

    2016javascript+jquery学习文档

    本资源包“2016javascript+jquery学习文档”涵盖了这两个领域的基础知识和高级技巧,适合初学者和有一定经验的开发者进行学习和提升。 JavaScript是一种轻量级的解释型编程语言,它是网页开发的标准组成部分,主要...

    精通JavaScript(源代码) jQuery之父John Resig所写

    《精通JavaScript(源代码)》是由jQuery之父John Resig撰写的高级JavaScript技术书籍,它不仅深入探讨了JavaScript的核心概念,而且重点解析了jQuery库的内部工作机制,为读者揭示了JavaScript编程的深层次奥秘。...

    精通JavaScript+jQuery(实例)

    在这个"精通JavaScript+jQuery(实例)"的教程中,你将深入学习这两种技术,并通过一系列的实例来提升你的技能。 JavaScript,作为一门客户端脚本语言,是网页动态效果的核心。它允许开发者在用户与网页交互时进行...

    javascript+jQuery基础教程 各种精讲课程多套书籍.rar

    通过阅读这些书籍和教程,你可以系统地学习 JavaScript 和 jQuery 的基础知识,并通过实践应用巩固理论知识,从而成为一名熟练的前端开发者。在学习过程中,建议结合实际项目进行练习,这将有助于更好地理解这些技术...

    众妙之门——JavaScript与jQuery技术精粹

    《众妙之门——JavaScript与jQuery技术精粹》是一本由Smashing Magazine出版的高端IT图书,它汇聚了全球顶尖网站设计专家的经验与智慧,旨在深入解析JavaScript和jQuery的关键技术,帮助读者提升在网页设计与开发中...

Global site tag (gtag.js) - Google Analytics