了解javascript里面的 封装
- // 封装
- //生成实例对象的原始模式
- //假如我们把一个动物看成一个对象
- var cat = { //那么它有名字和颜色两个属性
- name:'',
- color:''
- };
- //接下来我们根据原形对象来生成实例对象
- var cat1 = {}; //创建一个空对象
- cat1.name = "猫"; //按照原形对象的属性赋值
- cat1.color = "黑色";
- //这就是最简单的封装
- //原始模式的缺点:如果我们要创建多个对象,那么代码会比较麻烦,并且我们看不出实例对象与原型之间有任何联系。
- //改进:
- //我们可以写一个函数,解决代码重复的问题
- function Cat( name, color){
- return{
- name : name,
- color : color
- }
- }
- //然后生成实例对象,就相当于是在调用函数。但是这两个实例对象并没有什么联系,不能反映出它们是同一个原型对象
- var Cat1 = new Cat("猫","黑色");
- var Cat1 = new Cat("猫","黄色");
- //构造函数模式
- //构造函数模式可以解决从原形对象生成实例的问题
- //构造函数就是在一个普通的函数的内部使用了this变量,并且可以通过new一个构造函数来生成实例,并且this会绑定在实例对象上
- function Cat(name, color){
- this.name = name;
- this.color = color;
- }
- var Cat1 = new Cat("猫","蓝色");
- var Cat2 = new Cat("猫","绿色");
- console.log(Cat1);
- console.log(Cat2);
- //生成的实例对象会有一个constructor属性,constructor可以指向它们的构造函数;
- alert(Cat1.constructor == Cat); //true
- alert(Cat1 instanceof Cat); // true instanceof可以验证原型对象与实例对象之间的关系
- //构造函数模式浪费内存问题
- function Cat(name, color){
- this.name = name;
- this.color = color;
- this.typ = "hello",
- this.ce = function(){
- console.log("我是ce")
- }
- }
- var Cat1 = new Cat("name", "color");
- var Cat2 = new Cat("name1", "color1");
- alert(Cat1.typ+Cat1.ce());
- alert(Cat2.typ+Cat2.ce());
- /*会弹出 属性并且会执行ce()方法,问题来了,如果我们有很多个实例对象,
- 那么就会有很多个this.typ属性和ce()方法,并且里面的值都是重复的,这样会浪费不必要的内存以及效率。
- prototype模式
- js规定了每个构造函数都有一个prototype属性,指向另一个对象,这个对象的所有属性和方法都会被构造函数
- 的实例和方法继承,这样我们可以把那些不变的属性和方法定义在prototype对象上。
- */
- function Cat(name){
- this.name = name;
- }
- Cat.prototype.iio = "prototype";
- Cat.prototype.ce = function (){ console.log("方法")}
- var Cat1 = new Cat();
- var Cat2 = new Cat();
- console.log(Cat1.iio); //打印:prototype
- Cat1.ce(); //打印:方法
- console.log(Cat2.iio); //打印:prototype
- //这时的iio属性和ce方法其实都是同一个内存地址,指向prototype对象,因此提高了效率
- alert(Cat.prototype.isPrototypeOf(Cat1));
- //返回true isPrototypeOf()方法用来判断某个prototype对象和某个实例之间的关系
- alert(Cat1.hasOwnProperty("name")) //返回true
- alert(Cat1.hasOwnProperty("iio")) //返回false
- //用来判断某一属性到底是本地属性还是继承prototype对象的属性
- alert("name" in Cat1);
- for(var prop in Cat1){ console.log(cat1[prop])}
- //可以判断某个实例是否有某个属性,无论是本地的还是继承的,并且还可以遍历某个对象的所有属性
注:参考大佬阮一峰的文章http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_encapsulation.html。
这是我学到的知识,大家一起学。
了解javascript里面的 封装的更多相关文章
- javascript通用事件封装
随着最近几年Html5的兴起,越来越多的应用采用html5进行实现,一个优秀的网页应用不但需要美观简洁的UI界面,更需要一个良好的交互.网页应用大部分的交互需要用javascript事件进行实现.虽然 ...
- 我自己的Javascript 库,封装了一些常用函数 Kingwell.js
我自己的Javascript 库,封装了一些常用函数 Kingwell.js 博客分类: Javascript javascript 库javascript库 现在Javascript库海量,流行的 ...
- JavaScript设计模式之一封装
对于熟悉C#和Java的兄弟们,面向对象的三大思想(封装,继承,多态)肯定是了解的,今天我想讲讲如何在Javascript中利用封装这个特性,开讲! 我们会把现实中的一些事物抽象成一个Class并且把 ...
- 跨浏览器的javascript事件的封装
一,跨浏览器的事件处理程序 1,DOM0级处理事件 将一个函数赋值给一个事件处理程序属性. 事件流:冒泡阶段. 使用: 为元素增加事件: var btn = document.getElementBy ...
- JavaScript大杂烩3 - 理解JavaScript对象的封装性
JavaScript是面向对象的 JavaScript是一种基于对象的语言,你遇到的所有东西,包括字符串,数字,数组,函数等等,都是对象. 面向过程还是面向对象? JavaScript同时兼有的面向过 ...
- 第一百六十一节,封装库--JavaScript,完整封装库文件
封装库--JavaScript,完整封装库文件 /** *feng_zhuang_ku_1.0版本,js封装库,2016/12/29日:林贵秀 **/ /** 前台调用 * 每次调用$()创建库对象, ...
- 第一百四十三节,JavaScript,利用封装库做百度分享
JavaScript,利用封装库做百度分享 效果图 html代码 <div id="share"> <h2>分享到</h2> <ul> ...
- 如何在Javascript中利用封装这个特性
对于熟悉C#和Java的兄弟们,面向对象的三大思想(封装,继承,多态)肯定是了解的,那么如何在Javascript中利用封装这个特性呢? 我们会把现实中的一些事物抽象成一个Class并且把事物的属性( ...
- 2018.2.2 JavaScript中的封装
JavaScript中的封装 1.封装的概念 通过将一个方法或者属性声明为私用的,可以让对象的实现细节对其他对象保密以降低对象之间的耦合程度,可以保持数据的完整性并对其修改方式加以约束,这样可以使代码 ...
- javascript里的封装
用javascript闭包的特性,可以模拟实现私有变量.私有方法. var myObject = =(function(){ var privateValue; function privateMet ...
随机推荐
- Ubuntu16.04安装NVIDA驱动和CUDA
该GPU是计算卡,不会用做显示,所以如果你希望自己的显示使用GPU,本方法可能失效. 服务器配置: CPU: E5-母鸡 GPU: NVIDIA Tesla K40c 操作系统:Ubuntu 16. ...
- Swift 4 关于Darwin这个Module
大家在做app或者framework的时候经常会用到生成随机数的方法arc4random系列,或者取绝对值abs()等.所以我有一次好奇的想看看在Developer Document里 是怎么描述这些 ...
- mysql数据库 删除某几个字段相同的重复记录并根据另一字段留下一条记录
1.例如Mysql数据库中表a中的记录,id=2,id=6,id=7的记录是重复的(iId,cId等多个字段相同),现在想留下id最小(id=2)或最大(id=7)的一条记录
- IDEA (mac版)
mac键:option=alt command=ctrl idea快捷键 command+Enter(get,set界面) command+alt+L (格式化代码) ctrl+shift+space ...
- PAT-B-1020 月饼 (25)(25 分)
题目描述: 月饼是中国人在中秋佳节时吃的一种传统食品,不同地区有许多不同风味的月饼.现给定所有种类月饼的库存量.总售价.以及市场的最大需求量,请你计算可以获得的最大收益是多少. 注意:销售时允许取出一 ...
- css 实现加载中3个点跳动
<style type="text/css">.loading:after { overflow: hidden; display: inline-block; ver ...
- Win10蓝屏的一些解决办法
请仔细回想这个错误是什么时候出现的: 第一次发生时你对系统做了哪些操作: 发生时正在进行什么操作: 从这些信息中找出可能的原因: 从而选择相应解决方案并尝试排除. 0x0000000A:IRQL_NO ...
- spring boot2.0.4集成druid,用jmeter并发测试工具调用接口,druid查看监控的结果
一.项目介绍(本项目用的编程语言是jdk8,项目源码:https://github.com/zhzhair/spring-boot-druid.git) 1.引入pom依赖: <dependen ...
- mac 安装和使用MongoDB
安装 尝试一:手动命令安装尝试二:采用Homebrew尝试三:下载安装包使用安装尝试一:手动命令安装按照官网https://docs.mongodb.com/manual/tutorial/insta ...
- MailKit系列之转发电子邮件
原文:http://www.it1352.com/429181.html 问题 我尝试通过MailKit访问一个IMAP账号,我设法下载邮件(作为的MimeMessage),并在某些时候我需要转发给其 ...