JS创建类和对象

深藏阁楼爱情的钟 2022-05-21 13:46 271阅读 0赞

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

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

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

一、由一对大括号括起来

var emptyObj = {};
        var myObj =
        {
            'id': 1,        //属性名用引号括起来，属性间由逗号隔开
            'name': 'myName'
        };
        //var m = new myObj(); //不支持

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

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

**二、用 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中是没有智能提示的。

一、定义类或对象  
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)  
    \};  
\}

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的定义也紧跟在函数定义之后。

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

var person = new Person("Joe Smith"); // 使用new操作符来新建一个Person的实例, 并赋给变量person
    
    person.printName(); // person就可以看作是一个实例的引用(reference), 所以可以通过这个引用来调用Person类中的成员函数

我们来总结一下创建一个新的类的实例的整个流程和步骤：

1. 通过定义一个函数的方式(匿名或者实名)来声明一个新的类.   
2. 如果有必要, 定义这个新的类的prototype域.   
3. 使用new操作符紧跟你所定义的函数来创建一个新的类的实例. 一旦JavaScript编译器碰到了new操作符, 它实际上创建了一个空的类实例变量.  
4. 将所有这个类的prototype域中的属性与方法复制到这个新的实例中, 并将其成员函数中所有的this指针指向这个新创建的实例.   
5. 接下来, 执行紧跟在new操作符后面的那个函数.   
6. 当你执行这个函数时, 如果你试图对一个不存在的属性进行赋值, JavaScript编译器将自动为你在这个实例范围内新创建这个属性.   
7. 函数执行完毕后, 将这个初始化完成的实例返回.

在Prototype中, 使用**Class**对象, 你可以以一个比较简单的方式来声明一个新的对象。通过使用Class.create(), prototype为你创建了一个默认的构造函数initialize(), 一旦你实现这一函数, 就可以以一个类似Java中构造函数的方式来创建一个新的类的实例。

**Source View - 源码解析**

var Class = { // 全局静态类, 用于声明一个新的类并提供构造函数支持
    
     create: function() {   
    
        return function() { // 返回一个函数, 代表着这个新声明的类的构造函数
    
          // 一个命名为initialize的函数将被这个类实现作为类的构造函数
    
          this.initialize.apply(this, arguments);// initialize函数将在你实例化一个变量的时候被调用执行(即上面7个步骤中的第5步)
    
        }
    
     }
    
    }

Field & Function Reference - 属性方法一览

Class ( 静态 )

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div>
       Method / Property 
      <br> 
     </div> 
    </div></td> 
   <td>Kind</td> 
   <td>Arguments</td> 
   <td>Description</td> 
  </tr> 
  <tr> 
   <td>create()</td> 
   <td><span style="color:rgb(51,51,51);font-family:'新細明體';font-size:13.3333px;font-style:normal;font-weight:normal;letter-spacing:normal;text-indent:0px;text-transform:none;word-spacing:0px;background-color:rgb(255,255,255);">静态方法</span></td> 
   <td><span style="color:rgb(51,51,51);font-family:'Courier New';font-size:13.3333px;font-style:normal;font-weight:normal;letter-spacing:normal;text-indent:0px;text-transform:none;word-spacing:0px;background-color:rgb(255,255,255);">&nbsp;/</span></td> 
   <td><span style="line-height:1.5;font-style:normal;font-weight:normal;letter-spacing:normal;text-indent:0px;text-transform:none;word-spacing:0px;background-color:rgb(255,255,255);font-size:10pt;color:rgb(51,51,51);font-family:'新細明體';">用于声明一个新的类并提供了一个名为</span><span style="line-height:1.5;font-style:normal;font-weight:normal;letter-spacing:normal;text-indent:0px;text-transform:none;word-spacing:0px;background-color:rgb(255,255,255);font-size:10pt;color:rgb(51,51,51);font-family:'Courier New';">initialize</span><span style="line-height:1.5;font-style:normal;font-weight:normal;letter-spacing:normal;text-indent:0px;text-transform:none;word-spacing:0px;background-color:rgb(255,255,255);font-size:10pt;color:rgb(51,51,51);font-family:'新細明體';">构造函数支持</span></td> 
  </tr> 
 </tbody> 
</table>

Analysis & Usage - 分析与使用

通过Class类, 你可以很容易地使用构造函数的方式创建一个新的类, 这对于Java程序员来说或许更加容易被接受。下面我们列出了Java和JavaScript各自声明和创建一个新的类的代码对比, 我们可以看到, 他们是如此相似：