当前位置: 首页 > 编程笔记 >

Javascript定义类(class)的三种方法详解

仲孙俊贤
2023-03-14
本文向大家介绍Javascript定义类(class)的三种方法详解,包括了Javascript定义类(class)的三种方法详解的使用技巧和注意事项,需要的朋友参考一下

将近20年前,Javascript诞生的时候,只是一种简单的网页脚本语言。如果你忘了填写用户名,它就跳出一个警告。

如今,它变得几乎无所不能,从前端到后端,有着各种匪夷所思的用途。程序员用它完成越来越庞大的项目。

Javascript代码的复杂度也直线上升。单个网页包含10000行Javascript代码,早就司空见惯。2010年,一个工程师透露,Gmail的代码长度是443000行!

编写和维护如此复杂的代码,必须使用模块化策略。目前,业界的主流做法是采用"面向对象编程"。因此,Javascript如何实现面向对象编程,就成了一个热门课题。
麻烦的是,Javascipt语法不支持"类"(class),导致传统的面向对象编程方法无法直接使用。程序员们做了很多探索,研究如何用Javascript模拟"类"。本文总结了Javascript定义"类"的三种方法,讨论了每种方法的特点,着重介绍了我眼中的最佳方法。

==============================================

Javascript定义类(class)的三种方法

在面向对象编程中,类(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(); // 啦啦啦

(完)

 类似资料:
  • 本文向大家介绍javascript中定义类的方法详解,包括了javascript中定义类的方法详解的使用技巧和注意事项,需要的朋友参考一下 JS中定义类的方式有很多种: 1、工厂方式   调用此函数时将创建新对象,并赋予它所有的属性和方法。使用此函数可以创建2个属性完全相同的对象。当然我妹可以通过给它传递参数来改版这种方式。   现在可以通过给函数传递不同的参数来得到具有不同值的对象。   在前面

  • 本文向大家介绍详解JavaScript中分解数字的三种方法,包括了详解JavaScript中分解数字的三种方法的使用技巧和注意事项,需要的朋友参考一下 本文基于免费代码营基本算法脚本“分解数字” 在数学中,非负整数n的阶乘可能是一个棘手的算法。在本文中,我将解释这种方法,首先使用递归函数,第二种使用而循环,第三种使用以循环。 算法挑战 返回提供的整体的阶乘。 如果整体用字母n表示,则阶乘是所有小于

  • 本文向大家介绍js定义类的几种方法(推荐),包括了js定义类的几种方法(推荐)的使用技巧和注意事项,需要的朋友参考一下 ECMAScript6已经支持了class,但之前版本都不支持类,但是可以通过一些方法来模拟类。 js中的类,既是重点,也是难点,很多时候都感觉模棱两可。 首先强调一下js中很重要的3个知识点:this、prototype、constructor。 下面我们来总结一下定义(模拟)

  • 本文向大家介绍JavaScript的各种常见函数定义方法,包括了JavaScript的各种常见函数定义方法的使用技巧和注意事项,需要的朋友参考一下 本文详细讲述了JavaScript的各种常见函数定义方法,分享给大家供大家参考。具体分析如下: 首先看一下JavaScript最常见的四种函数定义: 用Function构造函数定义的函数,代码如下: 函数声明,这种方式也是最为常见的一种: 函数表达式,

  • 本文向大家介绍JavaScript定义类和对象的方法,包括了JavaScript定义类和对象的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了JavaScript定义类和对象的方法。分享给大家供大家参考。具体方法如下: 在JS中,类和对象有多种不同的写法,因为本人对JS也不怎么熟,所以就本人的理解来写,如果哪位朋友发现有不对,请告之,共同学习. JS定义一个类有两种定法(我只知道这两种

  • 本文向大家介绍javascript中定义类的方法汇总,包括了javascript中定义类的方法汇总的使用技巧和注意事项,需要的朋友参考一下 JS中定义类的方式有很多种: 1、工厂方式   调用此函数时将创建新对象,并赋予它所有的属性和方法。使用此函数可以创建2个属性完全相同的对象。当然我妹可以通过给它传递参数来改版这种方式。   现在可以通过给函数传递不同的参数来得到具有不同值的对象。   在前面

  • 主要内容:Python类的定义前面章节中已经提到,类仅仅充当图纸的作用,本身并不能直接拿来用,而只有根据图纸造出的实际物品(对象)才能直接使用。因此, Python 程序中类的使用顺序是这样的: 创建(定义)类,也就是制作图纸的过程; 创建类的实例对象(根据图纸造出实际的物品),通过实例对象实现特定的功能。 本节先教大家如何创建(定义)一个类,如何使用定义好的类将放到后续章节进行讲解。 Python类的定义 Python 中定

  • 本文向大家介绍thinkPHP自定义类实现方法详解,包括了thinkPHP自定义类实现方法详解的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了thinkPHP自定义类实现方法。分享给大家供大家参考,具体如下: 1.通过Model调用 没有继承Model,否则会因为表不存在而报错。 调用, 调用确实方便,但是总感觉有点不合理。这个D毕竟是操作数据库的。 2.通过引入类实现,把类放到ORG下