JavaScript并不是面向对象的程序设计语言,但它是基于对象的。JavaScript中的每个函数都可用于创建对象,返回的对象既是该对象的实例,也是object的实例 。
一.对象与关联数组
JavaScript中的对象本质上是一个关联数组,就像Java里的Map数据结构,有一组key-value对组成,不同的是JavaScript对象的value不仅可以是值,也可以是函数,该函数就是该对象的方法。
当value是基本类型的值或者复合类型的值的时候,此时value就是该对象的属性值。
因此访问某个JavaScript对象时,不仅可以使用obj.propName的形式,也可以采用obj[propName]的形式,有时候必须使用这种形式。
<script type="text/javascript"> function Person(name,age) { this.name = name; this.age = age; this.info = function(){ alert("info方法"); } } var p = new Person('Sherman',30); for(propName in p) { document.writeln("p对象的"+propName+"属性的属性值是"+p[propName]+'<br/>') } </script>
二.继承和prototype
JavaScript没有提供显示的继承语法,每个对象都是object的子类,因而各对象之间平等,各对象之间不存在直接的父子关系。
JavaScript提供了一些内建类,,通过这些内建类可以方便的创建各自对象。
JavaScript是一种动态语言,允许自由地为对象增加属性和方法,当程序为对象不存在的属性赋值时,即可认为为该对象增加属性,例如
var p = {} p.age=30; p.info = function(){ alert('info方法'); }
JavaScript的所有类都有一个protoType属性,如果为JavaScript类的protoType的属性增加属性,方法,则可视为对原有类的拓展。我们可以理解为:增加了protoType属性的类继承了原有的类,
这是JavaScript的伪继承机制。看下面代码:
<script type="text/javascript"> function Person(name,age) { this.name = name; this.age = age; this.info = function(){ document.writeln('姓名:'+this.name+'<br/>'); document.writeln('年龄:'+this.age+'<br/>'); } } var p1 = new Person('Sherman',23); p1.info(); Person.prototype.walk = function() { document.writeln(this.name+'慢慢的溜达...<br/>') } document.writeln('<hr/>'); var p2 = new Person('Leegang',30); p2.walk(); p1.walk(); </script>
注意的是,伪继承的本质是修改了原有的类,并不是产生新的子类
通过使用protoType属性可以为JavaScript内建类进行拓展
<script type="text/javascript"> Array.prototype.indexof = function(obj) { var result = -1; for(var i = 1;i < this.length;i++) { if(this[i] == obj){ result = 1; break; } } return result; } var arr = [4,5,7,-2]; alert(arr.indexof(-2)); </script>
此外,protoType代表了该类的原型对象,在默认情况下,JavaScript类的protoType属性值是一个对象,将JavaScript类的protoType设为父类实例,可实现JavaScript的继承,例如:
<script type="text/javascript"> function Person(name,age) { this.name = name; this.age = age; } Person.prototype.sayHello = function() { console.log(this.name+'向您打招呼'); } var per = new Person('牛魔王',30000); per.sayHello(); function Student(grade) { this.grade = grade; } Student.prototype = new Person('未命名',0); Student.prototype.intro = function() { console.log("%s是个学生,读%d年级",this.name,this.grade); } var stu = new Student(5); stu.name = '孙悟空'; console.log(stu instanceof Student);//输出true console.log(stu instanceof Person);//输出true stu.sayHello(); stu.intro(); </script>
三.构造器实现伪继承
实现代码如下:
<script type="text/javascript"> function Person(name,age) { this.name = name; this.age = age; this.sayHello = function() { console.log(this.name+'向您打招呼!'); } } var per = new Person('牛魔王',30000); per.sayHello(); function Student(name,age,grade) { this.a = Person; this.a(name,age); this.grade = grade; } Student.prototype.intro = function() { console.log("%s是个学生,读%d年级",this.name,this.grade); } var stu = new Student('孙悟空',34,5); console.log(stu instanceof Student);//输出true console.log(stu instanceof Person);//输出true stu.sayHello(); stu.intro();</script>
四.使用apply或call实现伪继承
实现代码如下:
<script type="text/javascript"> function Person(name,age) { this.name = name; this.age = age; this.sayHello = function() { console.log(this.name+'向您打招呼!'); } } var per = new Person('牛魔王',30000); per.sayHello(); function Student(name,age,grade) { //this.a = Person; // this.a(name,age); Person.call(this,name,age); Person.apply(this,[name,age]); this.grade = grade; } Student.prototype.intro = function() { console.log("%s是个学生,读%d年级",this.name,this.grade); } var stu = new Student('孙悟空',34,5); console.log(stu instanceof Student);//输出true console.log(stu instanceof Person);//输出true stu.sayHello(); stu.intro(); </script>
输出结果同上
五.创建对象
JavaScript创建对象大致有3种方式:
1.使用new关键字调用构造器创建对象
2.使用object类创建对象
//创建一个默认的对象var obj = new Object();
这是空对象,没有任何属性和方法,但是JavaScript是动态语言,可以动态的为对象增加属性和方法
如下代码:
<script type="text/javascript"> var myobj = new Object(); myobj.name = 'Sherman'; myobj.age = 34; document.writeln(myobj.name+myobj.age);//输出Sherman34 </script>
3.使用Json语法创建对象
使用Json语法创建JavaScript对象时,属性值不仅可以是普通字符串,也可以是任何基本数据类型,还可以是数组,函数,甚至是另外一个JSON语法创建的对象。
Person = { name:'Sherman', gender:'male', son:{ name:'guoguo', grade:1 }, info:function() { document.writeln('姓名:'+this.name+'性别:'+this.gender); } } </script>
也可以使用JSON语法创建数组
arr = [vlue1,value2,value3,...]
如下代码,创建了一个复杂的JSON对象
Person = { name:'Sherman', age:29, schools:['小学','中学','大学'], parents:[{ name:'father', age:49, address:'广州' },{ name:'mother', age:51, address:'深圳' }] }