js面向对象--封装
参考自阮一峰老师的文章。
万物皆对象!
一、生成实例对象--原始模式
有一只猫我们把它看成一个对象,它具有两个属性--名字--颜色
var Cat = {name : "",color : ""
}
下面我们生成两个实例对象
var cat1 = {}
cat1.name = "黑猫"; //按照原型对象的属性赋值
cat1.color = "黑色";var cat2 = {}
cat2.name = "白猫";
cat2.color = "白色";
这就是最简单的封装了,把两个属性封装在一个对象里面。但是,这样的写法有两个缺点,一是如果多生成几个实例,写起来就非常麻烦;
二是实例与原型之间,没有任何办法,可以看出有什么联系
二、原始模式改进
我们创建一个函数解决代码重复
function Cat(name,color){return {name:name,color:color}
}
然后生成实例对象,其实就是在调用函数
var cat1 = Cat("黑猫","黑色");
var cat2 = Cat("白猫","白色");
这样就是cat1和cat2之间没有什么关系,不能反映出他们是同一个原型对象实例
三、构造函数模式
所谓构造函数其实就是一个function内部使用了this变量,对构造函数使用new运算符就能创建一个实例对象,并且this变量被绑定在实例对象上
function Cat(name,color){this.name = name;this.color = color;
}
var cat1 = new Cat("大毛","黄色");
var cat2 = new Cat("二毛","黑色");
alert(cat1.name); // 大毛
alert(cat1.color); // 黄色
这时cat1和cat2含有一个constructor属性指向他们的构造函数
alert(cat1.constructor == Cat); //true
alert(cat2.constructor == Cat); //true
js还提供了一个instanceOf运算符验证原型对象与实例对象之间的关系
alert(cat1 instanceof Cat); //true
alert(cat2 instanceof Cat); //true
四、构造函数的模式问题
构造函数会造成内存浪费
现在为Cat对象添加一个不变的属性type(种类)再添加一个方法eat(吃)
function Cat(name,color){this.name = name;this.color = color;this.type = "猫科动物";this.eat = function(){alert("吃吃吃") }
}
var cat1 = new Cat("大毛","黄色");
var cat2 = new Cat ("二毛","黑色");
alert(cat1.type); // 猫科动物
cat1.eat(); // 吃老鼠
这样做就是每一次生成实例type和eat的内容都是一样的,占用内存,那么就要想办法让type和eat在内存中只生成一次
5、prototype
js规定每一个构造函数都有一个prototype属性指向另一个对象,这个对象的所有属性和方法都会被构造函数的实例继承,
这样我们可以把那些不变的属性和方法定义在prototype上
function Cat(name,color){this.name = name;this.color = color;}Cat.prototype.type = "猫科动物";Cat.prototype.eat = function(){alert("吃老鼠")};
然后生成实例
var cat1 = new Cat("黑猫","黑色");
var cat2 = new Cat("白猫","白色");
alert(cat1.type); // 猫科动物
cat1.eat(); // 吃老鼠
这时每一个实例的type和eat都指向同一个内存地址--prototype
验证
alert(cat1.eat == cat2.eat); //true
js面向对象--封装相关推荐
- JavaScript(JS) 面向对象(封装、继承、多态)
面向对象是把事物给对象化,包括其属性和行为.面向对象编程更贴近实际生活的思想.可以简单的理解面向对象的底层还是面向过程,面向过程抽象成类,然后封装,方便使用就是面向对象.本文主要介绍JavaScrip ...
- JS面向对象一:MVC的面向对象封装
JS面向对象一:MVC的面向对象封装 MDNjavascript面向对象 面向对象(Object-Oriented) 面向对象里面向的意思是以...为主,面向对象编程既以对象为主的编程. 面向对象的一 ...
- Js实现拖拽 --面向对象封装( 超详细中文注释)
这类文章网上的很多.我只是做了详细的中文注释.便于大家理解. --废话不多说直接上源码 (用到的图片请随便自己代替) javascript代码部分: 1 /**js拖拽特效封装*/ 2 //关于js ...
- 面向对象封装放大镜js代码
面向对象封装放大镜js代码 <!DOCTYPE html> <html lang="en"><head><meta charset=&qu ...
- js面向对象思想封装拖拽功能,兼容pc和移动端
我们在开发项目过程中,很可能会碰到页面上某块需要可以拖拽移动的功能需求,网上已经有不少前辈分享了相关功能的案例,插件或者代码,但是考虑到项目功能需求,我们可能仅需要实现拖拽移动功能就可以,不需要其他功 ...
- 对js面向对象的理解
转自:http://www.cnblogs.com/jingwhale/p/4678656.html js面向对象理解 ECMAScript 有两种开发模式:1.函数式(过程化),2.面向对象(OOP ...
- js面向对象与PHP面向对象总结
js面向对象: 1.什么是对象? 对象:任何实体都是对象,拥有属性和方法两大特征 属性:描述事物的特点: 方法:实物拥有的行为: 2.在JS里 Person.name="zhang" ...
- JS面向对象编程(OOP)
什么是JS面向对象编程(OOP)? 用对象的思想去写代码,就是面向对象编程. 上面这张图就是一个对象,紫色部分就是车的属性,黄色部分就是修改车的方法: 把他们集合到一个构造函数内,就是这样的 func ...
- JS 面向对象编程、原型链、原型继承(个人学习总结)
一.面向对象 1. 面向对象 是所有语言 都有的一种编程思想,组织代码的一种形式 基于对象的语言:JS语言 面向对象的语言:c++ java c# 2. 面向对象 3大特征 封装:将重用代码封装到函数 ...
最新文章
- 重磅丨AI公共政策成全球热点,美国ITI发布《人工智能政策原则》
- 强化学习笔记:Policy-based Approach
- (仿头条App项目)9.视频列表页面实现
- DeeplabV3+ 在自己环境下跑出现的错误
- 如何使用trace模式运行BRF+应用
- python中的多线程、多进程
- 图像信噪比计算公式_CT 科研设计之图像质量对比研究三步曲
- datagridview实时更新数据_旭诺云盒|智能办公新趋势进出口数据自动提取,通关状态实时更新...
- HDU 5387 Clock(分数类+模拟)
- web前端知识天天学(3)
- Multipart生成的临时文件
- 金山软件广州java开发_金山校招-广州华工站java笔试
- 03 tcl提取文件路径操作
- 82、组合分配式气体灭火系统所需的气体单向阀的数量
- 数据结构-买卖青蛙最大利润
- 小波分析中db1,db2,db3小波有何不同?
- linux键盘符号错乱,Ubuntu14.04 键盘错位小问题
- axios 美[æk‘sioʊz]
- 第一次CCF计算机软件能力认证
- 【转】excel音标乱码
热门文章
- 证照之星老版本升级XE最新版教程说明
- 大批量查询顺丰快递单号在途信息并导出EXCEL表格
- 基于Flink1.14 + Iceberg0.13构建实时数据湖实战
- 无线路由器桥接的设置
- 外网不能访问阿里云服务器的解决办法
- andriod 自定义来电界面功能实现的一些思考
- 立创eda导出封装到allegro_立创EDA教程视频2018
- LoLSkip2.0使用说明(英雄联盟换肤全皮肤版本)
- 名编辑电子杂志大师教程 | 电脑手机模拟在线预览
- 安装Visual Studio 2015时,出现JavaScript_ProjectSystem.msi和JavaScript_LanguageService.msi安装包丢失或损坏的情况