//                       封装
//生成实例对象的原始模式
//假如我们把一个动物看成一个对象 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里面的 封装的更多相关文章

  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. Linux基础整理

    命令 说明 chsh 查看和修改当前登录的Shell export 查看和设置Shell环境变量 read 读取从键盘或文件输入的数据 expr 四则远算和字符串运算 tmux 一个窗口操作多个会话 ...

  2. textCNN原理

    一.TextCnn的结构 1. 嵌入层(embedding layer) textcnn使用预先训练好的词向量作embedding layer.对于数据集里的所有词,因为每个词都可以表征成一个向量,因 ...

  3. Springboot集成Quartz

    之前学习过spring的定时任务 :https://www.cnblogs.com/slimshady/p/10112515.html 本文主要学习记录下springboot使用quartz 1.   ...

  4. JGUI源码:DataTable固定列样式(20)

    本来感觉这个固定列很容易实现的,一般都是几个table组合实现,真正自己从头做的时候,发现有很多坑,本文只是固定列原理,真正实现datatable的话,代码量比较大的,后续再进行完善. 使用左中右三个 ...

  5. Java JPS找不到正在执行的java进程 jps cannot see running java process

    最近磁盘进展,把临时目录/tmp给全删了,结果发现jps的输出为空,找不到正在运行的jvm进程. 但是新建的进程没有问题,能够正常查看: [root@node-master ~]# ps -e|gre ...

  6. RLException: XXX is neither a launch file in package XXX nor is XXX a launch file name问题解决

    在运行roslaunch时出现了类似下面的错误: RLException: XXX is neither a launch file in package XXX nor is XXX a launc ...

  7. CF1153C Serval and Parenthesis Sequence

    题目地址:CF1153C Serval and Parenthesis Sequence 思路:贪心 如果有解,那么 \(s_0 = (\) && \(s_{n-1} = )\) &a ...

  8. day10 函数的定义及函数语法详解

    """ 今日内容: (1)函数的定义及特点 (2)函数的语法及函数的四部分 (3)函数的分类 (4)函数的调用 (5)函数的return详解 一.函数的定义 1.什么是函 ...

  9. zynq DMA控制器

    Zynq-7000系列器件PS端的DMA控制器采用ARM的IP核DMA-330(PL-330)实现. 特点: 1.8个独立的通道,4个可用于PL—PS间数据管理,每个通道有1024Byte的MFIFO ...

  10. vue轮播图中间大两头小

    <template> <div v-if="items.length" class="full-page-slide-wrapper"> ...