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

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

一、 生成对象的原始模式

  假定我们把猫看成一个对象,它有"名字"和"颜色"两个属性。

  1. 1 var Cat = {
  2. 2   name : '',
  3. 3   color : ''
  4. 4 }

现在,我们需要根据这个原型对象的规格(schema),生成两个实例对象。

  1. 1 var cat1 = {}; // 创建一个空对象
  2. 2 cat1.name = "大毛"; // 按照原型对象的属性赋值
  3. 3 cat1.color = "黄色";
  4. 4
  5. 5 var cat2 = {};
  6. 6 cat2.name = "二毛";
  7. 7 cat2.color = "黑色";

  好了,这就是最简单的封装了,把两个属性封装在一个对象里面。但是,这样的写法有两个缺点,一是如果多生成几个实例,写起来就非常麻烦;二是实例与原型之间,没有任何办法,可以看出有什么联系。

二、 原始模式的改进

  我们可以写一个函数,解决代码重复的问题。

  1. 1 function Cat(name,color){
  2. 2     return {
  3. 3       name:name,
  4. 4       color:color
  5. 5     }
  6. 6 }

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

  1. 1 var cat1 = Cat("大毛","黄色");
  2. 2
  3. 3 var cat2 = Cat("二毛","黑色");

  这种方法的问题依然是,cat1和cat2之间没有内在的联系,不能反映出它们是同一个原型对象的实例。

三、 构造函数模式

  为了解决从原型对象生成实例的问题,Javascript提供了一个构造函数(Constructor)模式。

  所谓"构造函数",其实就是一个普通函数,但是内部使用了this变量。对构造函数使用new运算符,就能生成实例,并且this变量会绑定在实例对象上。

  比如,猫的原型对象现在可以这样写,

  1. 1 function Cat(name,color){
  2. 2     this.name=name;
  3. 3     this.color=color;
  4. 4 }

  我们现在就可以生成实例对象了。

  1. 1 var cat1 = new Cat("大毛","黄色");
  2. 2 var cat2 = new Cat("二毛","黑色");
  3. 3 alert(cat1.name); // 大毛
  4. 4 alert(cat1.color); // 黄色

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

  1. 1 alert(cat1.constructor == Cat); //true
  2. 2 alert(cat2.constructor == Cat); //true

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

  1. 1 alert(cat1 instanceof Cat); //true
  2. 2 alert(cat2 instanceof Cat); //true

四、构造函数模式的问题

  构造函数方法很好用,但是存在一个浪费内存的问题。

  请看,我们现在为Cat对象添加一个不变的属性"type"(种类),再添加一个方法eat(吃老鼠)。那么,原型对象Cat就变成了下面这样:

  1. 1 function Cat(name,color){
  2. 2     this.name = name;
  3. 3     this.color = color;
  4. 4     this.type = "猫科动物";
  5. 5     this.eat = function(){alert("吃老鼠");};
  6. 6 }

  还是采用同样的方法,生成实例:

  1. 1 var cat1 = new Cat("大毛","黄色");
  2. 2 var cat2 = new Cat ("二毛","黑色");
  3. 3 alert(cat1.type); // 猫科动物
  4. 4 cat1.eat(); // 吃老鼠

  表面上好像没什么问题,但是实际上这样做,有一个很大的弊端。那就是对于每一个实例对象,type属性和eat()方法都是一模一样的内容,每一次生成一个实例,都必须为重复的内容,多占用一些内存。这样既不环保,也缺乏效率。

  1. 1 alert(cat1.eat == cat2.eat); //false

  能不能让type属性和eat()方法在内存中只生成一次,然后所有实例都指向那个内存地址呢?回答是可以的。

五、 Prototype模式

  Javascript规定,每一个构造函数都有一个prototype属性,指向另一个对象。这个对象的所有属性和方法,都会被构造函数的实例继承。

  这意味着,我们可以把那些不变的属性和方法,直接定义在prototype对象上。

  1. 1 function Cat(name,color){
  2. 2   this.name = name;
  3. 3   this.color = color;
  4. 4
  5. 5 }
  6. 6
  7. 7 Cat.prototype.type = "猫科动物";
  8. 8 Cat.prototype.eat = function(){alert("吃老鼠")};

  然后,生成实例。

  1. 1 var cat1 = new Cat("大毛","黄色");
  2. 2 var cat2 = new Cat("二毛","黑色");
  3. 3 alert(cat1.type); // 猫科动物
  4. 4 cat1.eat(); // 吃老鼠

  这时所有实例的type属性和eat()方法,其实都是同一个内存地址,指向prototype对象,因此就提高了运行效率。

  1. 1 alert(cat1.eat == cat2.eat); //true

六、 Prototype模式的验证方法

  为了配合prototype属性,Javascript定义了一些辅助方法,帮助我们使用它。,

6.1 isPrototypeOf()

  这个方法用来判断,某个proptotype对象和某个实例之间的关系。

  1. 1 alert(Cat.prototype.isPrototypeOf(cat1)); //true
  2. 2 alert(Cat.prototype.isPrototypeOf(cat2)); //true

6.2 hasOwnProperty()

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

  1. 1 alert(cat1.hasOwnProperty("name")); // true
  2. 2 alert(cat1.hasOwnProperty("type")); // false

6.3 in运算符

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

  1. 1 alert("name" in cat1); // true
  2. 2 alert("type" in cat1); // true

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

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

Javascript 面向对象编程(补充):封装的更多相关文章

  1. (一)Javascript 面向对象编程:封装

    Javascript 面向对象编程:封装 作者:阮一峰 Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象.但是,它又不是一种真正的面向对象编程(OOP ...

  2. 【转】Javascript 面向对象编程(一):封装

    原文链接:http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_encapsulation.html Javascript ...

  3. Javascript 面向对象编程(一):封装 by 阮一峰

    <Javascript高级程序设计(第二版)>(Professional JavaScript for Web Developers, 2nd Edition) 它们都是非常优秀的Java ...

  4. Javascript 面向对象编程(一):封装 作者:yuan一峰

    学习Javascript,最难的地方是什么? 我觉得,Object(对象)最难.因为Javascript的Object模型很独特,和其他语言都不一样,初学者不容易掌握. 下面就是我的学习笔记,希望对大 ...

  5. JavaScript 面向对象编程(三)如何写类和子类

    在JavaScript面向对象编程(一)原型与继承和JavaScript面向对象编程(二)构造函数和类中,我们分别讨论了JavaScript中面向对象的原型和类的概念.基于这两点理论,本篇文章用一个简 ...

  6. javascript面向对象(一):封装

    本文来自阮一峰 学习Javascript,最难的地方是什么? 我觉得,Object(对象)最难.因为Javascript的Object模型很独特,和其他语言都不一样,初学者不容易掌握. 下面就是我的学 ...

  7. 深入理解Javascript面向对象编程

    深入理解Javascript面向对象编程 阅读目录 一:理解构造函数原型(prototype)机制 二:理解原型域链的概念 三:理解原型继承机制 四:理解使用类继承(继承的更好的方案) 五:建议使用封 ...

  8. 转:javascript面向对象编程

    作者: 阮一峰 日期: 2010年5月17日 学习Javascript,最难的地方是什么? 我觉得,Object(对象)最难.因为Javascript的Object模型很独特,和其他语言都不一样,初学 ...

  9. (三)Javascript面向对象编程:非构造函数的继承

    Javascript面向对象编程:非构造函数的继承   这个系列的第一部分介绍了"封装",第二部分介绍了使用构造函数实现"继承". 今天是最后一个部分,介绍不使 ...

  10. (二)Javascript面向对象编程:构造函数的继承

    Javascript面向对象编程:构造函数的继承   这个系列的第一部分,主要介绍了如何"封装"数据和方法,以及如何从原型对象生成实例. 今天要介绍的是,对象之间的"继承 ...

随机推荐

  1. python设置redis过期时间

    import time import redis if __name__ == "__main__": try: conn=redis.StrictRedis(host='192. ...

  2. JavaScript高级程序设计第三版学习笔记(一)之数据类型区分详谈

    null.NaN.undefined三者的区别是什么? 在初次接触到JavaScript的时候,傻傻的分不清null.NaN.undefined三者到底区别何在,在实际的项目开发中也因为这个问题而困惑 ...

  3. (2.4)DDL增强功能-数据汇总grouping、rollup、cube

    参考:https://www.cnblogs.com/nikyxxx/archive/2012/11/27/2791001.html 1.rollup (1)rollup在group by 子句中使用 ...

  4. centos 特殊权限 各种搜索命令 lsattr ,chattr,suid,sgid,sbit,file,type是否是内置命令,stat文件属性 ,whereis,locate,find,ln 内部命令和外部命令 第五节课

    centos 特殊权限 各种搜索命令 lsattr ,chattr,suid,sgid,sbit,file,type是否是内置命令,stat文件属性 ,whereis,locate,find,ln   ...

  5. Java Thread 如何处理未捕获的异常?

    Java Thread是不允许异常抛出到本线程之外的,Runnable接口的public abstract void run()是不允许throws Exception的,这在编译时就通不过. 线程异 ...

  6. python学习之路-day10

    一.什么是线程 在传统操作系统中,每个进程有一个地址空间,而且默认就有一个控制线程. 线程顾名思义,就是一条流水线工作的过程,一条流水线必须属于一个车间,一个车间的工作过程是一个进程. 车间负责把资源 ...

  7. zw版【转发·台湾nvp系列Delphi例程】HALCON SqrtImage

    zw版[转发·台湾nvp系列Delphi例程]HALCON SqrtImageHALCON SqrtImage 範例 (RAD Studio XE Delphi x64) zw版[转发·台湾nvp系列 ...

  8. CSS实现超出DIV宽度文字自动隐藏并显示省略号

    当文字超出DIV宽度时,超出的文字部分省略,并用显示省略号代替,css代码如下: div.ellipsis { padding-left: 5px; text-align: left; text-ov ...

  9. postman 做接口测试

    Postman 之前是作为Chrome 的一个插件,现在要下载应用才能使用. 以下是postman 的界面: 各个功能区的使用如下: 快捷区: 快捷区提供常用的操作入口,包括运行收藏夹的一组测试数据, ...

  10. JS的 instanceof 方法

    http://www.cnblogs.com/jasonxuli/p/6769282.html 这是 2014-12-10 发在 iteye 上的文章 今天突然想起js的原型继承模型和相关的proto ...