1. // 封装
  1. //生成实例对象的原始模式
  2. //假如我们把一个动物看成一个对象
  3.  
  4. var cat = { //那么它有名字和颜色两个属性
  5. name:'',
  6. color:''
  7. };
  8.  
  9. //接下来我们根据原形对象来生成实例对象
  10.  
  11. var cat1 = {}; //创建一个空对象
  12. cat1.name = "猫"; //按照原形对象的属性赋值
  13. cat1.color = "黑色";
  14.  
  15. //这就是最简单的封装
  16. //原始模式的缺点:如果我们要创建多个对象,那么代码会比较麻烦,并且我们看不出实例对象与原型之间有任何联系。
  17.  
  18. //改进:
  19. //我们可以写一个函数,解决代码重复的问题
  20. function Cat( name, color){
  21. return{
  22. name : name,
  23. color : color
  24. }
  25. }
  26.  
  27. //然后生成实例对象,就相当于是在调用函数。但是这两个实例对象并没有什么联系,不能反映出它们是同一个原型对象
  28. var Cat1 = new Cat("猫","黑色");
  29. var Cat1 = new Cat("猫","黄色");
  30.  
  31. //构造函数模式
  32. //构造函数模式可以解决从原形对象生成实例的问题
  33. //构造函数就是在一个普通的函数的内部使用了this变量,并且可以通过new一个构造函数来生成实例,并且this会绑定在实例对象上
  34. function Cat(name, color){
  35. this.name = name;
  36. this.color = color;
  37. }
  38.  
  39. var Cat1 = new Cat("猫","蓝色");
  40. var Cat2 = new Cat("猫","绿色");
  41. console.log(Cat1);
  42. console.log(Cat2);
  43.  
  44. //生成的实例对象会有一个constructor属性,constructor可以指向它们的构造函数;
  45. alert(Cat1.constructor == Cat); //true
  46. alert(Cat1 instanceof Cat); // true instanceof可以验证原型对象与实例对象之间的关系
  47.  
  48. //构造函数模式浪费内存问题
  49.  
  50. function Cat(name, color){
  51. this.name = name;
  52. this.color = color;
  53. this.typ = "hello",
  54. this.ce = function(){
  55. console.log("我是ce")
  56. }
  57. }
  58.  
  59. var Cat1 = new Cat("name", "color");
  60. var Cat2 = new Cat("name1", "color1");
  61. alert(Cat1.typ+Cat1.ce());
  62. alert(Cat2.typ+Cat2.ce());
  63.  
  64. /*会弹出 属性并且会执行ce()方法,问题来了,如果我们有很多个实例对象,
  65. 那么就会有很多个this.typ属性和ce()方法,并且里面的值都是重复的,这样会浪费不必要的内存以及效率。
  66.  
  67. prototype模式
  68. js规定了每个构造函数都有一个prototype属性,指向另一个对象,这个对象的所有属性和方法都会被构造函数
  69. 的实例和方法继承,这样我们可以把那些不变的属性和方法定义在prototype对象上。
  70. */
  71.  
  72. function Cat(name){
  73. this.name = name;
  74. }
  75. Cat.prototype.iio = "prototype";
  76. Cat.prototype.ce = function (){ console.log("方法")}
  77.  
  78. var Cat1 = new Cat();
  79. var Cat2 = new Cat();
  80. console.log(Cat1.iio); //打印:prototype
  81. Cat1.ce(); //打印:方法
  82. console.log(Cat2.iio); //打印:prototype
  83. //这时的iio属性和ce方法其实都是同一个内存地址,指向prototype对象,因此提高了效率
  84.  
  85. alert(Cat.prototype.isPrototypeOf(Cat1));
  86. //返回true isPrototypeOf()方法用来判断某个prototype对象和某个实例之间的关系
  87.  
  88. alert(Cat1.hasOwnProperty("name")) //返回true
  89. alert(Cat1.hasOwnProperty("iio")) //返回false
  90. //用来判断某一属性到底是本地属性还是继承prototype对象的属性
  91.  
  92. alert("name" in Cat1);
  93. for(var prop in Cat1){ console.log(cat1[prop])}
  94. //可以判断某个实例是否有某个属性,无论是本地的还是继承的,并且还可以遍历某个对象的所有属性

注:参考大佬阮一峰的文章http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_encapsulation.html

这是我学到的知识,大家一起学。

了解javascript里面的 封装的更多相关文章

  1. javascript通用事件封装

    随着最近几年Html5的兴起,越来越多的应用采用html5进行实现,一个优秀的网页应用不但需要美观简洁的UI界面,更需要一个良好的交互.网页应用大部分的交互需要用javascript事件进行实现.虽然 ...

  2. 我自己的Javascript 库,封装了一些常用函数 Kingwell.js

    我自己的Javascript 库,封装了一些常用函数 Kingwell.js 博客分类: Javascript javascript 库javascript库  现在Javascript库海量,流行的 ...

  3. JavaScript设计模式之一封装

    对于熟悉C#和Java的兄弟们,面向对象的三大思想(封装,继承,多态)肯定是了解的,今天我想讲讲如何在Javascript中利用封装这个特性,开讲! 我们会把现实中的一些事物抽象成一个Class并且把 ...

  4. 跨浏览器的javascript事件的封装

    一,跨浏览器的事件处理程序 1,DOM0级处理事件 将一个函数赋值给一个事件处理程序属性. 事件流:冒泡阶段. 使用: 为元素增加事件: var btn = document.getElementBy ...

  5. JavaScript大杂烩3 - 理解JavaScript对象的封装性

    JavaScript是面向对象的 JavaScript是一种基于对象的语言,你遇到的所有东西,包括字符串,数字,数组,函数等等,都是对象. 面向过程还是面向对象? JavaScript同时兼有的面向过 ...

  6. 第一百六十一节,封装库--JavaScript,完整封装库文件

    封装库--JavaScript,完整封装库文件 /** *feng_zhuang_ku_1.0版本,js封装库,2016/12/29日:林贵秀 **/ /** 前台调用 * 每次调用$()创建库对象, ...

  7. 第一百四十三节,JavaScript,利用封装库做百度分享

    JavaScript,利用封装库做百度分享 效果图 html代码 <div id="share"> <h2>分享到</h2> <ul> ...

  8. 如何在Javascript中利用封装这个特性

    对于熟悉C#和Java的兄弟们,面向对象的三大思想(封装,继承,多态)肯定是了解的,那么如何在Javascript中利用封装这个特性呢? 我们会把现实中的一些事物抽象成一个Class并且把事物的属性( ...

  9. 2018.2.2 JavaScript中的封装

    JavaScript中的封装 1.封装的概念 通过将一个方法或者属性声明为私用的,可以让对象的实现细节对其他对象保密以降低对象之间的耦合程度,可以保持数据的完整性并对其修改方式加以约束,这样可以使代码 ...

  10. javascript里的封装

    用javascript闭包的特性,可以模拟实现私有变量.私有方法. var myObject = =(function(){ var privateValue; function privateMet ...

随机推荐

  1. Ubuntu16.04安装NVIDA驱动和CUDA

    该GPU是计算卡,不会用做显示,所以如果你希望自己的显示使用GPU,本方法可能失效. 服务器配置: CPU: E5-母鸡 GPU: NVIDIA  Tesla K40c 操作系统:Ubuntu 16. ...

  2. Swift 4 关于Darwin这个Module

    大家在做app或者framework的时候经常会用到生成随机数的方法arc4random系列,或者取绝对值abs()等.所以我有一次好奇的想看看在Developer Document里 是怎么描述这些 ...

  3. mysql数据库 删除某几个字段相同的重复记录并根据另一字段留下一条记录

    1.例如Mysql数据库中表a中的记录,id=2,id=6,id=7的记录是重复的(iId,cId等多个字段相同),现在想留下id最小(id=2)或最大(id=7)的一条记录

  4. IDEA (mac版)

    mac键:option=alt command=ctrl idea快捷键 command+Enter(get,set界面) command+alt+L (格式化代码) ctrl+shift+space ...

  5. PAT-B-1020 月饼 (25)(25 分)

    题目描述: 月饼是中国人在中秋佳节时吃的一种传统食品,不同地区有许多不同风味的月饼.现给定所有种类月饼的库存量.总售价.以及市场的最大需求量,请你计算可以获得的最大收益是多少. 注意:销售时允许取出一 ...

  6. css 实现加载中3个点跳动

    <style type="text/css">.loading:after { overflow: hidden; display: inline-block; ver ...

  7. Win10蓝屏的一些解决办法

    请仔细回想这个错误是什么时候出现的: 第一次发生时你对系统做了哪些操作: 发生时正在进行什么操作: 从这些信息中找出可能的原因: 从而选择相应解决方案并尝试排除. 0x0000000A:IRQL_NO ...

  8. spring boot2.0.4集成druid,用jmeter并发测试工具调用接口,druid查看监控的结果

    一.项目介绍(本项目用的编程语言是jdk8,项目源码:https://github.com/zhzhair/spring-boot-druid.git) 1.引入pom依赖: <dependen ...

  9. mac 安装和使用MongoDB

    安装 尝试一:手动命令安装尝试二:采用Homebrew尝试三:下载安装包使用安装尝试一:手动命令安装按照官网https://docs.mongodb.com/manual/tutorial/insta ...

  10. MailKit系列之转发电子邮件

    原文:http://www.it1352.com/429181.html 问题 我尝试通过MailKit访问一个IMAP账号,我设法下载邮件(作为的MimeMessage),并在某些时候我需要转发给其 ...