javascript类的简单定义

在面向对象编程中,类(class)是对象(object)的模板,定义了同一组对象(又称"实例")共有的属性和方法。

Javascript语言不支持"类",但是可以用一些变通的方法,模拟出"类"。

一、构造函数法

这是经典方法,也是教科书必教的方法。它用构造函数模拟"类",在其内部用this关键字指代实例对象。

  function Cat() {

    this.name = "大毛";

  }

生成实例的时候,使用new关键字。

  var cat1 = new Cat();

  alert(cat1.name); // 大毛

类的属性和方法,还可以定义在构造函数的prototype对象之上。

  Cat.prototype.makeSound = function(){

    alert("喵喵喵");

  }

关于这种方法的详细介绍,请看我写的系列文章《Javascript 面向对象编程》,这里就不多说了。它的主要缺点是,比较复杂,用到了this和prototype,编写和阅读都很费力。

二、Object.create()法

为了解决"构造函数法"的缺点,更方便地生成对象,Javascript的国际标准ECMAScript第五版(目前通行的是第三版),提出了一个新的方法Object.create()

用这个方法,"类"就是一个对象,不是函数。

  var Cat = {

    name: "大毛",

    makeSound: function(){ alert("喵喵喵"); }

  };

然后,直接用Object.create()生成实例,不需要用到new。

  var cat1 = Object.create(Cat);

  alert(cat1.name); // 大毛

  cat1.makeSound(); // 喵喵喵

目前,各大浏览器的最新版本(包括IE9)都部署了这个方法。如果遇到老式浏览器,可以用下面的代码自行部署。

  if (!Object.create) {

    Object.create = function (o) {

       function F() {}

      F.prototype = o;

      return new F();

    };

  }

这种方法比"构造函数法"简单,但是不能实现私有属性和私有方法,实例对象之间也不能共享数据,对"类"的模拟不够全面。

三、极简主义法

荷兰程序员Gabor de Mooij提出了一种比Object.create()更好的新方法,他称这种方法为"极简主义法"(minimalist approach)。这也是我推荐的方法。

3.1 封装

这种方法不使用this和prototype,代码部署起来非常简单,这大概也是它被叫做"极简主义法"的原因。

首先,它也是用一个对象模拟"类"。在这个类里面,定义一个构造函数createNew(),用来生成实例。

  var Cat = {

    createNew: function(){

      // some code here

    }

  };

然后,在createNew()里面,定义一个实例对象,把这个实例对象作为返回值。

  var Cat = {

    createNew: function(){

      var cat = {};

      cat.name = "大毛";

      cat.makeSound = function(){ alert("喵喵喵"); };

      return cat;

    }

  };

使用的时候,调用createNew()方法,就可以得到实例对象。

  var cat1 = Cat.createNew();

  cat1.makeSound(); // 喵喵喵

这种方法的好处是,容易理解,结构清晰优雅,符合传统的"面向对象编程"的构造,因此可以方便地部署下面的特性。

3.2 继承

让一个类继承另一个类,实现起来很方便。只要在前者的createNew()方法中,调用后者的createNew()方法即可。

先定义一个Animal类。

  var Animal = {

    createNew: function(){

      var animal = {};

      animal.sleep = function(){ alert("睡懒觉"); };

      return animal;

    }

  };

然后,在Cat的createNew()方法中,调用Animal的createNew()方法。

  var Cat = {

    createNew: function(){

      var cat = Animal.createNew();

      cat.name = "大毛";

      cat.makeSound = function(){ alert("喵喵喵"); };

      return cat;

    }

  };

这样得到的Cat实例,就会同时继承Cat类和Animal类。

  var cat1 = Cat.createNew();

  cat1.sleep(); // 睡懒觉

3.3 私有属性和私有方法

在createNew()方法中,只要不是定义在cat对象上的方法和属性,都是私有的。

  var Cat = {

    createNew: function(){

      var cat = {};

      var sound = "喵喵喵";

      cat.makeSound = function(){ alert(sound); };

      return cat;

    }

  };

上例的内部变量sound,外部无法读取,只有通过cat的公有方法makeSound()来读取。

  var cat1 = Cat.createNew();

  alert(cat1.sound); // undefined

3.4 数据共享

有时候,我们需要所有实例对象,能够读写同一项内部数据。这个时候,只要把这个内部数据,封装在类对象的里面、createNew()方法的外面即可。

  var Cat = {

    sound : "喵喵喵",

    createNew: function(){

      var cat = {};

      cat.makeSound = function(){ alert(Cat.sound); };

      cat.changeSound = function(x){ Cat.sound = x; };

      return cat;

    }

  };

然后,生成两个实例对象:

  var cat1 = Cat.createNew();

  var cat2 = Cat.createNew();

  cat1.makeSound(); // 喵喵喵

这时,如果有一个实例对象,修改了共享的数据,另一个实例对象也会受到影响。

  cat2.changeSound("啦啦啦");

  cat1.makeSound(); // 啦啦啦

我简单的测试代码

//one method
function cart(name)
{
this.name = name;
this.show=function()
{
alert(this.name);
}
}
var icart = new cart("hello");
//icart.show();
//two method
var cat = {
name: "hello",
show: function () { alert(this.name) }

}
var cat1 = Object.create(cat);
//cat1.show();
//three method
function horse()
{
}
horse.prototype.makeSound = function () {
alert("喵喵喵");
}
var ihorse = new horse();
ihorse.makeSound();

时间: 2024-10-21 12:03:43

javascript类的简单定义的相关文章

JavaScript 类的定义和引用 JavaScript高级培训 自定义对象

在Java语言中,我们可以定义自己的类,并根据这些类创建对象来使用,在Javascript中,我们也可以定义自己的类,例如定义User类.Hashtable类等等. 一,概述 在Java语言中,我们可以定义自己的类,并根据这些类创建对象来使用,在Javascript中,我们也可以定义自己的类,例如定义User类.Hashtable类等等. 目前在Javascript中,已经存在一些标准的类,例如Date.Array.RegExp.String.Math.Number等等,这为我们编程提供了许多方

javascript类定义小结

网上可以找到各种各样的javascript定义类的方法: 1.ECMAScript 定义类或对象 2.Javascript定义类(class)的三种方法 我想整理出一个“简洁”的类定义模板,实现代码的模块化. 一.命名空间 //根命名空间 var Root; if(!Root) Root={}; ... //二级命名空间 if(!Root.SecondNS) Root.SecondNS={}; 诸如此类. 二.类定义 通过定义类,实现代码的模块化    <script> //#region 类

第九章:Javascript类和模块

(过年了,祝大家新年好!) 第6章详细介绍了javascript对象,每个javascript对象都是一个属性集合,相互之间没有任何联系.在javascript中也可以定义对象的类,让每个对象都共享某些属性,这种“共享”的特性是非常有用的.类的成员或实例都包含一些属性,用以存放它们的状态,其中有些属性定义了它们的行为(通常称为方法).这些行为通常是由类定义的,而且为所有实例所共享.例如,假如有一个名为complex的类用来表示复数,同时还定义了一些复数运算.一个complex实例应当包含复数的实

ExtJS教程(2)--- Javascript类和对象基础知识

Javascript中的类其实就是一个function 如下面定义一个Person类 //定义一个类 function Person(){ this.name = 'jaune'; this.age = 18; } //创建一个对象 var person1 = new Person(); console.log(person1); /* * 控制台打出以下内容 * Person {name: "jaune", age: 18} */ 上面是一个简单的定义类及创建类的方法 //定义一个带

JavaScript学习总结(十三)——极简主义法编写JavaScript类

前两天在网上无意中发现了一篇使用极简主义法定义JavaScript类的文章,原文链接,这个所谓的"极简主义法"我还是第一次听说,是荷兰程序员Gabor de Mooij提出来的,这种方法不使用this和prototype,代码部署起来非常简单,这大概也是它被叫做"极简主义法"的原因.下面就介绍如何使用极简主义法完成JavaScript的封装和继承 1. 封装 首先,它也是用一个对象模拟"类".在这个类里面,定义一个构造函数createNew(),

cocos2d JS -&gt; JavaScript 中的简单继承关系

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px "PingFang SC" } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px "PingFang SC"; min-height: 25.0px } span.Apple-tab-span { white-space: pre } JavaScript 语言本身没有提供类,没有其他语言的类继承机制,它的

javascript没那么简单(转)

原文出处:http://www.cnblogs.com/bestfc/archive/2010/08/02/1790173.html 写在前面:似乎园子里最近少了些人,各个文章的阅读量少了许多废话不说,写此文目的是为了让更多的程序员理解javascript的一些概念,对是理解不是了解我们已经了解得够多了,该是向深入理解的方向靠拢的时候了为什么这么说,前些日子收到面试邀请,那就去试试呗,有几年没有面试过了吧和面试官坐在沙发上,聊天式的他问我答,以下就是几个javascript方面的问题>请创建一个

JavaScript类和模块

类 在JavaScript中,类的实现是基于原型继承机制的.如果两个实例都从同一个原型对象上继承了属性,我们说它们是同一个类的实例. 构造函数 从某种意义上讲,定义构造函数即是定义类,所以构造函数名首字母要大写,而普通的函数都是首字母小写. // 构造函数,首字母大写 // 注意,这里并没有创建并返回一个对象,仅仅是初始化 function Range(from , to) { // 添加2个属性,这2个属性是不可继承的,每个对象都拥有唯一的属性 this.from = from; this.t

你需要知道的 JavaScript 类(class)的这些知识

作者: Dmitri Pavlutin译者:前端小智来源:dmitripavlutin 点赞再看,养成习惯 本文 GitHub https://github.com/qq44924588... 上已经收录,更多往期高赞文章的分类,也整理了很多我的文档,和教程资料.欢迎Star和完善,大家面试可以参照考点复习,希望我们一起有点东西. JavaScript 使用原型继承:每个对象都从原型对象继承属性和方法. 在Java或Swift等语言中使用的传统类作为创建对象的蓝图,在 JavaScript 中不