JS面向对象编程基础篇(二) 封装操作实例详解


Posted in Javascript onMarch 03, 2020

本文实例讲述了JS面向对象编程封装操作。分享给大家供大家参考,具体如下:

Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象。但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有class(类)。

那么,如果我们要把"属性"(property)和"方法"(method),封装成一个对象,甚至要从原型对象生成一个实例对象,我们应该怎么做呢?

封装

一、 生成实例对象的原始模式

假定我们把猫看成一个对象,它有"名字"和"颜色"两个属性。

var Cat = {



name : '',

               color : ''

      } 

 

现在,我们需要根据这个原型对象的规格(schema),生成两个实例对象。

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("二毛","黑色");

这种方法的问题依然是,cat1cat2之间没有内在的联系,不能反映出它们是同一个原型对象的实例。

三、 构造函数模式

为了解决从原型对象生成实例的问题,Javascript提供了一个构造函数(Constructor)模式。

所谓"构造函数",其实就是一个普通函数,但是内部使用了this变量。对构造函数使用new运算符,就能生成实例,并且this变量会绑定在实例对象上。

比如,猫的原型对象现在可以这样写,

function Cat(name,color){



this.name=name;



this.color=color;


}

我们现在就可以生成实例对象了。

var cat1 = new Cat("大毛","黄色");


var cat2 = new Cat("二毛","黑色");


console.log(cat1.name); // 大毛


console.log(cat1.color); // 黄色

这时cat1cat2会自动含有一个constructor属性,指向它们的构造函数。

console.log(cat1.constructor == Cat); //true


console.log(cat2.constructor == Cat); //true

Javascript还提供了一个instanceof运算符,验证原型对象与实例对象之间的关系。

console.log(cat1 instanceof Cat); //true


console.log(cat2 instanceof Cat); //true

四、构造函数模式的问题

构造函数方法很好用,但是存在一个浪费内存的问题。

请看,我们现在为Cat对象添加一个不变的属性type(种类),再添加一个方法eat(吃)。那么,原型对象Cat就变成了下面这样:

function Cat(name,color){



this.name = name;



this.color = color;



this.type = "猫科动物";



this.eat = function(){console.log("吃老鼠");};


}

还是采用同样的方法,生成实例:

var cat1 = new Cat("大毛","黄色");


var cat2 = new Cat ("二毛","黑色");


console.log(cat1.type); // 猫科动物


cat1.eat(); // 吃老鼠

表面上好像没什么问题,但是实际上这样做,有一个很大的弊端。那就是对于每一个实例对象,type属性和eat()方法都是一模一样的内容,每一次生成一个实例,都必须为重复的内容,多占用一些内存。这样既不环保,也缺乏效率。

console.log(cat1.eat == cat2.eat); //false

能不能让type属性和eat()方法在内存中只生成一次,然后所有实例都指向那个内存地址呢?回答是可以的。

五、 Prototype模式

Javascript规定,每一个构造函数都有一个prototype属性,指向另一个对象。这个对象的所有属性和方法,都会被构造函数的实例继承。

这意味着,我们可以把那些不变的属性和方法,直接定义在prototype对象上。

function Cat(name,color){



this.name = name;



this.color = color;


}


Cat.prototype.type = "猫科动物";


Cat.prototype.eat = function(){console.log("吃老鼠")};

然后,生成实例。

var cat1 = new Cat("大毛","黄色");


var cat2 = new Cat("二毛","黑色");


console.log(cat1.type); // 猫科动物


cat1.eat(); // 吃老鼠

这时所有实例的type属性和eat()方法,其实都是同一个内存地址,指向prototype对象,因此就提高了运行效率。

console.log(cat1.eat == cat2.eat); //true

六、 Prototype模式的验证方法

为了配合prototype属性,Javascript定义了一些辅助方法,帮助我们使用它。,

6.1 isPrototypeOf()

这个方法用来判断,某个proptotype对象和某个实例之间的关系。

console.log(Cat.prototype.isPrototypeOf(cat1)); //true


console.log(Cat.prototype.isPrototypeOf(cat2)); //true

6.2 hasOwnProperty()

每个实例对象都有一个hasOwnProperty()方法,用来判断某一个属性到底是本地属性,还是继承自prototype对象的属性。

console.log(cat1.hasOwnProperty("name")); // true


console.log(cat1.hasOwnProperty("type")); // false

6.3 in运算符

in运算符可以用来判断,某个实例是否含有某个属性,不管是不是本地属性。

console.log("name" in cat1); // true


console.log("type" in cat1); // true

in运算符还可以用来遍历某个对象的所有属性。

for(var prop in cat1) { console.log("cat1["+prop+"]="+cat1[prop]); }

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
Javascript 二维数组
Nov 26 Javascript
ASP.NET中基于JQUERY的高性能的TreeView补充
Feb 23 Javascript
页面右下角弹出提示框示例代码js版
Aug 02 Javascript
如何用js实现鼠标向上滚动时浮动导航
Jul 18 Javascript
详解js实现线段交点的三种算法
Aug 09 Javascript
js 判断数据类型的几种方法
Jan 13 Javascript
MUI 上拉刷新/下拉加载功能实例代码
Apr 13 Javascript
Vue制作Todo List网页
Apr 26 Javascript
jQuery实现标签子元素的添加和赋值方法
Feb 24 jQuery
vue cli使用融云实现聊天功能的实例代码
Apr 19 Javascript
ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
Dec 21 Javascript
原生JS实现天气预报
Jun 16 Javascript
Vue axios与Go Frame后端框架的Options请求跨域问题详解
Mar 03 #Javascript
JS面向对象编程基础篇(一) 对象和构造函数实例详解
Mar 03 #Javascript
vue中改变滚动条样式的方法
Mar 03 #Javascript
vue倒计时刷新页面不会从头开始的解决方法
Mar 03 #Javascript
vuex(vue状态管理)的特殊应用案例分享
Mar 03 #Javascript
使用vue打包进行云服务器上传的问题
Mar 02 #Javascript
微信小程序scroll-view的滚动条设置实现
Mar 02 #Javascript
You might like
mysql_escape_string()函数用法分析
2016/04/25 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
PHP fopen函数用法实例讲解
2019/02/15 PHP
关于laravel模板中生成URL的几种模式总结
2019/10/18 PHP
JS时间选择器 兼容IE6,7,8,9
2012/06/26 Javascript
浏览器加载、渲染和解析过程黑箱简析
2012/11/29 Javascript
js动态为代码着色显示行号
2013/05/29 Javascript
CSS+jQuery实现的一个放大缩小动画效果
2013/09/24 Javascript
jQuery通过控制节点实现仅在前台通过get方法完成参数传递
2015/02/02 Javascript
Angular2 环境配置详细介绍
2016/09/21 Javascript
Ionic2系列之使用DeepLinker实现指定页面URL
2016/11/21 Javascript
分析JS单线程异步io回调的特性
2017/12/01 Javascript
通过jquery toggleClass()属性制作文章段落更改背景颜色
2018/05/21 jQuery
vue开发拖拽进度条滑动组件
2019/09/21 Javascript
React Hooks 实现和由来以及解决的问题详解
2020/01/17 Javascript
如何利用Node.js与JSON搭建简单的动态服务器
2020/06/16 Javascript
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
2020/07/11 Javascript
[05:13]2018DOTA2亚洲邀请赛主赛事第二日战况回顾 LGD、VG双雄携手晋级
2018/04/05 DOTA
Python开发实例分享bt种子爬虫程序和种子解析
2014/05/21 Python
用Python设计一个经典小游戏
2017/05/15 Python
tensorflow构建BP神经网络的方法
2018/03/12 Python
python 同时运行多个程序的实例
2019/01/07 Python
django列表筛选功能的实现代码
2020/03/27 Python
python的json包位置及用法总结
2020/06/21 Python
python else语句在循环中的运用详解
2020/07/06 Python
Python中猜拳游戏与猜筛子游戏的实现方法
2020/09/04 Python
用CSS3来实现社交分享按钮
2014/11/11 HTML / CSS
本科生学习总结的自我评价
2013/10/02 职场文书
毕业生求职简历的自我评价
2013/10/07 职场文书
企业消防安全制度
2014/02/02 职场文书
干部竞争上岗演讲稿
2014/09/11 职场文书
投标文件签署授权委托书范本
2014/10/12 职场文书
感恩母亲节活动总结
2015/02/10 职场文书
财政局个人年终总结
2015/03/03 职场文书
2015年公路养护工作总结
2015/05/13 职场文书