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

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

一、 生成对象的原始模式

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

 var Cat = {
  name : '',
  color : ''
}

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

 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变量。对构造函数使用new运算符,就能生成实例,并且this变量会绑定在实例对象上。

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

 function Cat(name,color){
    this.name=name;
    this.color=color;
}

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

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

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

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

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

 alert(cat1 instanceof Cat); //true
alert(cat2 instanceof Cat); //true

四、构造函数模式的问题

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

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

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

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

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

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

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

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

五、 Prototype模式

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

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

 function Cat(name,color){
  this.name = name;
  this.color = color; } Cat.prototype.type = "猫科动物";
Cat.prototype.eat = function(){alert("吃老鼠")};

  然后,生成实例。

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

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

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

六、 Prototype模式的验证方法

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

6.1 isPrototypeOf()

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

 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]);
}

转载自:http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_encapsulation.html

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,最难的地方是什么? 我觉得,Object(对象)最难.因为Javascript的Object模型很独特,和其他语言都不一样,初学者不容易掌握. 下面就是我的学 ...

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

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

  7. 转:javascript面向对象编程

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

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

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

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

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

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

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

随机推荐

  1. Django基础 - 修改默认SQLite3数据库连接为MySQL

    Django数据库连接默认为SQLite3,打开setting.py可以看到数据库部分的配置如下: DATABASES = { 'default': { 'ENGINE': 'django.db.ba ...

  2. RelativeLayout

    <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android=&q ...

  3. 使用mongo-java-driver-3.0.2连接MongoDB数据库

    这里使用的mongodb的java驱动版本是:3.0.2,文件名mongo-java-driver-3.0.2.jar  博客本地下载下载网址(也可以下载其它版本):http://central.ma ...

  4. BZOJ囤题计划

    决定做一些题,学习jry,开坑(其实是填坑) 大概会刷的很慢,大家别鄙视我..欢迎鄙视 果然慢出翔了,还是填完吧.. 现在做了: 11 [2338][HNOI2011]数矩形 枚举对角线暴力水过,所有 ...

  5. [HDU - 5408] CRB and Farm

    题意: 给出一个由n个点组成的凸包,以及凸包内的k个点,问是否能够在凸包上选择最多2k个点构造一个新的 凸包,使得新的凸包覆盖原来的k个点. 要求2k个点覆盖原本的k个点,只要对原k个点构造凸包,然后 ...

  6. Windows 服务器部署 asp.net core

    踩坑日记与 Windows 服务器部署 asp.net core 指南. 准备 操作系统:Windows Server 2008 R2 或更高版本 文件: Microsoft Visual C++ 2 ...

  7. iOS 11开发教程(一)

    iOS 11开发概述 iOS 11是目前苹果公司用于苹果手机和苹果平板电脑的最新的操作系统.该操作系统的测试版于2017年6月6号(北京时间)被发布.本章将主要讲解iOS 11的新特性.以及使用Xco ...

  8. 1025 PAT Ranking (25)(25 point(s))

    problem Programming Ability Test (PAT) is organized by the College of Computer Science and Technolog ...

  9. Django 模板中使用css, javascript

    Django 模板中使用css, javascript (r'^css/(?Ppath.*)$', 'django.views.static.serve', {'document_root': '/v ...

  10. 韩梦飞沙Android应用集合 想法

    韩梦飞沙  韩亚飞  313134555@qq.com  yue31313  han_meng_fei_sha 那些收藏的图片 那些收藏的微博 那些收藏的音乐 定时短信 音乐列表汇 每天都是快乐的