详解JavaScript基于面向对象之创建对象(1)_javascript技巧

这一次我们深入的学习一下JavaScript面向对象技术,在学习之前,必要的说明一下一些面向对象的一些术语。这也是所有面对对象语言所拥有的共同点。有这样几个面向对象术语:
一、对象
       ECMA-262把对象(object)定义为“属性的无序集合,每个属性存放一个原始值、对象或函数”。严格来说,这意味着对象是无特定顺序的值的数组。尽管ECMAScript如此定义对象,但它更通用的定义是基于代码的名词(人、地点或事物)的表示。
二、类
       每个对象都由类定义,可以把类看做对象的配方。类不仅要定义对象的接口(interface)(开发者访问的属性和方法),还要定义对象的内部工作(使属性和方法发挥作用的代码)。编译器和解释程序都根据类的说明构建对象。
三、实例
       程序使用类创建对象时,生成的对象叫作类的实例(instance)。对类生成的对象的个数的唯一限制来自于运行代码的机器的物理内存。每个实例的行为相同,但实例处理一组独立的数据。由类创建对象实例的过程叫做实例化(instantiation)。
       在前面的章节我们提到过,ECMAScript并没有正式的类。相反,ECMA-262把对象定义描述为对象的配方。这是 ECMAScript逻辑上的一种折中方案,因为对象定义实际上是对象自身。即使类并不真正存在,我们也把对象定义叫做类,因为大多数开发者对此术语更熟悉,而且从功能上说,两者是等价的。
       使用预定义对象只是面向对象语言的能力的一部分,它真正强大之处在于能够创建自己专用的对象。ECMAScript 拥有很多创建对象的方法。
1、原始方式
       因为对象的属性可以在对象创建后动态定义,所有许多开发者都在JavaScript 最初引入时编写类似下面的代码:

var Car = new Object();
Car.color = "blue";
Car.doors = 4;
Car.mpg = 25;
Car.showColor = function() {
  return this.color;
};
document.write(Car.showColor());//输出:blue

       在上面的代码中,创建对象Car。然后给它设置几个属性:它的颜色是蓝色,有四个门,每加仑油可以跑 25 英里。最后一个属性实际上是指向函数的指针,意味着该属性是个方法。执行这段代码后,就可以使用对象Car。不过这里有一个问题,就是可能需要创建多个Car的实例,这样就造成了我们会重复许多类似的代码,这样会很麻烦。
2、工厂方式
       要解上述的多个类似对象声明的问题,开发者创造了能创建并返回特定类型的对象的工厂方式。这种方式就是为了解决实例化对象产生大量重复的问题。
(1)无参数的工厂方式
       例如,函数createCar()可用于封装前面列出的创建Car对象的操作:

function createCar() {
var TempCar = new Object();
TempCar.color = "blue";
TempCar.doors = 4;
TempCar.mpg = 25;
TempCar.showColor = function() {
    return this.color;
 };
 return TempCar;
};
var Car1 = createCar();
var Car2 = createCar();
document.write(Car1.showColor()+"<br/>");//输出:blue
document.write(Car2.showColor());//输出:blue

       在这里,第一个例子中的所有代码都包含在createCar()函数中。此外,还有一行额外的代码,返回TempCar 对象作为函数值。调用此函数,将创建新对象,并赋予它所有必要的属性,复制出一个我们在前面说明过的Car对象。因此,通过这种方法,我们可以很容易地创建Car对象的两个版本(Car1和 Car2),它们的属性完全一样。
(2)有参数的工厂方式
       我们还可以修改createCar()函数,给它传递各个属性的默认值,而不是简单地赋予属性默认值:

function createCar(Color,Doors,Mpg) {
 var TempCar = new Object();
 TempCar.color = Color;
 TempCar.doors = Doors;
 TempCar.mpg = Mpg;
 TempCar.showColor = function() {
    return this.color;
 };
 return TempCar;
};
var Car1 = createCar("red",4,23);
var Car2 = createCar("blue",3,25);
document.write(Car1.showColor()+"<br/>");//输出:red
document.write(Car2.showColor());//输出:blue

       给createCar()函数加上参数,即可为要创建的Car对象的color、doors 和mpg属性赋值。这使两个对象具有相同的属性,却有不同的属性值。
       工厂方式解决了重复实例化的问题,但是还是有一个问题,那就是前面的例子中,每次调用函数createCar(),都要创建新函数showColor(),意味着每个对象都有自己的 showColor() 版本。而事实上,每个对象都共享同一个函数。有些开发者在工厂函数外定义对象的方法,然后通过属性指向该方法,从而避免这个问题:

function showColor() {
   return this.color;
};
function createCar(Color,Doors,Mpg) {
 var TempCar = new Object();
 TempCar.color = Color;
 TempCar.doors = Doors;
 TempCar.mpg = Mpg;
 TempCar.showColor = showColor;
 return TempCar;
};
var Car1 = createCar("red",4,23);
var Car2 = createCar("blue",3,25);
document.write(Car1.showColor()+"<br/>");//输出:red
document.write(Car2.showColor());//输出:blue

       在上面这段重写的代码中,在函数 createCar()之前定义了函数 showColor()。在createCar()内部,赋予对象一个指向已经存在的 showColor() 函数的指针。从功能上讲,这样解决了重复创建函数对象的问题;但是从语义上讲,该函数不太像是对象的方法。所有这些问题都引发了开发者定义的构造函数的出现。
3、构造函数方式
       创建构造函数就像创建工厂方式的函数一样容易。第一步选择构造函数的名字。根据惯例,这个名字的首字母大写,以使它与首字母通常是小写的变量名分开。除了这点不同,构造函数看起来很像工厂方式的函数。请看下面的例子:

function Car(Color,Doors,Mpg) {
 this.color = Color;
 this.doors = Doors;
 this.mpg = Mpg;
 this.showColor = function() {
    return this.color;
 };
};
var Car1 = new Car("red",4,23);
var Car2 = new Car("blue",3,25);
document.write(Car1.showColor()+"<br/>");//输出:red
document.write(Car2.showColor());//输出:blue

       下面为您解释上面的代码与工厂方式的差别。首先在构造函数内没有创建对象,而是使用this关键字。使用new运算符构造函数时,在执行第一行代码前先创建一个对象,只有用this才能访问该对象。然后可以直接赋予this属性,默认情况下是构造函数的返回值(不必明确使用 return 运算符)。现在,用new运算符和对象名Car创建对象,就更像 ECMAScript 中一般对象的创建方式了。
      就像工厂方式的函数,构造函数会重复生成函数,为每个对象都创建独立的函数版本。不过,与工厂方式的函数相似,也可以用外部函数重写构造函数,同样地,这么做语义上无任何意义。这正是下面要讲的原型方式的优势所在。在下篇文章中会详细的分析面向对象的原型方式以及其他综合的方式。

以上就是本文的全部内容,希望对大家的学习javascript程序设计有所帮助。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索JavaScript面向对象
javascript创建对象
javascript 面向对象、面向对象的javascript、javascript中面向对象、javascript是面向对象、面向对象详解,以便于您获取更多的相关知识。

时间: 2024-11-08 21:01:42

详解JavaScript基于面向对象之创建对象(1)_javascript技巧的相关文章

详解JavaScript基于面向对象之继承实例_javascript技巧

javascript面向对象继承的简单实例: 作为一门面向对象的语言,继承自然是它的一大特性,尽管javascript的面向对象的实现机制和和c#和java这样典型的面向对象不同,但是继承的基本特点还是具有的,简单的说就是获得父级的方法和属性,下面是一段简单的实例,大家有兴趣可以分析一下: window.onload = function(){ function parent(age,name){ this.age = age; this.name = name; } parent.protot

详解JavaScript基于面向对象之创建对象(2)_javascript技巧

接着上文<详解JavaScript基于面向对象之创建对象(1)>继续学习. 4.原型方式        我们创建的每个函数都有一个通过prototype(原型)属性,这个属性是一个对象,它的用途是包含可以由特定类型的所有实例共享的属性和方法.逻辑上可以这么理解:prototypt通过条用构造函数而创建的那个对象的原型对象.使用原型的好处就是可以让所有对象实例共享它所包含的属性和方法.也就是说,不必在构造函数中定义对象信息,而是直接将这些信息添加到原型中.        原型方式利用了对象的pr

详解JavaScript基于面向对象之继承_javascript技巧

一.面相对象继承机制       这个实例使用UML很好的解释了继承机制.       说明继承机制最简单的方式是,利用一个经典的例子就是几何形状.实际上,几何形状只有两种,即椭圆形(是圆形的)和多边形(具有一定数量的边).圆是椭圆的一种,它只有一个焦点.三角形.矩形和五边形都是多边形的一种,具有不同数量的边.正方形是矩形的一种,所有的边等长.这就构成了一种完美的继承关系,很好的解释了面向对象的继承机制.        在这个例子中,形状是椭圆形和多边形的基类(通常我们也可以叫它父类,所有类都由

详解JavaScript中的属性和特性_javascript技巧

JavaScript中属性和特性是完全不同的两个概念,这里我将根据自己所学,来深入理解JavaScript中的属性和特性. 主要内容如下: 理解JavaScript中对象的本质.对象与类的关系.对象与引用类型的关系 对象属性如何进行分类 属性中特性的理解  第一部分:理解JavaScript中对象的本质.对象与类的关系.对象与引用类型的关系 对象的本质:ECMA-262把对象定义为:无序属性的集合,其属性可以包含基本值.对象或者函数.即对象是一组没有特定顺序的值,对象的每个属性或方法都有一个名字

详解JavaScript中的构造器Constructor模式_javascript技巧

构造器模式简单描述(看图): 构造器Constructor不能被继承,因此不能重写Overriding,但可以被重载Overloading.构造器用于创建特定类型对象--准备好对象以备使用,同时接收构造器可以使用的参数,以在第一次创建对象时,设置成员属性和方法的值 1.创建对象 新对象创建的两种方法 var newObject={}; var newObject=new object();//object 构造器的简洁记法 2.基本Constructor Javascript不支持类的情况下对象

详解JavaScript中常用的函数类型_javascript技巧

网页中的java代码需要写在JavaScript中,里面部分少不了函数,介绍一下JavaScript中常用的函数类型.1.可变函数 <script> function show(){ alert("第一个..."); } function show(str){ alert("第二个"); } function show(a,b){ alert("第三个..."); alert(a+":"+b); } </sc

详解JavaScript中数组的reduce方法_javascript技巧

介绍 我们先来看看这个方法的官方概述:reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值. 你一定也和我一样看的有点迷糊,其实reduce接收的就是一个回调函数,去调用数组里的每一项,直到数组结束. 我们来举个例子大家就很明白了. 假设我有一串数组,数组里放的全是数字,我要算出这些数字的总和是多少.正常情况下我们会循环,然后一个个加,有了reduce就不用那么麻烦了,只用一行代码. var total = [0,1,2,3,4

实例详解JavaScript获取链接参数的方法_javascript技巧

使用url传递参数,大家应该不陌生,例如: http://www.softwhy.com/home.php?mod=space&do=home&view=all 既然传递参数,那么自然就要获得传递的参数,当然获取参数的方式有多种多样,下面就介绍其中的一种,和大家一起分享,希望能够给大家带来一定的帮助,代码如下: var url="http://www.softwhy.com/home.php?mod=space&do=home&view=all"; if

详解 javascript中offsetleft属性的用法_javascript技巧

此属性可以返回当前元素距离某个父辈元素左边缘的距离,当然这个父辈元素也是有讲究的. (1).如果父辈元素中有定位的元素,那么就返回距离当前元素最近的定位元素边缘的距离. (2).如果父辈元素中没有定位元素,那么就返回相对于body左边缘距离. 语法结构: obj.offsetleft 特别说明:此属性是只读的,不能够赋值. 代码实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8">