--参考文献;

--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. Html - a标签如何包裹Div

    a标签如何包裹Div? 其实应该将思路转变为将a标签作为一个遮罩来覆盖div. 做法是将a标签放置在该div下,通过将div进行相对定位[position:relative] 将a标签进行绝对定位[p ...

  2. java.sql.SQLException: 关闭的连接 解决办法

    程序如果长时间不进行数据库操作,那么数据源中的 Connection 很可能已经断开.其原因有可能是防火墙,或者连接的数据库设置的超时时间.这里使用的是 C3P0 连接 oracle 数据库,引起的异 ...

  3. Memcached 笔记与总结(1)Linux(CentOS 6.6) 和 Windows(7)下安装与配置 Memcached (1.4.24)与 Memcached 基础命令

    Memcached 官方网站:http://memcached.org/ 官网对其的描述是: What is Memcached? Free & open source, high-perfo ...

  4. PHP 开发 APP 接口 学习笔记与总结 - APP 接口实例 [1] 单例模式连接数据库

    单例模式 单例模式三大原则: ① 构造函数需要标记为非 public (防止外部使用 new 操作符创建对象),单例类不能在其他类中实例化,只能被自身实例化: ② 拥有一个保存类的实例的静态成员变量 ...

  5. Centos 6.4 python 2.6 升级到 2.7

    Centos 6.4 python 2.6 升级到 2.7 分类: Python Linux2013-09-13 21:35 37278人阅读 评论(2) 收藏 举报 一开始有这个需求,是因为用 Ya ...

  6. PHP CURL 多线程 GET/POST 类

    PHP CURL 多线程 GET/POST 类 2015-01-01 分类:技术文章 阅读(623) 评论(0) 如果有需要更正或更高效的建议,欢迎在OSchina分享~\(≧▽≦)/~ http:/ ...

  7. PHP数组常用函数分类整理

    一.数组操作的基本函数数组的键名和值array_values($arr);  获得数组的值array_keys($arr);  获得数组的键名array_flip($arr);  数组中的值与键名互换 ...

  8. font awesome

    http://stackoverflow.com/questions/21406538/how-to-use-font-awesome-icons-from-node-modules

  9. MySql解决插入中文乱码问题

    在dos中登陆mysql 后输入: // 查看数据使用的所有编码show variables like 'character%';// 修改客户端的编码 为 gbkset character_set_ ...

  10. session和cookie区别

    <?php session_start(); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E ...