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

Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象。但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有class(类)。

那么,如果我们要把"属性"(property)和"方法"(method),封装成一个对象,甚至要从原型对象生成一个实例对象,我们应该怎么做呢?

程序员们做了很多探索,研究如何用Javascript模拟"类"。本文总结了Javascript定义"类"的三种方法,讨论了每种方法的特点,着重介绍了我眼中的最佳方法。


一、构造函数法

From: Javascript 面向对象编程系列(一):封装

一、 生成实例对象的原始模式

变量赋值的方法。

var Cat = {
name: '',
color: ''
} Cat
{name: "", color: ""} Cat.height = 10 //直接给对象添加了属性
10
Cat
{name: "", color: "", height: 10}

实例(下)与原型(上)之间,没有任何办法,可以看出有什么联系。

  var cat1 = {}; // 创建一个空对象

    cat1.name = "大毛"; // 按照原型对象的属性赋值

    cat1.color = "黄色";

  var cat2 = {};

    cat2.name = "二毛";

    cat2.color = "黑色";

二、 原始模式的改进

函数返回的方法。

  function Cat(name,color) {

    return {

      name:name,

      color:color

    }

  }

然后生成实例对象,就等于是在调用函数:

  var cat1 = Cat("大毛","黄色");

  var cat2 = Cat("二毛","黑色");

cat1和cat2之间没有内在的联系,不能反映出它们是同一个原型对象的实例。

三、 构造函数模式【官方提供了暂时的方案】

Javascript提供了一个构造函数(Constructor)模式:

“一个普通函数,但是内部使用了this变量”。

  function Cat(name,color){

    this.name=name;

    this.color=color;

  }

这时cat1cat2会自动含有一个constructor属性,指向它们的构造函数。

  var cat1 = new Cat("大毛","黄色");

  var cat2 = new Cat("二毛","黑色");

// cat1内的constructor指向构造函数Cat.
  alert(cat1.constructor == Cat); //true

  alert(cat2.constructor == Cat); //true

Javascript还提供了一个instanceof运算符,验证原型对象与实例对象之间的关系。

  alert(cat1 instanceof Cat); //true

  alert(cat2 instanceof Cat); //true

四、构造函数模式的问题

五、 Prototype模式

  function Cat(name,color){

    this.name = name;

    this.color = color;

  }

  Cat.prototype.type = "猫科动物";

  Cat.prototype.eat = function(){alert("吃老鼠")};

也就是prototype类型的属性是shared,不用重复保存,节省了内存空间。

六、 Prototype模式的验证方法

6.1 isPrototypeOf()

对象与实例之间的关系。

  alert(Cat.prototype.isPrototypeOf(cat1)); //true

  alert(Cat.prototype.isPrototypeOf(cat2)); //true

6.2 hasOwnProperty()

每个实例对象都有一个hasOwnProperty()方法,用来判断某一个属性到底是本地属性,还是继承自prototype对象的属性。

  alert(cat1.hasOwnProperty("name")); // true

  alert(cat1.hasOwnProperty("type")); // false

6.3 in运算符

in运算符可以用来判断,某个实例是否含有某个属性,不管是不是本地属性。

  alert("name" in cat1); // true

  alert("type" in cat1); // true

in运算符还可以用来遍历某个对象的所有属性。

  for(var prop  in cat1) { alert("cat1["+prop+"]="+cat1[prop]); }

二、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(); // 啦啦啦

[JS] Topic - define "class" by tricky methods的更多相关文章

  1. [JS] Topic - why "strict mode" here

    Ref: Javascript 严格模式详解 使得Javascript在更严格的条件下运行: - 消除Javascript语法的一些不合理.不严谨之处,减少一些怪异行为; - 消除代码运行的一些不安全 ...

  2. vue.js初探:计算属性和methods

    在vue.js中,计算属性和methods方法的函数相同时,两者的最终执行结果都是相同的.然而不同的是,计算属性是基于它的依赖缓存.计算属性只有在它的相关依赖发生改变时才会重新取值.这就意味着只要 m ...

  3. 阅读zepto.js的core中的Core methods

    学习zepto.js,參考资料:http://www.zeptojs.cn/ 跟jQuery一样.其选择符号也是$; 首先接触的是 $.()  选择 $(selector, [context]) ⇒ ...

  4. [JS] Topic - variable and function hoisting

    Ref: 深入理解js的变量提升和函数提升 一.变量提升 简直就是es5的遗毒! console.log(global); // undefined 竟然能打印?因为变量提升,下一行就有定义 var ...

  5. [JS] Topic - Object.create vs new

    故事背景 Ref: 你不知道的javascript之Object.create 和new区别 var Base = function () {} (1) var o1 = new Base(); (2 ...

  6. [JS] Topic - hijack this by "apply" and "call"

    Ref: 详解js中的apply与call的用法 call 和 apply二者的作用完全一样,只是接受参数的方式不太一样. 参数形式: Function.apply(obj,args) call方法与 ...

  7. [JS] Topic - this is ”closure“

    Ref: 为什么要用闭包? 背景 闭包是自带运行环境的函数 发哥是自带背景音乐的男人~ 就是有权访问另一个函数作用域的变量的函数. 函数式编程的闭包,就是函数的调味包.方便用户调用函数.不必为了维护繁 ...

  8. [Code::Blocks] Install wxWidgets & openCV

    The open source, cross platform, free C++ IDE. Code::Blocks is a free C++ IDE built to meet the most ...

  9. 本人SW知识体系导航 - Programming menu

    将感悟心得记于此,重启程序员模式. js, py, c++, java, php 融汇之全栈系列 [Full-stack] 快速上手开发 - React [Full-stack] 状态管理技巧 - R ...

随机推荐

  1. C#基础_循环

    1,三元运算符 表达式1?表达式2:表达式3 栗子1:bool result=5>3?true:false; 栗子2: int num=5>3?1:0; 注意事项以及相应规则: 2, 3, ...

  2. U3D面试题

    直接上新.... 什么是协同程序?答:在主线程运行时同时开启另一段逻辑处理,来协助当前程序的执行.换句话说,开启协程就是开启一个可以与程序并行的逻辑.可以用来控制运动.序列以及对象的行为. Unity ...

  3. C#基于RSA加密算法实现软件注册实战演练

    一.课程介绍 本次分享课程属于<C#高级编程实战技能开发宝典课程系列>中的一部分,阿笨后续会计划将实际项目中的一些比较实用的关于C#高级编程的技巧分享出来给大家进行学习,不断的收集.整理和 ...

  4. iOS 7设计备忘单

    With the release of iOS 7, app designers and developers will need to adjust their visual language to ...

  5. win32 进程崩溃时禁止弹出错误对话框

    在程序初始化的时候加入以下代码即可: SetErrorMode(SEM_FAILCRITICALERRORS | SEM_NOGPFAULTERRORBOX);    _set_abort_behav ...

  6. [转]抛弃jQuery,使用原生JavaScript

    原文链接 Document Ready 事件 在jQuery中,document.ready可以让代码在整个文档加载完毕之后执行: $(document).ready(function() { // ...

  7. 【ML】Predict and Constrain: Modeling Cardinality in Deep Structured Prediction -预测和约束:在深度结构化预测中建模基数

    [论文标题]Predict and Constrain: Modeling Cardinality in Deep Structured Prediction   (35th-ICML,PMLR) [ ...

  8. C语言(C++语言)中##(两个井号)和#(一个井号)用法[转]

    文章来源:http://blog.csdn.net/starboybenben/article/details/49803315 C语言(C++语言)中的宏(Macro)属于编译器预处理的范畴,属于编 ...

  9. Apache Spark 2.3.0 重要特性介绍

    文章标题 Introducing Apache Spark 2.3 Apache Spark 2.3 介绍 Now Available on Databricks Runtime 4.0 现在可以在D ...

  10. Handler消息传递机制浅析

    http://www.runoob.com/w3cnote/android-tutorial-handler-message.html https://blog.csdn.net/lowprofile ...