首页 > 网站 > WEB开发 > 正文

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

2024-04-27 14:19:15
字体:
来源:转载
供稿:网友

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

http://www.cnblogs.com/tiwlin/archive/2009/08/06/1540161.html

这是别人写的~~~我借来看看

javaScript 创建类/对象的几种方式

在JS中,创建对象(Create Object)并不完全是我们时常说的创建类对象,JS中的对象强调的是一种复合类型,JS中创建对象及对对象的访问是极其灵活的。

JS对象是一种复合类型,它允许你通过变量名存储和访问,换一种思路,对象是一个无序的属性集合,集合中的每一项都由名称和值组成(听起来是不是很像我们常听说的HASH表、字典、健/值对?),而其中的值类型可能是内置类型(如number,string),也可能是对象。

一、由一对大括号括起来

varemptyObj={};varmyObj={'id':1,//属性名用引号括起来,属性间由逗号隔开'name':'myName'};//varm=newmyObj();//不支持

  不知你注意到对象都是用 var 声明的没有,像上面的代码,就只是简单的声明一个对象,它只有一份拷贝,你不能像实例化类对象一样对它采用new操作,像上面代码的注释部分。这样就极大的限制了对象的重用,除非你建立的对象只需要一份拷贝,否则考虑用其他方法建立对象。

  下面一起看看如何访问对象的属性和方法。

varmyObj={'id':1,'fun':function(){document.writeln(this.id+'-'+this.name);//以"对象.属性"方式访问},'name':'myObj','fun1':function(){document.writeln(this['id']+'+'+this['name']);//以集合方式访问}};myObj.fun();myObj.fun1();//结果//1-myObj1+myObj

二、用 function 关键字模拟 class

在 function 中用 this 引用当前对象,通过对属性的赋值来声明属性。如果用var声明变量,则该变量为局部变量,只允许在类定义中调用。

functionmyClass(){this.id=5;this.name='myclass';this.getName=function(){returnthis.name;}}varmy=newmyClass();alert(my.id);alert(my.getName());//结果//5//myclass

三、在函数体中创建一个对象,声明其属性再返回

在函数体中创建对象可利用第一点的方法,或先 new Object(); 再为各属性赋值。

不过用这种方式创建的对象在VS2008 SP1中是没有智能提示的。

functionmyClass(){varobj={'id':2,'name':'myclass'};returnobj;}function_myClass(){varobj=newObject();obj.id=1;obj.name='_myclass';returnobj;}varmy=newmyClass();var_my=new_myClass();alert(my.id);alert(my.name);alert(_my.id);alert(_my.name);//结果//2//myclass//1//_myclass

一、定义类或对象1.工厂方式创建对象car var oCar = new Object;oCar.color = "red";oCar.doors = 4;oCar.mpg = 23;oCar.showColor = function(){alert(this.corlor);};创建多个carfunction createCar(color, doors, mpg) { var tempcar = new Object; tempcar.color = color; tempcar.doors = doors; tempcar.mpg = mpg; tempcar.showColor = function () { alert(this.color) };return tempcar;}

var car1 = createCar("red", 4, 23);var car2 = createCar("blue", 3, 25);car1.showColor(); //outputs "red"car2.showColor(); //outputs "blue"这个例子中,每次调用函数createCar(),都要创建新函数showColor(),意味着每个对象都有自己的showColor()版本,事实上,每个对象都共享了同一个函数。有些开发者在工厂函数外定义对象的方法,然后通过属性指向该方法,从而避开这个问题。function showColor(){alert(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);car1.showColor(); //outputs "red"car2.showColor(); //outputs "blue"从功能上讲,这样解决了重复创建函数对象的问题,但该函数看起来不像对象的方法。所有这些问题引发了开发者定义的构造函数的出现。2.构造函数方法function Car(sColor, iDoors, iMpg) { this.color = sColor; this.doors = iDoors; this.mpg = iMpg; this.showColor = function () { alert(this.color) };}

var oCar1 = new Car("red", 4, 23);var oCar2 = new Car("blue", 3, 25);oCar1.showColor(); //outputs "red"oCar2.showColor(); //outputs "blue"就像工厂函数,构造函数会重复生成函数,为每个对象都创建独立的函数版本。不过,也可以用外部函数重写构造函数,同样,这么做语义上无任何意义。3.原型方式function Car(){}Car.PRototype.color = "red";Car.prototype.doors= 4;Car.prototype.mpg= 23;Car.prototype.showColor = function(){alert(this.color);}var oCar1 = new Car();var oCar2 = new Car();它解决了前面两种方式存在的两个问题。但并不尽人意。首先,这个构造函数没有参数。使用原型方式时,不能通过构造函数传递参数初始化属性的值,这点很令人计厌,但还没完,真正的问题出现在属性指向的是对象,而不是函数时。考虑下面的例子:function Car(){}Car.prototype.color = "red";Car.prototype.doors= 4;Car.prototype.mpg= 23;Car.prototype.drivers = new Array("Mike","Sue");Car.prototype.showColor = function(){alert(this.color);}var oCar1 = new Car();var oCar2 = new Car();oCar1.drivers.push("Matt");alert(oCar1.drivers);//outputs "Mike,Sue,Matt"alert(oCar2.drivers);//outputs "Mike,Sue,Matt"4.混合的构造函数/原型方式function Car(sColor, iDoors, iMpg) { this.color = sColor; this.doors = iDoors; this.mpg = iMpg; this.drivers = new Array("Mike", "Sue");}

Car.prototype.showColor = function () { alert(this.color);};

var oCar1 = new Car("red", 4, 23);var oCar2 = new Car("blue", 3, 25);

oCar1.drivers.push("Matt");

alert(oCar1.drivers); //outputs "Mike,Sue,Matt"alert(oCar2.drivers); //outputs "Mike,Sue"现在就更像创建一般对象了。所有的非函数属性都有构造函数中创建,意味着又可用构造函数的参数赋予属性默认值了。因为只创建showColor()函数的一个实例,所以没有内存浪费。5.动态原型方法function Car(sColor, iDoors, iMpg) { this.color = sColor; this.doors = iDoors; this.mpg = iMpg; this.drivers = new Array("Mike", "Sue");

if (typeof Car._initialized == "undefined") {

Car.prototype.showColor = function () { alert(this.color); };

Car._initialized = true; }}

var oCar1 = new Car("red", 4, 23);var oCar2 = new Car("blue", 3, 25);

oCar1.drivers.push("Matt");

alert(oCar1.drivers); //outputs "Mike,Sue,Matt"alert(oCar2.drivers); //outputs "Mike,Sue"动态原型方法的基本想法与混合的构造函数/原型方式相同,即在构造函数内定义非函数属性,而函数属性则利用原型属性定义。唯一的区别是赋予对象方法的位置。

6.混合工厂方式这种方式通常是在不能应用前一种方式时的变通方法。它的目的是创建假构造函数,只返回另一种对象的新实例。function Car() { var tempcar = new Object; tempcar.color = "red"; tempcar.doors = 4; tempcar.mpg = 23; tempcar.showColor = function () { alert(this.color) };return tempcar;}与经典方式不同,这种方式使用new运算符,使它看起来像真正的构造函数。7.采用哪种方式如前所述,目前使用最广泛的是混合的构造函数/原型方式。些外,动态原型方法也很流行,在功能上与前者等价,可以采用这两种方式中的任何一种。二、修改对象1.创建新方法可以用prototype属性为任何已有的类定义新方法,就像处理自己的类一样。例:Array.prototype.indexOf = function(vItem){for(var i=0;i<this.length;i++){if(vItem == this[i]){return i;}}retunr -1;}最后,如果想给ECMAScript中的每个本地对象添加新方法,必须在Object对象的prototype属性上定义它。2.重定义已有方法就像能给自己的类定义新方法一样,也可重定义已有的方法。函数名只是指向函数的指针,因此可以轻易地使它指向其他函数。如Function.prototype.toString = function(){return "Function code hidden";}function sayHi(){alert("hi");}alert(sayHi.toString());//outputs "Function code hidden"

Class - 类创建

Class类实现了在Javascript中声明一个新的类, 并通过构造函数实例化这个类的机制。通过使用Class.create()方法, 你实际上声明了一个新的类, 并定义了一个initialize()方法作为构造函数, 一旦你在这个声明的类的prototype中实现了改该方法, 你就可以使用new操作符来创建并实例化一个类。

Knowledge Prepare - 知识准备

在JavaScript中, 当你定义了一个新的函数, 你实际上声明了一个新的类, 而这个函数本身就相当于类的构造函数。 下面的代码向你展示了两种不同的方式来创建一个新的Person类, 而Person.prototype的定义也紧跟在函数定义之后。

var Person = function(name) {// 一个匿名函数, 并将这个函数赋值给一个Person变量, 此时Person成为一个类

this.name = name;

}

上一篇:Web 前端知识点

下一篇:学习 jsonp

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表