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
Aug 13 Javascript
javascript instanceof 与typeof使用说明
Jan 11 Javascript
JQuery从头学起第一讲
Jul 04 Javascript
过虑特殊字符输入的js代码
Aug 05 Javascript
js中parseInt函数浅谈
Jul 31 Javascript
JS阻止冒泡事件以及默认事件发生的简单方法
Jan 17 Javascript
Jquery树插件zTree用法入门教程
Feb 17 Javascript
浅析BootStrap中Modal(模态框)使用心得
Dec 24 Javascript
微信小程序 增、删、改、查操作实例详解
Jan 13 Javascript
ionic+AngularJs实现获取验证码倒计时按钮
Apr 22 Javascript
ejsExcel模板在Vue.js项目中的实际运用
Jan 27 Javascript
vue.js图片转Base64上传图片并预览的实现方法
Aug 02 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
基于Discuz security.inc.php代码的深入分析
2013/06/03 PHP
深入理解:单一入口、MVC、ORM、CURD、ActiveRecord概念
2013/06/06 PHP
关于PHP中字符串与多进制转换函数的实例代码
2016/11/03 PHP
php成功操作redis cluster集群的实例教程
2019/01/13 PHP
jquery(live)中File input的change方法只起一次作用的解决办法
2011/10/21 Javascript
js querySelector和getElementById通过id获取元素的区别
2012/04/20 Javascript
JS原型对象通俗"唱法"
2012/12/27 Javascript
利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
2013/01/29 Javascript
JavaScript 函数惰性载入的实现及其优点介绍
2013/08/12 Javascript
Nodejs+express+html5 实现拖拽上传
2014/08/08 NodeJs
jquery中获取元素里某一特定子元素的代码
2014/12/02 Javascript
js分页工具实例
2015/01/28 Javascript
JavaScript Promise 用法
2016/06/14 Javascript
AngularJS  ng-table插件设置排序
2016/09/21 Javascript
jQuery滚动监听实现商城楼梯式导航效果
2017/03/06 Javascript
移动端网页开发调试神器Eruda的介绍与使用技巧
2017/10/30 Javascript
使用vue制作探探滑动堆叠组件的实例代码
2018/03/07 Javascript
jQuery基于随机数解决中午吃什么去哪吃问题示例
2018/12/29 jQuery
Vue组件之高德地图地址选择功能的实例代码
2019/06/21 Javascript
Angular之jwt令牌身份验证的实现
2020/02/14 Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
2020/07/16 Javascript
python利用elaphe制作二维条形码实现代码
2012/05/25 Python
用Python程序抓取网页的HTML信息的一个小实例
2015/05/02 Python
python 同时运行多个程序的实例
2019/01/07 Python
使用PyQtGraph绘制精美的股票行情K线图的示例代码
2019/03/14 Python
python调用自定义函数的实例操作
2019/06/26 Python
CSS 说明横向进度条最后显示文字的实现代码
2020/11/10 HTML / CSS
纯CSS3实现圆圈动态发光特效动画的示例代码
2021/03/08 HTML / CSS
英国花园、DIY、电器和家居用品商店:Robert Dyas
2019/03/18 全球购物
高中体育教学反思
2014/01/29 职场文书
渔夫的故事教学反思
2014/02/14 职场文书
不忘国耻振兴中华演讲稿
2014/05/14 职场文书
2015秋季小学开学寄语
2015/05/27 职场文书
优秀团员主要事迹材料
2015/11/05 职场文书
MySQL 如何分析查询性能
2021/05/12 MySQL
PyTorch dropout设置训练和测试模式的实现
2021/05/27 Python