了解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 ...
随机推荐
- weblogic找不到数据源
查看weblogic日志 报错是每个数据源都找不到. 查看oracle用户状态 select username,account_status,lock_date from dba_users; 解 ...
- WebApi系列(从.Net FrameWork 到 .Net Core)
一. 简介 1. 什么是WebApi? WebApi是一个很广泛的概念,在这里我们特指.Net平台下的Asp.Net WebApi框架,它是针对各种客户端(浏览器.APP等)来构建Http服务的一个 ...
- 基于jeesite的cms系统(一):开发环境搭建
基于jeesite的cms系统系列,是对基于jeesite进行二次开发的博客模块开发过程的总结.涉及入门安装,二次开发,部署等 一.概况: JeeSite 是一个 Java 企业级快速开发平台,基于经 ...
- [C++]类成员返回语句 return *this 的理解
经常会在类似 copy-assignment 的成员函数看到返回语句 return *this ,这类函数通常返回类型是所属类的引用. 类成员函数的隐式指针 class *this const 经过 ...
- python接收axios的post请求,并处理后返回数据
公司的python工程师不会js和python数据交互,所以我就去试了一下. 首先安装python,django框架和django-cors-headers. python官网下载,按提示操作,记住最 ...
- 路径规划算法之Bellman-Ford算法
最近由于工作需要一直在研究Bellman-Ford算法,这也是我第一次用C++编写代码. 1.Bellman-Ford算法总结 (1)Bellman-Ford算法计算从源点(起始点)到任意一点的最短路 ...
- java平台学习笔记
java程序从编写源码开始到程序执行一共有三个阶段,编写期,编译期,运行期. 通常,人们都希望自己的程序更快(不仅仅是执行更快,也有编写更快),因此java在不断更新. java源码先通过javac编 ...
- Ajax数据爬取
Ajax的基本原理 以菜鸟教程的代码为例: XMLHTTPRequest对象是JS对Ajax的底层实现: var xmlhttp; if (window.XMLHttpRequest) { // IE ...
- JavaScript定时器详解
假设有以下场景 setTimeout(function timeoutHandler(){ /*Some timeout handle code that runs for 6ms*/ }, 10); ...
- 网络流板子/费用流板子 2018南京I题+2016青岛G题
2018南京I题: dinic,链式前向星,数组队列,当前弧优化,不memset全部数组,抛弃满流点,bfs只找一条增广路,每次多路增广 #include <bits/stdc++.h> ...