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 相关文章推荐
漂亮的仿flash菜单,来自蓝色经典
Jun 26 Javascript
JS 打印界面的CSS居中代码适用所有浏览器
Mar 19 Javascript
JavaScript中实现继承的三种方式和实例
Jan 29 Javascript
详解Wondows下Node.js使用MongoDB的环境配置
Mar 01 Javascript
jQuery ajax全局函数处理session过期后的ajax跳转问题
Jun 03 Javascript
JavaScript面试题(指针、帽子和女朋友)
Nov 23 Javascript
AngularJS的ng-repeat指令与scope继承关系实例详解
Jan 21 Javascript
简单实现js轮播图效果
Jul 14 Javascript
jquery+css实现下拉列表功能
Sep 03 jQuery
在Vue项目中引入腾讯验证码服务的教程
Apr 03 Javascript
详解vue通过NGINX部署在子目录或者二级目录实践
Sep 03 Javascript
Node.js事件的正确使用方法
Apr 05 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
浅谈apache和nginx的rewrite的区别
2013/02/22 PHP
ThinkPHP路由机制简介
2016/03/23 PHP
php中array_unshift()修改数组key注意事项分析
2016/05/16 PHP
许愿墙中用到的函数
2006/10/07 Javascript
JS判断不能为空实例代码
2013/11/26 Javascript
Jquery遍历checkbox获取选中项value值的方法
2014/02/13 Javascript
jQuery中:image选择器用法实例
2015/01/03 Javascript
js实现从数组里随机获取元素
2015/01/12 Javascript
jQuery子窗体取得父窗体元素的方法
2015/05/11 Javascript
浅析ES6的八进制与二进制整数字面量
2016/08/30 Javascript
jQuery子元素过滤选择器用法示例
2016/09/09 Javascript
JavaScript实现form表单的多文件上传
2020/03/27 Javascript
详解如何使用webpack打包Vue工程
2017/05/27 Javascript
vue之数据交互实例代码
2017/06/16 Javascript
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
2017/07/23 Javascript
基于Require.js使用方法(总结)
2017/10/26 Javascript
浅谈webpack4 图片处理汇总
2018/09/12 Javascript
React实现全局组件的Toast轻提示效果
2018/09/21 Javascript
Vue中使用方法、计算属性或观察者的方法实例详解
2018/10/31 Javascript
详解Vue前端对axios的封装和使用
2019/04/01 Javascript
jQuery中实现text()的方法
2019/04/04 jQuery
vue中的inject学习教程
2019/04/24 Javascript
微信小程序实现的canvas合成图片功能示例
2019/05/03 Javascript
django接入新浪微博OAuth的方法
2015/06/29 Python
Python实现读取TXT文件数据并存进内置数据库SQLite3的方法
2017/08/08 Python
Python callable()函数用法实例分析
2018/03/17 Python
pycharm激活码快速激活及使用步骤
2020/03/12 Python
基于SpringBoot构造器注入循环依赖及解决方式
2020/04/26 Python
详解pyinstaller生成exe的闪退问题解决方案
2020/06/19 Python
Opencv 图片的OCR识别的实战示例
2021/03/02 Python
商超业务员岗位职责
2014/03/12 职场文书
高中生思想道德自我评价
2015/03/09 职场文书
爱国电影观后感
2015/06/19 职场文书
python实现的人脸识别打卡系统
2021/05/08 Python
python 如何在list中找Topk的数值和索引
2021/05/20 Python
navicat 连接Ubuntu虚拟机的mysql的操作方法
2022/04/02 MySQL