说到js,很大一部分人会说我很熟悉,在日常的web开发中经常用,那么你的js代码是符合面对对象思路的吗?那你会问我面向过程的js代码有什么不好吗?我的感受是面对对象的js编码更加简洁,减少了混乱,可维护行增强,适合编写富客户端时应用。
好了,首先看看js里如何定义对象:
<html> <head> <script type="text/javascript"> var obj=new Object(); obj.name='josh'; obj.age='26'; console.log(obj.name); console.log(obj.age); </script> </head> <body> </body> </html></span>
大家可以用firebug的console看下运行结果。在这段非常简单的代码中,我们new了一个Object型的对象,如果学过像java或C#这样面向对象语言的人,对这样的对象定义方式一定非常熟悉,只不过开头的变量定义换成了var,这是由于js是弱类型的缘故。
Object类型属于js的内置对象类型,定义了obj之后,我们给obj的name和age属性进行了赋值。这里需要注意的事,js的对象可以动态添加属性和方法,不像java,对象只能包含类的内容。我们在上面的代码中再添加两个方法:
var obj=new Object(); obj.name='josh'; obj.age='26'; obj.getName=function(){ return this.name; } obj.getAge=function(){ return this.age; } console.log(obj.getName()); console.log(obj.getAge());
既然能添加,也能删除:
var obj=new Object(); obj.name='josh'; obj.age='26'; obj.getName=function(){ return this.name; } obj.getAge=function(){ return this.age; } delete obj.age; delete obj.getAge; console.log(obj.age); //undefined console.log(obj.getAge()); //obj.getAge is not a function
那么js对象的动态添加属性方法的机制是什么呢?在最根本的层面上,js对象是一个属性的集合,非常类似于其他语言中的哈希表,或者在java里更为常用的map,因此我们可以再使用的任何时候,动态的添加属性或方法。
在js中,对象被认为是引用类型,为不同的变量赋相同对象的话,那么执行的就是同一对象
var obj=new Object(); obj.name='josh'; obj.age='26'; obj.getName=function(){ return this.name; } obj.getAge=function(){ return this.age; } obj1=obj; obj.age='30'; console.log(obj1.getAge());
好了,上面的用的object对象,属于js的内置对象,除了Object类型还有Function,Array,Date,Error,Regexp,这些内置对象类型都属于引用类型
var func=new Function('console.log("Hi");'); var arr=new Array('Eric','lisa','josh'); var date=new Date(); var error=new Error("something bad happen"); var reg=new RegExp('\\d+');
js还提供了5中原始类型:分别是Boolean,Number,String,Null,Undefined。
//string var name='Eric'; var selection='a'; //number var num=10; var f=1.1; //boolean var flag=false; //null var obj=null; //undefined var ref;
大家需要知道的事,Number类型既可以包含整形,也可以包含浮点型。这里也需要说说null和undefined的区别,undefined表示变量定义了,但未初始化,null表示对象不存在。
之所以介绍原始类型,是因为大家平常会见到这样的代码:
var name='Eric'; var lowcasename=name.toLowerCase(); //eric var fistLetter=name.charAt(0); //E
就是在原始类型的的变量上调用了方法,这其实是js的内容为我们实现了一个装箱的机制
var name='Eric'; // 将原始类型使用new建立了一个对应的对象类型 var temp=new String(name); var lowcasename=temp.toLowerCase(); //eric var fistLetter=temp.charAt(0); //E
除了上述使用new的方式简历对象,还可以使用literal Form(字符串)的方式
//new object 的方式 var obj=new Object(); obj.name='josh'; obj.age='26'; obj.getName=function(){ return this.name; } obj.getAge=function(){ return this.age; } //literal Form var obj1={ name:'josh', age:'26', getName:function(){ return this.name; }, getAge:function(){ return this.age; } } //new Array的方式 var arr=new Array('Eric','lisa','josh'); //literal Form var arr1=['Eric','lisa','josh'];
至此,本文讲了 js对象动态增删属性及其机制,js的内置原始类型和引用类型 还有对象的两种定义方式,有了这些基础,我们后将陆续讲解js对象的方方面面,包括继承、封装和多态。