JavaScript面向对象程序设计教程


Posted in Javascript onMarch 29, 2016

JavaScript中对象的定义为:无序属性的集合,其属性可以包含基本值、对象或者函数。可以把对象想象成散列表,就是一组名值对(key:value),其中值可以是数据或函数,每个对象都是基于一个引用类型创建的。

理解对象

前面的博客里写过创建对象的方式有两种,一种是创建一个object的实例,另一种是使用对象字面量法:

var person = new Object();
person.sex = man;
person.name = bluce
person.age = 58;
person.sayHi() = function(){
console.log('Hello World!');
}

但更多的是采用下面一种方式

var person = {
sex:man,
name:'bluce',
age:'58',
sayHi:function(){
console.log('Hello World!');
}
}

创建对象

使用Object构造函数和对象字面量法都可以创建单个对象,但有明显的缺点:使用同一个接口创建很多对象,会产生大量的重复代码。常用的创建对象方式主要有工厂模式、构造函数模型、原型模式。

这里有自己的一个疑问:采用AMD规范后,编写的单个js文件,可以看做一个模块,也可以说是一个“类”,现在与JavaScript中的这个“类”概念有点混淆了,希望后面能分清应用场合吧。

关于JavaScript面向对象程序设计教程小编就给大家介绍到这里,希望对大家有所帮助!

 下面给大家补充JavaScript面向对象设计——工厂模式

 工厂模式是软件工程领域一种广为人知的设计模式,这种模式抽象了创建具体对象的过程,可以用函数来封装以特定接口创建对象的细节。

之前在Java的DAO中用过这种设计模式,比较容易理解。

function createPerson(name,age,sex){
  var obj = new Object();
  obj.name = name;
  obj.age = age;
  obj.sex = sex;
  obj.sayHi() = function(){
    console.log(this.name);
  }; //引号不要漏掉,养成好的习惯
  return obj;
}
var person1 = createPerson("bluce",58,"man");
var person2 = createPerson("john",68,"man");

使用该函数可以根据接收的参数创建一个包含必要信息的Person对象。可以无数次地调用这个函数,每次都会返回一个包含三个属性和一个方法的对象。工厂模式解决了创建多个相似对象的问题,但没有解决对象识别的问题(如何知道一个对象的类型)

Javascript 相关文章推荐
greybox——不开新窗口看新的网页
Feb 20 Javascript
chrome下jq width()方法取值为0的解决方法
May 26 Javascript
angularjs 处理多个异步请求方法汇总
Jan 06 Javascript
JQuery实现展开关闭层的方法
Feb 17 Javascript
Bootstrap菜单按钮及导航实例解析
Sep 09 Javascript
JavaScript 实现 Tab 点击切换实例代码
Mar 25 Javascript
Angular2下使用pdf插件的方法详解
Apr 29 Javascript
javascript与PHP动态往类中添加方法对比
Mar 21 Javascript
JavaScript使用math.js进行精确计算操作示例
Jun 19 Javascript
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
May 07 Javascript
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 jQuery
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
Apr 13 Javascript
jQuery实现图片加载完成后改变图片大小的方法
Mar 29 #Javascript
Web前端开发工具——bower依赖包管理工具
Mar 29 #Javascript
Jquery操作cookie记住用户名
Mar 29 #Javascript
jQuery简单实现提交数据出现loading进度条的方法
Mar 29 #Javascript
Javascript设计模式之观察者模式(推荐)
Mar 29 #Javascript
AngularJS directive返回对象属性详解
Mar 28 #Javascript
Boostrap模态窗口的学习小结
Mar 28 #Javascript
You might like
div移动 输入框不能输入的问题
2009/11/19 Javascript
JQuery 写的个性导航菜单
2009/12/24 Javascript
javascript基础知识大集锦(二) 推荐收藏
2011/01/13 Javascript
Node.js 服务器端应用开发框架 -- Hapi.js
2014/07/29 Javascript
使用AngularJS编写较为优美的JavaScript代码指南
2015/06/19 Javascript
AngularJS实现全选反选功能
2015/12/08 Javascript
jquery限定文本框只能输入数字(整数和小数)
2016/01/08 Javascript
在javascript中创建对象的各种模式解析
2016/05/16 Javascript
JavaScript  event对象整理及详细介绍
2016/10/10 Javascript
JS实现的相册图片左右滚动完整实例
2016/11/23 Javascript
谈谈JavaScript数组常用方法总结
2017/01/24 Javascript
vue过渡和animate.css结合使用详解
2017/06/14 Javascript
详解vue2.0 transition 多个元素嵌套使用过渡
2017/06/19 Javascript
JS通过调用微信API实现微信支付功能的方法示例
2017/06/29 Javascript
jQuery 实现图片的依次加载图片功能
2017/07/06 jQuery
详解从买域名到使用pm2部署node.js项目全过程
2018/03/07 Javascript
AngularJS与后端php的数据交互方法
2018/08/13 Javascript
JavaScript 自定义html元素鼠标右键菜单功能
2019/12/02 Javascript
微信小程序 this.triggerEvent()的具体使用
2019/12/10 Javascript
微信小程序点击保存图片到本机功能
2019/12/13 Javascript
解决antd Form 表单校验方法无响应的问题
2020/10/27 Javascript
[59:07]海涛为你详解DOTA2新版本“贤哲秘契”
2014/11/22 DOTA
利用python求相邻数的方法示例
2017/08/18 Python
PyQt5主窗口动态加载Widget实例代码
2018/02/07 Python
pycharm使用matplotlib.pyplot不显示图形的解决方法
2018/10/28 Python
Python使用sorted对字典的key或value排序
2018/11/15 Python
springboot配置文件抽离 git管理统 配置中心详解
2019/09/02 Python
Django+uni-app实现数据通信中的请求跨域的示例代码
2019/10/12 Python
python实现小世界网络生成
2019/11/21 Python
HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍
2013/01/31 HTML / CSS
2014年行风建设工作总结
2014/12/01 职场文书
中学生社会实践教育活动总结
2015/05/06 职场文书
2015党建工作简报
2015/07/21 职场文书
2016年9月份红领巾广播稿
2015/12/21 职场文书
同学联谊会邀请函
2019/06/24 职场文书
详细介绍python操作RabbitMq
2022/04/12 Python