--参考文献;

--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. libtiff 生成48位色tif图片

    BOOL CTifImage_48Bits::BitmapConvertTo48BitsTif(CString strImagePath, int nWidth, int nHeight, int n ...

  2. Eclipse @override报错解决

    第一种解决方案: @Override是JDK5 就已经有了,但有个小小的Bug,就是不支持对接口的实现,认为这不是Override 而JDK6 修正了这个Bug,无论是对父类的方法覆盖还是对接口的实现 ...

  3. edtftpj让Java上传FTP文件支持断点续传

    在用Java实现FTP上传文件功能时,特别是上传大文件的时候,可以需要这样的功能:程序在上传的过程中意外终止了,文件传了一大半,想从断掉了地方继续传:或者想做类似迅雷下载类似的功能,文件太大,今天传一 ...

  4. Matlab Delete Row or Col 删除矩阵的行或列

    Matlab中,我们有时候要删除矩阵中的某行某列,可以采用下列方法进行删除: a = [ ]; a(,:) = []; % Delete row a(:,) = []; % Delete col

  5. IOS第七天(1:UiTableView 的基本用法)

    ***表格控件 #import "HMViewController.h" @interface HMViewController () <UITableViewDataSou ...

  6. HDU 3555 数位dp入门

    开始想用dp[i][j]来记录第i位j开头含有49的数的个数 但是init后并不知道如何进行cal 想了想可以用不要62的思想 当作不要49来做 然后减一下 就好 看网上的代码 不要62和这道题用的d ...

  7. oracle 内联同时删除多表

    在 MySql 中,内联同时删除多表可以使用这样的语法: DELETE t1,t2 FROM table1 AS t1 INNER JOIN table2 t2 ... INNER JOIN tabl ...

  8. svn local obstruction, incoming add upon merge

    http://little418.com/2009/05/svn-local-obstruction-incoming-add-upon-merge.html If you've found this ...

  9. 6月辞职->帝都生活

    ---恢复内容开始--- 5月初送走了静,有点伤心,但还是忍住没哭. 纠结了一下上哪个班,上不上基础班,不能再拖了,果断交钱报6月份的ios基础班.之前还有个电话面试,怕怕的,考了很多函数的知识,好多 ...

  10. Machine Learning in Action -- Logistic regression

    这个系列,重点关注如何实现,至于算法基础,参考Andrew的公开课 相较于线性回归,logistic回归更适合用于分类 因为他使用Sigmoid函数,因为分类的取值是0,1 对于分类,最完美和自然的函 ...