--参考文献;

--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. 搭建你的第一个Django应用程序

    首先你要确保你机器上面安装了python:Python开发_python的安装 python的相关学习资料:http://www.cnblogs.com/hongten/tag/python/ 其次, ...

  2. Strong TLS configuration on servers

    - Use certificates with at least sha-256 hash algorithms (including intermediate certificates).- Use ...

  3. log4j的配置信息

    首先,在项目中的classes 中新建立一个log4j.properties文件即可: 在实际编程时,要使Log4j真正在系统中运行事先还要对配置文件进行定义.定义步骤就是对Logger.Append ...

  4. OpenStack手动从数据库中删除实例 - ugyn109的专栏 - 博客频道 - CSDN.NET

    由于某种原因我将OpenStack的一个计算节点移除了,但移除前并没有删除在其上运行的实例,后来想通过dash删除这些实例,于是N天过去了,我的dash还显示如下内容:很碍眼是不是?于是我打算手动从数 ...

  5. 【iCore系列核心板视频教程】之 SDRAM 读写实验

    ============================== 技术论坛:http://www.eeschool.org 博客地址:http://xiaomagee.cnblogs.com 官方网店:h ...

  6. The P4 Language Specification v1.0.2 Parser

    <p4规范>解析器部分详解 p4解析器是根据有限状态机的思想来设计的. 解析器中解析的过程可以被一个解析图(parser graph)所表示,解析图中所表示的某一个状态(或者说,在P4语言 ...

  7. python 操作excel 使用笔记

    写入excel, 保存的过程中需要注意,保存格式xls后缀,如果用xlsx会报错 def set_style(name,height,bold=False): """&q ...

  8. 使用shape设置只有部分边框有颜色

    <?xml version="1.0" encoding="UTF-8"?> <layer-list xmlns:android=" ...

  9. maven run as(debug as)没有运行的选项时

    run as - run configration -maven build- goal目录下填上:tomcat:run即可

  10. mysql 锁

    Lock table有两种模式 lock tables table_name  read  [or write]; test1: session 1: lock tables tmp_xf_lock; ...