web前端教程之javascript创建对象的方法

今天给大家讲讲javascript基础教程中的javascript面向对象的技术,这一次我们深入的学习一下JavaScrip基于t面向对象之创建对象,关于面向对象的一些术语这里就不给大家介绍了,不了解的朋友可以自行去查看。

使用预定义对象只是面向对象语言的能力的一部分,它真正强大之处在于能够创建自己专用的对象。

ECMAScript 拥有很多创建对象的方法。

一原始方式

因为对象的属性可以在对象创建后动态定义,所有许多开发者都在JavaScript 最初引入时编写类似下面的代码:

[javascript]

1. var Car = new Object();

2. Car.color = "blue";

3. Car.doors = 4;

4. Car.mpg = 25;

5. Car.showColor = function() {

6.     return this.color;

7. };

8. document.write(Car.showColor());//输出:blue

在上面的代码中,创建对象Car。然后给它设置几个属性:它的颜色是蓝色,有四个门,每加仑油可以跑 25 英里。最后一个属性实际上是指向函数的指针,意味着该属性是个方法。执行这段代码后,就可以使用对象Car。不过这里有一个问题,就是可能需要创建多个Car的实例,这样就造成了我们会重复许多类似的代码,这样会很麻烦。

二工厂方式

要解上述的多个类似对象声明的问题,开发者创造了能创建并返回特定类型的对象的工厂方式。这种方式就是为了解决实例化对象产生大量重复的问题。

(1)无参数的工厂方式

例如,函数createCar()可用于封装前面列出的创建Car对象的操作:

[javascript]

1. function createCar() {

2. var TempCar = new Object();

3. TempCar.color = "blue";

4. TempCar.doors = 4;

5. TempCar.mpg = 25;

6. TempCar.showColor = function() {

7.        return this.color;

8.   };

9.   return TempCar;

10. };

11. var Car1 = createCar();

12. var Car2 = createCar();

13. document.write(Car1.showColor()+"<br/>");//输出:blue

14. document.write(Car2.showColor());//输出:blue

在这里,第一个例子中的所有代码都包含在createCar()函数中。此外,还有一行额外的代码,返回TempCar 对象作为函数值。调用此函数,将创建新对象,并赋予它所有必要的属性,复制出一个我们在前面说明过的Car对象。

因此,通过这种方法,我们可以很容易地创建Car对象的两个版本(Car1和 Car2),它们的属性完全一样。

(2)有参数的工厂方式

我们还可以修改createCar()函数,给它传递各个属性的默认值,而不是简单地赋予属性默认值:

[javascript]

1. function createCar(Color,Doors,Mpg) {

2.   var TempCar = new Object();

3.   TempCar.color = Color;

4.   TempCar.doors = Doors;

5.   TempCar.mpg = Mpg;

6.   TempCar.showColor = function() {

7.        return this.color;

8.   };

9.   return TempCar;

10. };

11. var Car1 = createCar("red",4,23);

12. var Car2 = createCar("blue",3,25);

13. document.write(Car1.showColor()+"<br/>");//输出:red

14. document.write(Car2.showColor());//输出:blue

给createCar()函数加上参数,即可为要创建的Car对象的color、doors 和mpg属性赋值。这使两个对象具有相同的属性,却有不同的属性值。

工厂方式解决了重复实例化的问题,但是还是有一个问题,那就是前面的例子中,每次调用函数createCar(),都要创建新函数showColor(),意味着每个对象都有自己的 showColor() 版本。而事实上,每个对象都共享同一个函数。

有些开发者在工厂函数外定义对象的方法,然后通过属性指向该方法,从而避免这个问题:

[javascript]

1. function showColor() {

2.      return this.color;

3. };

4. function createCar(Color,Doors,Mpg) {

5.   var TempCar = new Object();

6.   TempCar.color = Color;

7.   TempCar.doors = Doors;

8.   TempCar.mpg = Mpg;

9.   TempCar.showColor = showColor;

10.   return TempCar;

11. };

12. var Car1 = createCar("red",4,23);

13. var Car2 = createCar("blue",3,25);

14. document.write(Car1.showColor()+"<br/>");//输出:red

15. document.write(Car2.showColor());//输出:blue

在上面这段重写的代码中,在函数 createCar()之前定义了函数 showColor()。在createCar()内部,赋予对象一个指向已经存在的 showColor() 函数的指针。从功能上讲,这样解决了重复创建函数对象的问题;但是从语义上讲,该函数不太像是对象的方法。所有这些问题都引发了开发者定义的构造函数的出现。

三构造函数方式

创建构造函数就像创建工厂方式的函数一样容易。第一步选择构造函数的名字。根据惯例,这个名字的首字母大写,以使它与首字母通常是小写的变量名分开。除了这点不同,构造函数看起来很像工厂方式的函数。请看下面的例子:

[javascript]

1. function Car(Color,Doors,Mpg) {

2.   this.color = Color;

3.   this.doors = Doors;

4.   this.mpg = Mpg;

5.   this.showColor = function() {

6.        return this.color;

7.   };

8. };

9. var Car1 = new Car("red",4,23);

10. var Car2 = new Car("blue",3,25);

11. document.write(Car1.showColor()+"<br/>");//输出:red

12. document.write(Car2.showColor());//输出:blue

下面为您解释上面的代码与工厂方式的差别。首先在构造函数内没有创建对象,而是使用this关键字。使用new运算符构造函数时,在执行第一行代码前先创建一个对象,只有用this才能访问该对象。然后可以直接赋予this属性,默认情况下是构造函数的返回值(不必明确使用 return 运算符)。现在,用new运算符和对象名Car创建对象,就更像 ECMAScript 中一般对象的创建方式了。

就像工厂方式的函数,构造函数会重复生成函数,为每个对象都创建独立的函数版本。不过,与工厂方式的函数相似,也可以用外部函数重写构造函数,同样地,这么做语义上无任何意义。这正是下面要讲的原型方式的优势所在。

时间: 2024-10-07 18:09:55

web前端教程之javascript创建对象的方法的相关文章

web系列教程之php 与mysql 动态网站 。检索 与更新。

接着上次WEb 系列开发之php 与mysql动态网站入门. 个人觉得,学习技术就像一棵大树,主干很重要,枝叶其次.对于学习技术,我们应该分清主次关系.怎么学?为什么要学?有一个较好的分寸. 有时候觉得 国内有些教育,从一开始就从枝叶 细节说的很清楚.说了一大堆,就是很散的感觉,虽然有很多知识.但是学的人呢,并不清楚这个的实际应用, 这样会导致学习兴趣的缺失.个人觉得 就比如 php 和mysql吧,虽然我也不是高手,但就学习上面还是能评论几句的,比如我从表单开始 讲表单的注册,也就是 网站会员

腾讯Web前端开发框架JX(Javascript eXtension tools)

转自:Web前端开发-Web前端工程师 » 腾讯Web前端开发框架JX(Javascript eXtension tools) JX – Javascript eXtension tools 一个类似 Google Closure Library 的 Web 前端开发框架,服役于 WebQQ 等大规模的 WebApp简介JX 是模块化的非侵入式Web前端框架,最新开源地址:https://github.com/AlloyTeam/JX. JX 框架同时适用于 Web Page 和 Web App

好程序员web前端教程分享JavaScript简写方法

今天好程序员web前端教程为大家分享JavaScript简写方法,小伙伴们快来看一看吧. 1.三元操作符 当想写if...else语句时,使用三元操作符来代替. constx =20; let answer; if(x >10) { answer ='is greater'; }else{ answer ='is lesser'; } 简写: constanswer = x >10?'is greater':'is lesser'; 也可以嵌套if语句: constbig = x >10

为什么Web前端语言只有JavaScript?

Web前端选择语言的标准个人认为有以下几点: 一. 浏览器的支持 1.浏览器不同厂家,不同内核可以共同解析,且支持和性能选择最好的语言 2.JavaScript作为浏览器时代最早产生且经过浏览器大战及历史的沉淀中脱颖而出的语言,且成Web前端第一套标准,也是Web前端唯一一套成熟的标准. 二. 众多语言的性能及兼容方面 1.javaScript作为所有浏览器内核兼容性最好.性能最优的前提,作为Web前端支持语言中的王者也是必然. 2.javaScript本身的基于对象的特点及松散类型物特点也决定

JavaScript教程之jQuery - AJAX load() 方法

jQuery - AJAX load() 方法 jQuery load() 方法 jQuery load() 方法是简单但强大的 AJAX 方法. load() 方法从服务器加载数据,并把返回的数据放入被选元素中. 语法: $(selector).load(URL,data,callback); 必需的 URL 参数规定您希望加载的 URL. 可选的 data 参数规定与请求一同发送的查询字符串键/值对集合. 可选的 callback 参数是 load() 方法完成后所执行的函数名称. 这是示例

JavaScript教程之JavaScript 闭包

JavaScript 变量可以是局部变量或全局变量. 私有变量可以用到闭包. 全局变量 函数可以访问由函数内部定义的变量,如: 实例 function myFunction() {    var a = 4;    return a * a;} 尝试一下 ? 函数也可以访问函数外部定义的变量,如: 实例 var a = 4;function myFunction() {    return a * a;} 尝试一下 ? 后面一个实例中, a 是一个 全局 变量. 在web页面中全局变量属于 wi

javascript创建对象和方法(this)

1.创建对象: 参考链接 记住:JavaScript的原型链:所有对象都是实例,所谓继承关系就是将一个对象的原型指向另一个对象. 2.方法(this详解): 参考链接 记住:this指针只在函数内指向当前对象,在函数内部定义的函数,this又指向undefined了!(在非strict模式下,它重新指向全局对象window!)

web前端习总结--JavaScript

JavaScript 什么是JavaScript JavaScript是嵌入HTML中在浏览器中的脚本语言,有与Java和C语言类似的语法 一种网页编程技术,用来向HTML页面添加交互行为 直接嵌入HTML页面 由浏览器解释执行代码,不进行预编译 JavaScript 的特点 可以使用任何文本编辑工具编写 由浏览器内置的JavaScript引擎执行代码 解释执行:事先不编译,逐行执行 基于对象:内置大量现成对象 适宜: 客户端数据计算 客户端表单合法性验证 浏览器事件的触发 网页特殊显示效果制作

JavaScript教程之JavaScript就这么回事

JavaScript就这么回事1-5(转的一个不错的JavaScript基础教程)2008年01月06日 星期日 13:55JavaScript就这么回事1-5(转的一个不错的JavaScript基础教程) 有些时候你精通一门语言,但javascript教程是会发现你其实整天在和其它语言打交道,也许你以为这些微不足道,不至于影响你的开发进度,但恰恰是这些你不重视的东西会浪费你很多时间,我一直以为我早在几年前就已经精通JavaScript了,直到目前,我才越来越觉得JavaScript远比我想象的