了解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 ...
随机推荐
- php操作excel表格的导入和导出
前言:对于excel大家肯定熟悉不过了的,那么我们在日常的业务中应该是有对这些文件的导入导出操作的 类的下载:composer require phpoffice/phpexcel,其中Classes ...
- 使用lombok 注解Java类
环境信息: IDEA 2016.2.4 Maven 3 JDK 1.8 Maven工程配置: <properties> <lombok.version>1.16.16< ...
- Linux_解决启动网卡失败 Device eth0 does not seem to be present
Linux_解决启动网卡失败 Device eth0 does not seem to be present 虚拟机克隆 发现service network restart 启动失败 故障现象: ...
- Linux-Shell编程之数组操作
源码 #!/bin/bash str="Array - Demo Shell"; echo ${#str} #求字符串長度 #定義 arr=('a' 'b' 'c' 'd' 'e' ...
- Redis的安装与常用配置说明
1.redis安装步骤 1).下载,上传到Linux服务器,并解压 2).预编译(实际上是检查编译环境的过程) 进入目录: cd /opt/soft/redis-3.2.9/deps/jemall ...
- HTTP协议 详解
前言 掌握HTTP协议是每一个开发者的基础,超详细的HTTP协议笔记 正文 HTTP协议格式总览 HTTP line HTTP Method(方法) 介绍了我们请求希望执行的操作类型. 方法有: GE ...
- 移动端雪碧图sprite的实现
移动端适配的时候,通常是用rem作为长宽单位,因此,在不同的设备下,元素的实际宽高(px)是不一样的,如果是单张图片作为为背景图片的时候,最为方便,只要设置背景图片的属性background-size ...
- Python爬虫之12306-分析请求总概述
python爬虫也学了一段时间了.也爬过不少网站,最后我想用12306抢票器这个项目做一个对之前的学习的效果成见也是一个目标(开始学爬虫的时候,看到说,会爬12306,就会爬80%的网站),本人纯自学 ...
- 配置tensorflow和keras时教程及问题总结
基本参数:(如何基本参数和我的电脑不一致,有可能会出意外的错误) 操作系统:Windows 10,64位 Anaconda版本:Python 3.6版本.关于Anaconda的介绍.安装及使用教程可查 ...
- MySQL2.字符集乱码
MySQL2.字符集 此节记录下MySQL出现乱码的原因.还是参考小册子~ 字符集简介 计算机中只能存储二进制数据,建立字符与二进制数据的映射关系来存储字符. 从两方面考虑: 1.界定清楚字符范围,即 ...