开发者社区> awbeci> 正文

JS创建类和对象

简介: JavaScript 创建类/对象的几种方式 在JS中,创建对象(Create Object)并不完全是我们时常说的创建类对象,JS中的对象强调的是一种复合类型,JS中创建对象及对对象的访问是极其灵活的。
+关注继续查看

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

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

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当你定义了一个新的函数你实际上声明了一个新的类而这个函数本身就相当于类的构造函数。 下面的代码向你展示了两种不同的方式来创建一个新的PersonPerson.prototype的定义也紧跟在函数定义之后。

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

        this.name = name;

}

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

        this.name = name;

}

Person.prototype = { // 定义Personprototype

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

               alert(this.name);

        }

}

当你通过函数的方式声明了一个类之后你就可以通过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 ( 静态 )

Method / Property

Kind

Arguments

Description

create()

静态方法

 /

用于声明一个新的类并提供了一个名为initialize构造函数支持

Analysis & Usage - 分析与使用

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

var Person = Class.create(); // 类的声明              |public class Person { // 类的声明

Person.prototype = {                                 |    private String name;

   initialize: function(name) { // 构造函数          |    public Person(String name){ // 构造函数

     this.name = name;                               |       this.name = name;

   }                                                 |    }

   printName: function() { // 成员函数               |    public void printName(){ // 成员函数

     alert(this.name);                               |       System.out.println(name);

   }                                                 |    }

}                                                    |}

var person = new Person("Joe Smith");// 创建实例      |Person person = new Person("Joe Smith");// 创建实例

person.printName(); // 函数调用                       |person.printName(); // 函数调用

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Python面向对象编程01:入门类和对象
正式的Python专栏第36篇,同学站住,别错过这个从0开始的文章!
20 0
(七)java类和对象
   <span style="font-size:18px"> 一个类定义一个新的数据类型,也就是定义了一个逻辑框架,定义了它的成员之间的关系。可以通过这种类型来声明该类型的对象,通过new关键词来实例化对象,也就是为该类型的对象动态的分配物理内存空间,这个分配过程实在运行时发生的。内存空间是有限的,因此运行时分配内存有可能不成功,会造成运行时异常。<br>     声明时的变量存储的
987 0
Node.js创建第一个应用
在我们创建 Node.js 第一个 "Hello, World!" 应用前,让我们先了解下 Node.js 应用是由哪几部分组成的: 引入 required 模块:我们可以使用 require 指令来载入 Node.js 模块。
859 0
Node.js创建目录实例
webgame项目经常要维护更新,先在创建一个批次号,然后上传至更新服务器上然后再分别copy文件至各服务器的一个临时目录,然后更新结束后删除该临时目录。而本地需要根据批次号创建一系统的文件夹目录。之前是先手动创建一个批次号文件夹,然后写一个bat,创建更新批次相应的文件夹。
690 0
Python面向对象编程05:收尾总结一下类和对象
正式的Python专栏第40篇,同学站住,别错过这个从0开始的文章!
34 0
three.js 创建文字的几种方法
three.js 创建文字的几种方法
4059 0
使用 iosOverlay.js 创建 iOS 风格的提示和通知
  iosOverlay.js 用于在 Web 项目中实现 iOS 风格的通知和提示效果。为了防止图标加载的时候闪烁,你需要预加载的图像资源。不兼容 CSS 动画的浏览器需要 jQuery 支持。浏览器兼容:IE7+, Google Chrome, Firefox, Opera, Desktop Safari, Mobile Safari — iPhone & iPad。
765 0
+关注
awbeci
我的名字叫张威(多好听的名字啊),毕业于哈弗大学(之前和比尔&middot;盖次是同学,自从那家伙创立了威软,我和他的关系就不太好,我发誓要打败他,然后进入安徽机电职业技术学院学习软件技术,你们觉得我会成功么), 现在在一家世界五百强公司任职UFO(想问我是什么公司?叫合肥优尔电子科技有限公司
590
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载