2014年辛星完全解读Javascript第六节 对象
随着面向对象的普及,现在很多语言都在支持面向对象,Javascript也不例外,所谓对象,就是拥有属性和方法的数据。这里的属性其实就是变量,这里的方法,其实就是函数。但是Javascript的面向对象和其他编程语言还是有很大区别的。
************对象*************
1.Javascript中的对象的定义“属性的无序集合,每个属性存放一个初始值、函数或者对象”,也就是说,对象是没有额定顺序的值的数组。
2.Javascript中的对象一般可以分为本地对象、内置对象、宿主对象和自定义对象。
3.本地对象可以包括Object、Function、Array、String、Boolean、Number、Date、Error等等。
4.所谓宿主对象就是给Javascript提供运行环境的对象,如果是浏览器的话,可以提供BOM和DOM。
5.内置对象有两个,一个是Global,一个是Math,这两个可以直接使用,不必实例化。
********工厂方法创建自定义对象*************
1.在Javascript中,创建自定义对象的方式有很多,比如我们直接创建,代码如下:
var person = new Object();
person.myname = "辛星";
person.myage = 23;
person.info = function(){
alert(this.myname+this.myage);
};
person.info();
2.它会弹出一个窗口,上面显示的文本信息是“辛星23”。上面代码中我们就创建了一个person对象,它有myname属性和myage属性,有一个info方法,然后我们调用了它的info方法。
3.但是这种方式有点问题,那就是它在创建多个对象的时候很麻烦,因此,我们可以使用工厂方法,我们用该方法来批量创建对象,代码如下:
function createPerson(myname,myage){
var person = new Object();
person.myname = myname;
person.myage = myage;
person.info = function(){
alert(this.myname+this.myage);
};
return person;
} createPerson("辛星",23).info();
createPerson("小倩",20).info();
4.然后我们就可以通过createPerson这个方法来快速的创建多个对象,这就是我们介绍的工厂方法创建对象。
**************构造函数的方式去创建*************
1.比如我们想创建一个person对象,它有两个属性myname和maage,那么代码如下:
function Person(myname,myage){
this.myname = myname;
this.myage = myage;
this.info = function(){
alert(myname+myage);
}
}
var p1 = new Person("辛星",23);
var p2 = new Person("小倩",20);
p1.info();
p2.info();
2.我们创建了Person对象,而p1和p2则是它的两个实例,然后我们调用了它们的方法,注意它使用的关键字并不是class,而是function。
3.我们还可以把Person对象的方法从该对象拿出来,写成独立的方法,看下面代码:
function Person(myname,myage){
this.myname = myname;
this.myage = myage;
this.info = info;
}
function info(){
alert(this.myname+this.myage);
}
var p1 = new Person("辛星",23);
var p2 = new Person("小倩",20);
p1.info();
p2.info();
4.需要注意的是这里的this.info= info后一个info是不需要加小括号的,它会自动寻找里面相对应的方法。
***********原型方式创建对象*****************
1.我们可以把构造函数做成空的构造函数,然后把所有的属性和方法直接赋值给prototype属性。
2.看下面示例代码:
function Person(){}
Person.prototype.myname = "辛星";
Person.prototype.myage = 23;
Person.prototype.info = function info(){
alert(this.myname+this.myage);
} var p = new Person("辛星",23);
p.info();
3.它的问题还是蛮多的,那就是所有的对象都引用同一个原型,导致我们创建第二个对象的实例的时候会很麻烦。
4.于是我们就可以把构造函数和原型结合起来,看如下代码:
function Person(myname,myage){
this.myname = myname;
this.myage = myage;
} Person.prototype.info = function info(){
alert(this.myname+this.myage);
} var p1 = new Person("辛星",23);
var p2 = new Person("小倩",20);
p1.info();
p2.info();
5.它既保留了构造函数的灵活性,又利用原型来避免多次定义,可以说还是非常不错的。
**************动态原型方式*************
1.其实它和上面的原型加构造函数的方式非常相似,只是多了一个判断,而且位置也略有变化,因此就成了动态原型。
2.看下面代码示例:
function Person(myname,myage){
this.myname = myname;
this.myage = myage;
if ( typeof Person._initialized == 'undefined'){
Person.prototype.info = function (){
alert(this.myname+this.myage);
};
Person._initialized = true ;
} } var p1 = new Person("辛星",23);
var p2 = new Person("小倩",20);
p1.info();
p2.info();
3.上面代码中的_initialized属性是属于整个Person对象的,并不属于某个实例,因此它只是在第一次被初始化的时候创建,之后就不用再创建了。
4.这种方法还是蛮好理解的,就是相当于把原型放到构造函数里面去了。
**************小结**************
1.本小节我们主要解读了Javascript的对象的创建方式,可能大家会感觉Javascript怎么那么多的创建方式。
2.确实,这种散乱的方式确实不是什么好现象,至少我认为应该规范成统一的接口才好。
2014年辛星完全解读Javascript第六节 对象的更多相关文章
- 2014年辛星完全解读Javascript第七节 数组和对象
由于Javascript是脚本语言,因此,使用起来非常方便,数组的使用也是比较简单的,下面我们就主要介绍一下Javascript中数组的介绍,以及上一节中没有完成的对象的介绍. *********** ...
- 2014年辛星完全解读Javascript第五节 break和continue与错误处理
先说一下break和continue的主要用法吧,break用于跳出循环,continue用于跳过该循环中的一个迭代.简单的说,就是break直接从该语句跳出,但是continue不会跳出该循环语句, ...
- 2014年辛星完全解读Javascript第四节 流程控制语句
上一节我们介绍了函数,本小节我们介绍一下流程控制语句,对于任何一门编程语言来说,流程控制都是非常重要的,也就是我们常说的顺序结构.选择结构和循环结构. ************选择结构******** ...
- 2014年度辛星css教程夏季版第六节
这一节我们就要讲到布局了,其实布局本身特别简单,但是要合理的布好局就不那么简单了,就像我们写文章一样,写一篇文章非常简单,但是要写一篇名著就很难了,这需要我们扎实的功底和对文学的理解,但是,千里之行, ...
- 2014年辛星完全解读Javascript第一节
***************概述*************** 1.Javascript是一种原型化继承的基于对象的动态类型的脚本语言,它区分大小写,主要运行在客户端,用户即使响应用户的操作并进行数 ...
- 2014年辛星完全解读Javascript第八节 json
json是JavaScript Object Notation的简写,它是一种轻量级的数据交换格式,而且表达上很容易靠字面去理解.json是用于存储和传输数据的格式,通常用于向服务器端传递数据. ** ...
- 2014年辛星完全解读Javascript第三节
经过第一节的入门和第二节的运算符,那么接下来我们就可以学习Javascript的函数了,当然了,不管大家之前学习的是什么编程语言,都会有函数的概念,如果大家学的是Pascal,还会有”过程“的概念,但 ...
- 2014年辛星完全解读Javascript第二节
本小节我们讲解一下Javascript的语法,虽然js语言非常简单,它的语法也相对好学一些,但是不学总之还是不会的,因此,我们来一探究竟把. ********注释************* 1.我们通 ...
- 2014年度辛星html教程夏季版第六节
不知道这样大家会不会感觉枯燥,总之不管大家怎么样,辛星始终会陪伴大家的,期待您的关注和支持,也衷心的希望我的博客能让您少走弯路,获得更系统的知识. ***************表格********* ...
随机推荐
- SQLServer-镜像配置
实验环境:三台服务器分别为主服务器,镜像服务器,见证服务器,都加入域sql.com 1. 分别在三台服务器上安装SQL 2008 R2,安装数据库引擎和管理工具两个组件即可. 2. 镜像前准备工作. ...
- linux编辑器 vi的使用
vi 编辑器的三个模式: 命令模式 开始就是命令模式 insert模式 i, I, a, A, o,O ,s, S 命令行模式 : i 在当前位置进入Insert模式 I 在行的头部进入Inser ...
- javaweb学习总结七(XML语言作用、语法)
一:XML语言的概念以及作用 1:xml概念:extensible Markup language,可扩展行标记语言,因为html的语法比较混乱,不够严谨. 用html写的系统不好维护,所以w3c组织 ...
- [转]WIN7服务一些优化方法
本文转自:http://bbs.cfanclub.net/thread-391985-1-1.html Win7的服务,手动的一般不用管他,有些自动启动的,但对于有些用户来说是完全没用的,可以考虑禁用 ...
- LeetCode 11
Container With Most Water Given n non-negative integers a1, a2, ..., an, where each represents a poi ...
- makefile中使用变量
makefile里的变量就像一个变量,变量的作用主要如下: (1)保存文件名列表. (2)保存编译器的参数. makefile中的变量是用一个字符串在makefile中定义的,这个文本串就是变量的值. ...
- Repeater控件中的LinkButton(转)
LinkButton小用法: 1.在使用时可以通过CommandName和CommandArgument属性联合起来绑定并传值,如:CommandName="record"Comm ...
- MakeFile 文件详解
GNU的make工作时的执行步骤入下:(想来其它的make也是类似) 1.读入所有的Makefile. 2.读入被include的其它Makefile. 3.初始化文件中 ...
- VS中的波浪线
绿色波浪线: 如果你的代码中出现了绿色的波浪线,说明你的代码语法并没有错误, 只不过提示你有可能会出现错误,但是不一定会出现错误.警告线 红色波浪线: 如果你的代码中出现了红色的波浪线,意味着你的代码 ...
- ps扩大、缩小选区
用"套索工具""魔棒工具"或者等工具将选区选出来,创建出一个需要处理的选区. 点击ps菜单栏中的"选择",在下拉菜单中选择"修 ...