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:'深圳'
}]
}

JavaScript三(对象思想)的更多相关文章

  1. JavaScript RegExp 对象的三种方法

    JavaScript RegExp 对象有 3 个方法:test().exec() 和 compile().(1) test() 方法用来检测一个字符串是否匹配某个正则表达式,如果匹配成功,返回 tr ...

  2. 从零构建JavaScript的对象系统

    一.正统的类与继承 类是对象的定义,而对象是类的实例(Instance).类不可直接使用,要想使用就必须在内存上生成该类的副本,这个副本就是对象. 以Java为例: public class Grou ...

  3. 关于JavaScript中对象的继承实现的学习总结

    一.原型链 JavaScript 中原型链是实现继承的主要方法.其主要的思想是利用原型让一个引用类型继承另一个引用类型的属性和方法.实现原型链有一种基本模式,其代码如下. function Super ...

  4. javascript学习-对象与原型

    javascript学习-对象与原型 Javascript语言是符合面向对象思想的.一般来说,面向对象思想需要满足以下三个基本要求: 封装,Javascript的对象可以自由的扩充成员变量和方法,自然 ...

  5. 浅谈javascript的面向对象思想

    面向对象的三大基本特性 封装(把相关的信息(无论数据或方法)存储在对象中的能力) 继承(由另一个类(或多个类)得来类的属性和方法的能力) 多态(一个对象在不同情况下的多种形态) 定义类或对象 第一种: ...

  6. 聚焦JavaScript面向对象的思想

    面向对象是一种软件开发方法,是一种对现实世界理解和抽象的方法,是计算机编程技术发展到一定阶段后的产物.随着时代的发展,计算机被用于解决越来越复杂的问题.一切事物皆对象,通过面向对象的方式,将现实世界的 ...

  7. 关于javascript自定义对象(来自网络)(最近几天不会的)

    javascript定义对象的几种简单方法 1.构造函数方式,全部属性及对象的方法都放在构造方法里面定义 优点:动态的传递参数 缺点:每创建一个对象就会创建相同的方法函数对象,占用大量内存 funct ...

  8. JavaScript 三个组成部分

    1.核心(ECMAScript) ECMAScript 仅仅是一个描述,定义了脚本语言的所有属性.方法和对象.其他语言可以实现 ECMAScript 来作为功能的基准,JavaScript 就是这样: ...

  9. javascript中对象的深度克隆

    记录一个常见的面试题,javascript中对象的深度克隆,转载自:http://www.2cto.com/kf/201409/332955.html 今天就聊一下一个常见的笔试.面试题,js中对象的 ...

  10. JavaScript日期对象使用总结

    javascript Date日期对象的创建 创建一个日期对象: var objDate=new Date([arguments list]); 我总结了参数形式主要有以下3种: new Date(& ...

随机推荐

  1. am335x phy led problem

    问题描述 连接网线的情况下,每次进行软件"reboot",网口的LINK LED能够正常的熄灭,而ACTIVE LED却是亮的. reboot重启之后,LINK的灯正常变亮,而AC ...

  2. e667. 在给定图像中创建缓冲图像

    An Image object cannot be converted to a BufferedImage object. The closest equivalent is to create a ...

  3. Javascript 严格模式 strict mode(转)

    一.概述 除了正常运行模式,ECMAscript 5添加了第二种运行模式:"严格模式"(strict mode).顾名思义,这种模式使得Javascript在更严格的条件下运行. ...

  4. linux -- Ubuntu查看修改mysql的登录名和密码、安装phpmyadmin

    安装好mysql后,在终端输入 mysql -u root -p 按回车,输入密码后提示access denied......ues password YES/NO的错误 原因是用户名或密码不对! 查 ...

  5. Erlang的Web库和框架

    ChicagoBoss,Nitrogen ,Zotontic,BeepBeep,ErlyWeb,Erlang Boss. 转自:http://bbs.chinaunix.net/thread-3764 ...

  6. YII2中的Html助手和Request组件

    Html助手 1 .在@app\views\test的index.php中: <?php //引入命名空间 use yii\helpers\Html; ?> <?php //[一]表 ...

  7. java web - 为什么要使用spring struts

    1.软件里有很多优秀的框架,有一种类型的框架,它的特点是建立在一个现有技术的基础上,提供和现有技术一样业务功能的技术框架,这个新的技术框架比原技术更加易用,更加健壮同时功能更加强大,例如:jQuery ...

  8. MathType如何编辑手写体l

    MathType在编辑公式不仅方便而且规范,并且能够根据自己的需要选择不同的字体进行使用,可以是正体也可以是斜体,可以是新罗马体,也可以是花体,这些用word公式编辑器MathType都是可以的.还有 ...

  9. 【matlab】使用VideoReader提取视频的每一帧,不能用aviread函数~

    这个问题是matlab版本问题,已经不用aviread函数了~ VideoReader里面没有cdata这个函数! MATLAB不支持avireader了,而且没有cdata这个属性了,详情去官网ht ...

  10. 手机web不同屏幕字体大小高度自适应

    body{font-size:0.6rem:} <script> //使用rem策略,不断更新html的fontsize (function(){     function sizeHtm ...