--参考文献;

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

--js面向对象 封装,继承;

一  .首先,我们先来看看,非面向对象模式编程;陈宇代码多,不灵活,浪费内存;

  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之间没有内在的联系,不能反映出它们是同一个原型对象的实例

三.构造函数模式 

function Cat(name,color){

this.name=name;

this.color=color;

this.type="猫科动物";

this.action=function (){

alert("eat...")

}

}

生成实例:

var cat1=new Cat("一毛","白色");

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

cat1 和 cat2 来自两个同一个原型对象实例;

可以使用 alert (cat1.constructor==Cat)  指向它们的构造函数。//true

可以使用 alert (cat2.constructor==Cat)  指向它们的构造函数。//true

缺点:

对于每一实例对象;type 和 eat()方法都一模一样;

每一次生成实例,都必须为重复的内容,多占一些内存;

改进:

  四 prototype模式。

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

Cat.prototype.action=function (){alert("eat...")};

--prototype  其实都是指向同一个内存地址;类似,c#中的静态方法;

--它是被类所共有的;

   isPrototypeOf()

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

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

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

  hasOwnProperty()

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

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

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

  in运算符

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

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

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

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

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

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

总结:

   

对于直接使用{}创建对象..这种情况在创建极少数对象的情况下且不需要封装的情况下使用,对于需要批量创建对象的情况使用构造函数来实例化对象就非常方便 主要还是看具体的情况吧 。
1.{}可以算做是一个单例模式;
2.function 这种 每次 new的时候,都返回一个不同对象

JS-面向对象-封装的更多相关文章

  1. js面向对象封装级联下拉菜单列表

    本实例开发的级联下拉菜单是根据已有json数据创建的DOM元素.点击文本框后,显示一级菜单.如果菜单中包含子菜单,菜单右侧会有指示箭头.点击菜单之后,会再显示下一级菜单,以此类推.当菜单下无子菜单时, ...

  2. JS 面向对象封装 无限轮播 插件。

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  3. Atitit usbQb212 oo 面向对象封装的标准化与规范解决方案java c# php js

    Atitit usbQb212 oo 面向对象封装的标准化与规范解决方案java c# php js 1.1. 封装性是面象对象编程中的三大特性之一  三个基本的特性:封装.继承与多态1 1.2. 魔 ...

  4. 原生JS面向对象思想封装轮播图组件

    原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...

  5. 拖拽系列二、利用JS面向对象OOP思想实现拖拽封装

    接着上一篇拖拽系列一.JavaScript实现简单的拖拽效果这一篇博客将接着对上一节实现代码利用JS面向对象(OOP)思维对上一节代码进行封装; 使其模块化.避免全局函数污染.方便后期维护和调用:写到 ...

  6. JS面向对象(封装,继承)

    在六月份找工作中,被问的最多的问题就是: js面向对象,继承,封装,原型链这些,你了解多少? 额,,,我怎么回答呢, 只能说,了解一些,不多不少,哈哈哈哈,当然,这是玩笑话. 不过之前学过java,来 ...

  7. 用js面向对象思想封装插件

    js是基于原型的面向对象语言,如果你学过java,c#等正统面向对象语言,你会难以理解js的面向对象,他和普通的面向对象不太一样,今天,我们通过封装一个toast插件,来看看js面向对象是如何运行的. ...

  8. 带你一分钟理解闭包--js面向对象编程

    上一篇<简单粗暴地理解js原型链--js面向对象编程>没想到能攒到这么多赞,实属意外.分享是个好事情,尤其是分享自己的学习感悟.所以网上关于原型链.闭包.作用域等文章多如牛毛,很多文章写得 ...

  9. js面向对象的实现(example 二)

    //这个方法和上篇文章(js面向对象的实现(example 一))中的方法类似,但是更为简洁 //通过函数赋值的方式来构造对象 //同样通过闭包的方式来封装对象及内部变量 (function () { ...

  10. Atitit 面向对象  封装的实现原理

    Atitit 面向对象  封装的实现原理 1.1. 动态对象的模拟使用map+函数接口可以实现1 1.2. 在用结构体 + 函数指针 模拟 对象 1 1.3. This指针..1 1.4. " ...

随机推荐

  1. windows环境下nginx的启动、停止

    Windows下Nginx的启动.停止等命令 在Windows下使用Nginx,我们需要掌握一些基本的操作命令,比如:启动.停止Nginx服务,重新载入Nginx等,下面我就进行一些简单的介绍.1.启 ...

  2. 移动平台webApp的meta标签-----神奇的功效

    对于桌面平台web布局中大家对meta标签再熟悉不过了,它永远位于 head 元素内部,对做SEO的朋友一定对meta有种特殊的感情吧,今天我们就来说说移动平台的meta标签,在移动平台meta标签究 ...

  3. iOS移动开发周报-第21期

    iOS移动开发周报-第21期 [摘要]:本期iOS移动开发周报带来如下内容:苹果iCloud中国数据转存中国电信,Swift Operators,100 个 Swift 必备 tips,FLEXLoa ...

  4. [转] - 如何用QTcpSocket传送图片

    我们知道,tcp网络编程发送数据是利用套接字来实现,将要传输的东西转化为数据流再进行传输,为了确保数据传输的准确性和安全性,我们在发送数据流前发送一个quint32的常量来表示所要发送的数据的大小:当 ...

  5. [转载] - QWidget、QMainWindow、QDialog和QFrame的区别

    继承关系:在Qt中所有的类都有一个共同的基类QObject ,QWidget直接继承与QPaintDevice类,QDialog.QMainWindow.QFrame直接继承QWidget 类.   ...

  6. 提示用户升级IE6浏览器的办法

    IE6一直饱受设计者们的诟病,互联网风云变幻十多年,唯一没变的就是这款在当初被微软内置在winxp系统而又火的不行的浏览器.而如今,在日新月异的网络环境下,IE6却让一个原本美观整洁的网页变得满目疮痍 ...

  7. 我装GitHub的过程

    GitHub是老师推荐的没正真的使用过,这次安装也是按提示的,不知对否,且还没使用,只是记录一下自己的过程.我是在线安装的. 1.下载GitHub安装问价,双击开始安装 2.出现的可能是系统相关配置吧 ...

  8. mac使用指南:brew的安装

    官网 http://brew.sh/ 安装并且下载brew /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/ ...

  9. php的源代码包构建一个空的php扩展。

    下载一个php的源代码包,这里使用的是php 4.0.5版,解压后会看到php的根目录下会有README.EXT_SKEL这样一个文件,打开详细阅读了一下,发现了一个非常好用的工具,这个工具可以帮你构 ...

  10. GridVeiw 使用

    1. 因使用的是 Mongodb,因此要在 ActiveDataProvider 中指定 key 属性 2. 自定义表格中的按钮 'class' => 'yii\grid\ActionColum ...