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改变HTML元素的样式改变CSS及元素属性
Nov 12 Javascript
jquery获取当前元素索引值用法实例
Jun 10 Javascript
Jquery实现纵向横向菜单
Jan 24 Javascript
JavaScript操作表单实例讲解(上)
Jun 20 Javascript
jQuery soColorPacker 网页拾色器
Jun 22 Javascript
JavaScript用JSONP跨域请求数据实例详解
Jan 06 Javascript
如何在Angular2中使用jQuery及其插件的方法
Feb 09 Javascript
Bootstrap DateTime Picker日历控件简单应用
Mar 25 Javascript
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
May 30 Javascript
vue2.0 中#$emit,$on的使用详解
Jun 07 Javascript
vue+mockjs模拟数据实现前后端分离开发的实例代码
Aug 08 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
Jul 19 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
PHP 小心urldecode引发的SQL注入漏洞
2011/10/27 PHP
基于PHP常用函数的用法详解
2013/05/10 PHP
PHP实现全角字符转为半角方法汇总
2015/07/09 PHP
PHP使用Pear发送邮件(Windows环境)
2016/01/05 PHP
关于PHP文件的自动运行方法分析
2016/05/13 PHP
Redis构建分布式锁
2017/03/28 PHP
Laravel框架实现的记录SQL日志功能示例
2018/06/19 PHP
jquery 常用操作整理 基础入门篇
2009/10/14 Javascript
一个简单的js鼠标划过切换效果
2010/06/30 Javascript
css样式标签和js语法属性区别
2013/11/06 Javascript
用js+iframe形成页面的一种遮罩效果的具体实现
2013/12/31 Javascript
JS的数组迭代方法
2015/02/05 Javascript
js实现类似jquery里animate动画效果的方法
2015/04/10 Javascript
详解JavaScript中的客户端消息框架设计原理
2015/06/24 Javascript
原生JS实现前端本地文件上传
2018/09/08 Javascript
微信小程序实现消息框弹出动画
2020/04/18 Javascript
javascript删除数组元素的七个方法示例
2019/09/09 Javascript
Vue 实例事件简单示例
2019/09/19 Javascript
浅谈微信小程序列表埋点曝光指南
2019/10/15 Javascript
jQuery 实现DOM元素拖拽交换位置的实例代码
2020/07/14 jQuery
vue组件开发之tab切换组件使用详解
2020/08/21 Javascript
[44:01]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS paiN
2018/03/31 DOTA
[05:26]TI10典藏宝瓶套装外观展示
2020/07/03 DOTA
Python自动扫雷实现方法
2015/07/25 Python
tensorflow中next_batch的具体使用
2018/02/02 Python
python的几种矩阵相乘的公式详解
2019/07/10 Python
python opencv鼠标事件实现画框圈定目标获取坐标信息
2020/04/18 Python
Django 项目通过加载不同env文件来区分不同环境
2020/02/17 Python
程序员机试试题汇总
2012/03/07 面试题
灵泰克Java笔试题
2016/01/09 面试题
水利学院求职自荐书
2014/02/01 职场文书
人事行政经理岗位职责
2014/06/18 职场文书
利用python Pandas实现批量拆分Excel与合并Excel
2021/05/23 Python
Vue过滤器(filter)实现及应用场景详解
2021/06/15 Vue.js
MySQL深度分页(千万级数据量如何快速分页)
2021/07/25 MySQL
一起来学习Python的元组和列表
2022/03/13 Python