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第六节 对象

时间: 2024-08-07 21:53:49

2014年辛星完全解读Javascript第六节 对象的相关文章

2014年辛星完全解读Javascript第七节 数组和对象

由于Javascript是脚本语言,因此,使用起来非常方便,数组的使用也是比较简单的,下面我们就主要介绍一下Javascript中数组的介绍,以及上一节中没有完成的对象的介绍. **************数组************** 1.在Javascript中,声明一个数组太简单了,而且它支持三种方式,第一种方式是直接实例化一个Array,然后用下标的形式去添加,但是它不像PHP那样灵活,它不允许不写下标就向里面添加数据,因此,我们指定下标即可. 2.访问数组的成员就向C语言的数组那样访

2014年辛星完全解读Javascript第八节 json

json是JavaScript Object Notation的简写,它是一种轻量级的数据交换格式,而且表达上很容易靠字面去理解.json是用于存储和传输数据的格式,通常用于向服务器端传递数据. *************JSON************** 1.我们上一节介绍了对象,这一节我们将介绍json,json既然是一种数据的传输方式,那么它也必然会有自己的语法规则,它的语法规则如下:由大括号保存对象,由方括号保存数组,数据以键值对的方式存储,而且多个数据之间需要用逗号分开. 2.比如下

2014年度辛星html教程夏季版第六节

不知道这样大家会不会感觉枯燥,总之不管大家怎么样,辛星始终会陪伴大家的,期待您的关注和支持,也衷心的希望我的博客能让您少走弯路,获得更系统的知识. ***************表格***************** 1.在早些时候,那时候大家为了布局上的美观,会经常使用表格来布局,因为表格的布局比较整齐,我们只需要把表格的边框设置为0就可以让内容显示的很有条理了. 2.随着div+css的流行,表格布局越来越不被人所喜欢,甚至有人特别排斥表格,本来该用表格的地方也不用表格了,其实大可不必那么偏

2014年度辛星css教程夏季版第六节

这一节我们就要讲到布局了,其实布局本身特别简单,但是要合理的布好局就不那么简单了,就像我们写文章一样,写一篇文章非常简单,但是要写一篇名著就很难了,这需要我们扎实的功底和对文学的理解,但是,千里之行,始于足下,我们开始吧. ************显示方式************* 1.有时候我们会设置一个元素的显示方式,比如我们在做导航条的时候,就会使用display:inline来使它们成为内联的样式. 2.下面先不说这个display,先说一下visibility属性把,它可以设置为hid

2014年辛星完全解读html第五节

如果读者是一位后台开发者,那么肯定会知道什么叫表单,这里我们就介绍一下前台如何使用表单,表单的使用也是我们编写网页的必须经历的一关,而且,表单也往往是我们网站的漏洞和弱点出现的地方. *************表单************* 1.所谓表单,就是一个包含表单元素的区域,所谓表单元素,可以是输入文本的文本框,也可以是用于输入密码的密码框,还可以是各种各样的下拉框,还有可能是单选框和复选框. 2.表单通常需要定义一个方法,用属性method表示,它表示我们把数据提交给服务器后台所使用的

2014年度辛星完全解读html第七节

经过前面六节的学习,我们大致清楚了HTML教程中的基础内容,那么接下来我们开始继续向后推进,可以说,下面我们介绍一下HTML中的区块. ***************区块*************** 1.HTML中的大多数元素都被定义为块级元素或内联元素,块级元素在显示的时候,会以新行开始,比如我们前面讲到的h1标签,p标签,ol标签和table标签. 2.而内联元素则在显示的时候是不会另起一行的,它们会在后面显示,比如我们前面讲到的td标签,img标签,strong标签等等. *******

2014年度辛星html教程夏季版第七节

经过前面六节的学习,我们大致清楚了HTML教程中的基础内容,那么接下来我们开始继续向后推进,可以说,下面我们介绍一下HTML中的区块. ***************区块*************** 1.HTML中的大多数元素都被定义为块级元素或内联元素,块级元素在显示的时候,会以新行开始,比如我们前面讲到的h1标签,p标签,ol标签和table标签. 2.而内联元素则在显示的时候是不会另起一行的,它们会在后面显示,比如我们前面讲到的td标签,img标签,strong标签等等. *******

2014年度辛星html教程夏季版第五节

如果读者是一位后台开发者,那么肯定会知道什么叫表单,这里我们就介绍一下前台如何使用表单,表单的使用也是我们编写网页的必须经历的一关,而且,表单也往往是我们网站的漏洞和弱点出现的地方. *************表单************* 1.所谓表单,就是一个包含表单元素的区域,所谓表单元素,可以是输入文本的文本框,也可以是用于输入密码的密码框,还可以是各种各样的下拉框,还有可能是单选框和复选框. 2.表单通常需要定义一个方法,用属性method表示,它表示我们把数据提交给服务器后台所使用的

2014年度辛星html教程夏季版第四节

我们前面也涉及了HTML中的一些东西,接下来我们要涉及到图像了,如果没有图像,即使文字的样式再多,再复杂,终归还是单调的,我们就需要用图片来给我们的网页增加更多的表现形式. ***************图片****************** 1.我们用<img>标签来给我们的HTML文件导入一个图片,它是一个空标签,即它只包含属性,而且它没有相应的闭合标签,即它不用成对出现. 2.它的src属性应用于指定源属性地址,它可以是绝对路径,也可以是相对路径,还可以是一个网址,即一个URL,比如我