JavaScript对象封装的简单实现方法(3种方法)


Posted in Javascript onJanuary 03, 2017

本文实例讲述了JavaScript对象封装的简单实现方法。分享给大家供大家参考,具体如下:

Javascript在HTML中变得越来越强大,富客户端,HTML5中的WebGL等。但是我们书写Javascript的时候往往很随意,使用对象的封装是极好的。这里介绍Javascipt三种创建对象的方法。

1. 使用关键字new创建对象

function Person(name, age) {
 this.name = name;
 this.age = age;
}
var p = new Person();  // 也可填充初始化属性,如new Person("lingceng", 22)

2. 使用Object直接创建对象

可以看出,这种方法扩展很方便。

var obj = new Object(); // 这里也可写成 var = {};
obj.name = "lingceng";
obj.age = 22;

3. 使用JSON创建(对象字面量的说法更准确,但JSON更好理解)

从Javascript1.2开始,创建对象有了更快捷的方式。

var p = {
 name: "lingceng", // "name":"lingceng这样加引号解析方式相同
 gender: "male"
};

实践方式

结合构造函数和原型模式创建对象的方式很适合实践。

function Person(name,age)
{
  // 实例属性
  // 实例时多份拷贝
  this.name=name;
  this.age=age;
}
Person.prototype={
  // 因为原型被替换,所以需要恢复construtor的默认指向
  constructor: Person,
  showName:function(){
    alert("ShowName in prototype:"+this.name);
  },
  showAge:function(){
    alert(this.age);
  }
}
var p = new Person("lingceng", 22);
p.showAge(); // 22

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

Javascript 相关文章推荐
Javascript的IE和Firefox兼容性汇编
Jul 01 Javascript
读jQuery之八 包装事件对象
Jun 21 Javascript
JavaScript中的作用域链和闭包
Jun 30 Javascript
取消选中单选框radio的三种方式示例介绍
Dec 23 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
Oct 28 Javascript
关于input全选反选恶心的异常情况
Jul 24 Javascript
JS闭包与延迟求值用法示例
Dec 22 Javascript
JS实现京东首页之页面顶部、Logo和搜索框功能
Jan 12 Javascript
mescroll.js上拉加载下拉刷新组件使用详解
Nov 13 Javascript
关于Google发布的JavaScript代码规范你要知道哪些
Apr 04 Javascript
Vue $mount实战之实现消息弹窗组件
Apr 22 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
Jul 15 Javascript
jquery插件treegrid树状表格的使用方法详解(.Net平台)
Jan 03 #Javascript
vue.js将unix时间戳转换为自定义时间格式
Jan 03 #Javascript
使用Angular缓存父页面数据的方法
Jan 03 #Javascript
JS实现简单的二元方程计算器功能示例
Jan 03 #Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
Jan 03 #Javascript
javascript使用递归算法求两个数字组合功能示例
Jan 03 #Javascript
jQuery仿写百度百科的目录树
Jan 03 #Javascript
You might like
ThinkPHP中实例Model方法的区别说明
2010/08/21 PHP
php实现比较全的数据库操作类
2015/06/18 PHP
培养自己的php编码规范
2015/09/28 PHP
php中引用符号(&)的使用详细介绍
2016/12/06 PHP
JavaScript函数参数使用带参数名的方式赋值传入的方法
2015/03/19 Javascript
JavaScript使用DeviceOne开发实战(一) 配置和起步
2015/12/01 Javascript
js实现C#的StringBuilder效果完整实例
2015/12/22 Javascript
又一款js时钟!transform实现时钟效果
2016/08/15 Javascript
Angular实现的内置过滤器orderBy排序与模糊查询功能示例
2017/12/29 Javascript
vue+webpack实现异步加载三种用法示例详解
2018/04/24 Javascript
微信小程序url传参写变量的方法
2018/08/09 Javascript
微信小程序日历效果
2018/12/29 Javascript
深入浅出vue图片路径的实现
2019/09/04 Javascript
微信小程序调用后台service教程详解
2020/11/06 Javascript
[07:03]显微镜下的DOTA2第九期——430圣堂刺客杀戮秀
2014/06/20 DOTA
python进阶教程之模块(module)介绍
2014/08/30 Python
Django中实现点击图片链接强制直接下载的方法
2015/05/14 Python
Python 中 list 的各项操作技巧
2017/04/13 Python
关于Python正则表达式 findall函数问题详解
2018/03/22 Python
Python实现的微信好友数据分析功能示例
2018/06/21 Python
python聚类算法解决方案(rest接口/mpp数据库/json数据/下载图片及数据)
2019/08/28 Python
Python实现多线程/多进程的TCP服务器
2019/09/03 Python
tensorflow 获取checkpoint中的变量列表实例
2020/02/11 Python
python数字类型math库原理解析
2020/03/02 Python
Flask模板引擎Jinja2使用实例
2020/04/23 Python
python如何写try语句
2020/07/14 Python
JD Sports瑞典:英国领先的运动时尚商店
2018/01/28 全球购物
VICHY薇姿俄罗斯官方网上商店:法国护肤品牌,火山温泉水
2019/11/22 全球购物
日本最大的购物网站乐天市场国际版:Rakuten Global Market(支持中文)
2020/02/03 全球购物
华硕新加坡官方网上商店:ASUS Singapore
2020/07/09 全球购物
工程造价与管理专业应届生求职信
2013/11/23 职场文书
2014全国两会学习心得体会1000字
2014/03/10 职场文书
单方离婚协议书范本(2014版)
2014/09/30 职场文书
2019教师的学习计划
2019/06/25 职场文书
mysql5.7使用binlog 恢复数据的方法
2021/06/03 MySQL
Nginx部署vue项目和配置代理的问题解析
2021/08/04 Servers