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淘宝主图放大镜功能
Oct 20 Javascript
jquery.cookie.js的介绍与使用方法
Feb 09 Javascript
js仿拉勾网首页穿墙广告效果
Mar 08 Javascript
从零开始学习Node.js系列教程五:服务器监听方法示例
Apr 13 Javascript
ionic实现下拉刷新载入数据功能
May 11 Javascript
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
微信小程序实现文字跑马灯
May 26 Javascript
vue element动态渲染、移除表单并添加验证的实现
Jan 16 Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
Apr 25 Javascript
layui实现二维码弹窗、并下载到本地的方法
Sep 25 Javascript
vue简单封装axios插件和接口的统一管理操作示例
Feb 02 Javascript
如何在CocosCreator里画个炫酷的雷达图
Apr 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
php强制文件下载而非在浏览器打开的自定义函数分享
2014/05/08 PHP
PHP正则替换函数preg_replace()报错:Notice Use of undefined constant的解决方法分析
2017/02/04 PHP
jquery $.ajax各个事件执行顺序
2010/10/15 Javascript
P3P Header解决Cookie跨域的问题
2013/03/12 Javascript
IE下写xml文件的两种方式(fso/saveAs)
2013/08/05 Javascript
js+css实现的简单易用兼容好的分页
2013/12/30 Javascript
js实现飞入星星特效代码
2014/10/17 Javascript
JavaScript截取、切割字符串的技巧
2016/01/07 Javascript
js+canvas绘制矩形的方法
2016/01/28 Javascript
CSS3 media queries结合jQuery实现响应式导航
2016/09/30 Javascript
require.js+vue开发微信上传图片组件
2016/10/27 Javascript
js模拟微博发布消息
2017/02/23 Javascript
angular.js+node.js实现下载图片处理详解
2017/03/31 Javascript
Javascript之图片的延迟加载的实例详解
2017/07/24 Javascript
vue如何集成raphael.js中国地图的方法示例
2017/08/15 Javascript
2种简单的js倒计时方式
2017/10/20 Javascript
jQuery中ajax获取数据赋值给页面的实例
2017/12/31 jQuery
原生js实现trigger方法示例代码
2019/05/22 Javascript
微信小程序如何修改radio和checkbox的默认样式和图标
2019/07/24 Javascript
vue el-tree 默认展开第一个节点的实现代码
2020/05/15 Javascript
详解Vue之计算属性
2020/06/20 Javascript
[52:10]LGD vs Optic Supermajor小组赛D组胜者组决赛 BO3 第二场 6.3
2018/06/04 DOTA
Pycharm无法使用已经安装Selenium的解决方法
2018/10/13 Python
Python3.5基础之函数的定义与使用实例详解【参数、作用域、递归、重载等】
2019/04/26 Python
Python程序打包工具py2exe和PyInstaller详解
2019/06/28 Python
python 公共方法汇总解析
2019/09/16 Python
使用phonegap进行本地存储的实现方法
2017/03/31 HTML / CSS
移动端Html5页面生成图片解决方案
2018/08/07 HTML / CSS
纽约家具、家居装饰和地毯店:ABC Carpet & Home
2017/06/21 全球购物
美国奢侈品在线团购网站:Gilt City
2017/11/16 全球购物
39美元购买一副眼镜或太阳镜:39DollarGlasses.com
2018/06/17 全球购物
生产部经理岗位职责
2013/12/16 职场文书
保密协议书范本
2014/04/22 职场文书
中班教师个人总结
2015/02/05 职场文书
单位领导婚礼致辞
2015/07/28 职场文书
Python中X[:,0]和X[:,1]的用法
2021/05/10 Python