Javascript创建类和对象

现总结一下Javascript创建类和对象的几种方法:

1、原始的创建方法:

1 <script type="text/javascript">
2     var person = new Object();
3     person.name="Amy";
4     person.sex="Woman";
5     person.show=function(){
6         document.write("name is: "+this.name+" ; sex is:"+this.sex);
7     }
8     person.show();
9 </script>

原始的创建方法对于熟悉面向对象的人来说难以接受,总感觉属性和方法的封装不是很紧密,这种封装是以“对象名”+“.”的方式进行,表示对象名后跟的属性和方法是这个对象拥有的东西,这个对象(例如:person)就是封装好的结果,你可以继续追加方法和属性,例如追加age属性:person.age=23;这种创建方法会让熟悉Java编程的人感到很难受。我们可以对原始的创建方法进一步“封装”一下,请看下一步:

2、工厂方法模式:

 1 <script type="text/javascript">
 2     function personFactory(name,age,sex){
 3         var ob=new Object();
 4         ob.name=name;
 5         ob.age=age;
 6         ob.sex=sex;
 7         ob.show=function(){
 8             document.write(ob.name+" "+ob.age+" "+ob.sex);
 9         }
10         return ob;
11     }
12     var person=personFactory("Amy",21,"Woman");
13     person.show();
14 </script>

工厂方法模式看起来更像一个类了,personFactory对原始的创建方法进行了封装,并将创建好的对象返回给person引用变量,person就可以引用这个创建好的对象了,但是还不够完美:你每一次创建一个对象, 并使用该对象调用show()方法时,都会创建新的show()函数,它们完全可以调用同一个show方法,优化方法是将show放到工厂外,如下:

 1 <script type="text/javascript">
 2     function show(){
 3         document.write(this.name+" "+this.age+" "+this.sex);
 4     }
 5     function personFactory(name,age,sex){
 6         var ob=new Object();
 7         ob.name=name;
 8         ob.age=age;
 9         ob.sex=sex;
10         ob.show=show;
11         return ob;
12     }
13     var person=personFactory("Amy",22,"Woman");
14     person.show();
15 </script>

从功能上说,上面的代码解决了函数重用问题,但是呈现方式不像是创建一个对象,熟悉Java的人仍感到难受。请看下一步:

3、构造方法模式:

 1 <script type="text/javascript">
 2     function person(name,age,sex){
 3         this.name=name;
 4         this.age=age;
 5         this.sex=sex;
 6         this.show=function(){
 7             document.write(this.name+" "+this.age+" "+this.sex);
 8             document.write("<br>");
 9         }
10     }
11     var per=new person("Amy",22,"Woman");
12     per.show();
13 </script>

上述代码的创建方式已经与Java类和对象的创建方式几乎一样了,封装好类的属性和方法,然后利用new关键字创建并返回一个对象,这不就是Java创建类和对象的过程吗,是的,就是这个过程,但是还可以优化,这种方式创建的对象调用show方法是也会即时地创建一个show函数,我们能不能创建一个所有对象公用的一个方法呢?就像Java类中的static方法一样,所有对象都使用同一个static方法,答案是可以的。请看下一步:

4、动态原型方法:

 1 <script type="text/javascript">
 2     function Person(name,age,sex){
 3         this.name=name;
 4         this.age=age;
 5         this.sex=sex;
 6         if(typeof Person.tag == "undefined"){
 7             Person.prototype.show=function(){
 8                 document.write(this.name+" "+this.age+" "+this.sex);
 9                 document.write("<br>");
10             }
11             Person.tag=true;
12         }
13     }
14     var per=new Person("Peter",22,"Man");
15     per.show();
16 </script>

这里使用了一点技巧,当用new创建对象是,会执行Person功能块中的if判断语句,顺序从上往下,刚开始tag变量当然没有定义,所以执行if语句块里的内容:

Person.prototype.show=function(){
document.write(this.name+" "+this.age+" "+this.sex);
document.write("<br>");
}

这段内容的含义是创建一个属于类Person的show方法,注意,它是一个类方法,相当于Java中static修饰后的方法,而非单个对象的方法,这样所有的对象均可调用同一个方法了,这样也不用每次不同对象调用方法是都创建自己的show函数了,既节省空间又节省时间,这种方法岂不更妙。这里解释一下,以“类名.prototype.属性/方法”方式构造的属性和方法相当于Java中用static修饰的变量或方法,是属于整个类的,而非单个的对象,也即所有对象是共享的。

以上是学习JS类和对象的总结,其中个人理解错误之处还望大家批评指正。

时间: 2024-12-04 13:31:43

Javascript创建类和对象的相关文章

JavaScript创建类的方式

一些写类工具函数或框架的写类方式本质上都是 构造函数+原型.只有理解这一点才能真正明白如何用JavaScript写出面向对象的代码,或者说组织代码的方式使用面向对象方式.当然用JS也可写出函数式的代码,它是多泛型的. 为了讨论的单一性,暂不考虑类的继承,(私有,受保护)属性或方法.EMCAScript中实际没有类(class)的概念,但可以把它理解为更广义的概念. 1.构造函数方式 /** * Person类:定义一个人,有个属性name,和一个getName方法 * @param {Strin

JS创建类和对象

JavaScript 创建类/对象的几种方式 非常好的一篇讲类和对象的文章,逐一测试,加深记忆:http://www.cnblogs.com/tiwlin/archive/2009/08/06/1540161.html 在JS中,创建对象(Create Object)并不完全是我们时常说的创建类对象,JS中的对象强调的是一种复合类型,JS中创建对象及对对象的访问是极其灵活的. JS对象是一种复合类型,它允许你通过变量名存储和访问,换一种思路,对象是一个无序的属性集合,集合中的每一项都由名称和值组

JavaScript定义类和对象以及实现继承

定义类和对象 工厂模式 function createCar(color, doors, mpg){ var car = {}; car.color = color, car.doors = doors, car.mpg = mpg; car.showColor = function(){alert(this.color);}; return car; } 工厂模式比较简单,所以只适用于创建比较简单的对象. 构造函数方式 function Car(color, doors, mpg){ this

JS创建类和对象(好多方法哟!)

http://www.cnblogs.com/tiwlin/archive/2009/08/06/1540161.html 这是别人写的~~~我借来看看 JavaScript 创建类/对象的几种方式 在JS中,创建对象(Create Object)并不完全是我们时常说的创建类对象,JS中的对象强调的是一种复合类型,JS中创建对象及对对象的访问是极其灵活的. JS对象是一种复合类型,它允许你通过变量名存储和访问,换一种思路,对象是一个无序的属性集合,集合中的每一项都由名称和值组成(听起来是不是很像

JS创建类和对象,看完了,头就不大了

JavaScript 创建类/对象的几种方式 在JS中,创建对象(Create Object)并不完全是我们时常说的创建类对象,JS中的对象强调的是一种复合类型,JS中创建对象及对对象的访问是极其灵活的. JS对象是一种复合类型,它允许你通过变量名存储和访问,换一种思路,对象是一个无序的属性集合,集合中的每一项都由名称和值组成(听起来是不是很像我们常听说的HASH表.字典.健/值对?),而其中的值类型可能是内置类型(如number,string),也可能是对象. 一.由一对大括号括起来 var

Python 面向对象(创建类和对象,面向对象的三大特性是指:封装、继承和多态,多态性)

概念:                                                                                                                                                     ·        面向过程:根据业务逻辑从上到下写垒代码 ·        函数式:将某功能代码封装到函数中,日后便无需重复编写,仅调用函数即可 ·        面向对象:对函数进行分类和封装,

JavaScript定义类与对象的一些方法

最近偶然碰到有朋友问我"hoisting"的问题.即在js里所有变量的声明都是置顶的,而赋值则是在之后发生的.可以看看这个例子: 1 var a = 'global'; 2 (function () { 3     alert(a); 4     var a = 'local'; 5 })(); 大家第一眼看到这个例子觉得输出结果是什么?'global'?还是'local'?其实都不是,输出的是undefined,不用迷惑,我的题外话就是为了讲这个东西的. 其实很简单,看一看JavaS

简述JavaScript的类与对象

JavaScript语言是动态类型的语言,基于对象并由事件驱动.用面向对象的思想来看,它也有类的概念.JavaScript 没有class关键字,就是用function来实现. 1. 实现方式及变量/方法访问域控制 1 function fruit(name, color) 2 { 3     // public variable 4     this.name = name; 5     this.color = color; 6 } 用this来标识变量或方法是public.兴城市费永礼品

【JavaScript】类继承(对象冒充)和原型继承__深入理解原型和原型链

JavaScript里的继承方式在很多书上分了很多类型和实现方式,大体上就是两种:类继承(对象冒充)和原型继承. 类继承(对象冒充):在函数内部定义自身的属性的方法,子类继承时,用call或apply实现对象冒充,把类型定义的东西都复制过来,这样的继承子类与父类并没有多少关联,不互相影响,有利于保护自身的一些私有属性. 原型继承:每个函数都有自己的原型(prototype)属性,这个属性是在生成实例对象时自动创建的.它本身又是一个对象,拥有能够在实例间共享的属性和方法.而实例本身的属性和方法,则