--参考文献;

--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. FFmpeg - 音频解码过程

    1. 注册所有解码器 av_register_all(); 2. Codec & CodecContext AVCodec* codec = avcodec_find_decoder(CODE ...

  2. 用Java通过串口发送手机短信

    用Java通过串口发短信其实很简单,因为有现成的类库供我们使用.有底层的类库,也有封装好一点的类库,下面我介绍一下在 Win32 平台下发送短信的方法. 如果你想用更底层的类库开发功能更强大的应用程序 ...

  3. C Memory Layout C语言中的内存布局

    在C语言中,内存的主要分为下列几部分: 1. Text/Code Segment 文本/代码区 2. Initialized Data Segments 初始化的数据区 3. Uninitialize ...

  4. C++ sort vector<vector<int> > or vector<MyClass> 容器的排序

    C++的STL中提供了很强大的排序函数sort,可以对任意数组,结构体及类进行排序,下面我们先来看最简单的数组排序.默认的升序排列,我们也可以在后面加上less或greater来告诉编译器我们想要的排 ...

  5. WPF 一个数据库连接测试的实现

    要实现的功能效果图如下:因为我们要测试数据是从输入框获得的,所以,我们的连接字符串不是写死在应用程序中的.下面我就详细介绍一下.

  6. Css3 - 动画旋转

    旋转1: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="U ...

  7. 自制Chrome拓展

    淘宝试用自动点击: 谷歌其实就是一些html+css+js+静态资源.但是里面有一个特别的配置文件manifest.json.该文件和Android的那个androidmanifest.xml类似,记 ...

  8. 前端编码风格规范(3)—— JavaScript 规范

    JavaScript 规范 全局命名空间污染与 IIFE 总是将代码包裹成一个 IIFE(Immediately-Invoked Function Expression),用以创建独立隔绝的定义域.这 ...

  9. 《Java核心技术卷二》笔记(三)正则表达式

    正则表达式语法 一个正则表达式描述了字符串的构成规则(模式).如果一个具体的字符串正好符合正则表达式描述的这个规则,这个字符串就是与表达式匹配的.先看一下怎么描述这种规则,也就是正则表达式语法.正则表 ...

  10. twitter storm源码走读之1 -- nimbus启动场景分析

    欢迎转载,转载时请注明作者徽沪一郎及出处,谢谢. 本文详细介绍了twitter storm中的nimbus节点的启动场景,分析nimbus是如何一步步实现定义于storm.thrift中的servic ...