JS创建类和对象的几种方式总结

最新推荐文章于 2023-02-12 20:39:45 发布

guorun18

最新推荐文章于 2023-02-12 20:39:45 发布

阅读量1k

点赞数

分类专栏： jquery

jquery 专栏收录该内容

60 篇文章 0 订阅

订阅专栏

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

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

一、由一对大括号括起来

var emptyObj = {};

var myObj =

{

'id': 1, //属性名用引号括起来，属性间由逗号隔开

'name': 'myName'

};

//var m = new myObj(); //不支持

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

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

var myObj =

{

'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-myObj 1+myObj

二、用 function 关键字模拟 class

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

function myClass() {

this.id = 5;

this.name = 'myclass';

this.getName = function() {

return this.name;

}

var my = new myClass();

alert(my.id);

alert(my.getName());

// 结果

// 5

// myclass

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

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

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

function myClass() {

var obj =

{

'id':2,

'name':'myclass'

};

return obj;

}

function _myClass() {

var obj = new Object();

obj.id = 1;

obj.name = '_myclass';

return obj;

}

var my = new myClass();

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);

};

创建多个car

function 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运算符，使它看起来像真正的构造函数。

如前所述，目前使用最广泛的是混合的构造函数/原型方式。些外，动态原型方法也很流行，在功能上与前者等价，可以采用这两种方式中的任何一种。

修改对象

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"

关于JS中Class的说明（JS中没有明确类，可以当做是Function）

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

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

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

this.name = name;}

function Person(name) { // 直接定义一个叫做Person的函数表示Person类

this.name = name;

}

Person.prototype = { // 定义Person的prototype域

printName: function() { // 定义一个print函数

alert(this.name);

}

当你通过函数的方式声明了一个类之后, 你就可以通过new操作符来实例化这个类。这样, 你就可以调用类的成员函数来完成你的逻辑。

var person = new Person("Joe Smith"); // 使用new操作符来新建一个Person的实例, 并赋给变量person