了解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 ...
随机推荐
- Linux基础整理
命令 说明 chsh 查看和修改当前登录的Shell export 查看和设置Shell环境变量 read 读取从键盘或文件输入的数据 expr 四则远算和字符串运算 tmux 一个窗口操作多个会话 ...
- textCNN原理
一.TextCnn的结构 1. 嵌入层(embedding layer) textcnn使用预先训练好的词向量作embedding layer.对于数据集里的所有词,因为每个词都可以表征成一个向量,因 ...
- Springboot集成Quartz
之前学习过spring的定时任务 :https://www.cnblogs.com/slimshady/p/10112515.html 本文主要学习记录下springboot使用quartz 1. ...
- JGUI源码:DataTable固定列样式(20)
本来感觉这个固定列很容易实现的,一般都是几个table组合实现,真正自己从头做的时候,发现有很多坑,本文只是固定列原理,真正实现datatable的话,代码量比较大的,后续再进行完善. 使用左中右三个 ...
- Java JPS找不到正在执行的java进程 jps cannot see running java process
最近磁盘进展,把临时目录/tmp给全删了,结果发现jps的输出为空,找不到正在运行的jvm进程. 但是新建的进程没有问题,能够正常查看: [root@node-master ~]# ps -e|gre ...
- 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 ...
- CF1153C Serval and Parenthesis Sequence
题目地址:CF1153C Serval and Parenthesis Sequence 思路:贪心 如果有解,那么 \(s_0 = (\) && \(s_{n-1} = )\) &a ...
- day10 函数的定义及函数语法详解
""" 今日内容: (1)函数的定义及特点 (2)函数的语法及函数的四部分 (3)函数的分类 (4)函数的调用 (5)函数的return详解 一.函数的定义 1.什么是函 ...
- zynq DMA控制器
Zynq-7000系列器件PS端的DMA控制器采用ARM的IP核DMA-330(PL-330)实现. 特点: 1.8个独立的通道,4个可用于PL—PS间数据管理,每个通道有1024Byte的MFIFO ...
- vue轮播图中间大两头小
<template> <div v-if="items.length" class="full-page-slide-wrapper"> ...