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 相关文章推荐
二叉树先序遍历的非递归算法具体实现
Jan 09 Javascript
滚动条响应鼠标滑轮事件实现上下滚动的js代码
Jun 30 Javascript
浅谈javascript 函数内部属性
Jan 21 Javascript
JavaScript获取DOM元素的11种方法总结
Apr 25 Javascript
剖析Node.js异步编程中的回调与代码设计模式
Feb 16 Javascript
canvas实现绘制吃豆鱼效果
Jan 12 Javascript
jquery 判断是否支持Placeholder属性的方法
Feb 07 Javascript
vue.js将时间戳转化为日期格式的实现代码
Jun 05 Javascript
react的滑动图片验证码组件的示例代码
Feb 27 Javascript
解决vue加scoped后就无法修改vant的UI组件的样式问题
Sep 07 Javascript
原生js生成图片验证码
Oct 11 Javascript
解决基于 keep-alive 的后台多级路由缓存问题
Dec 23 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
为IP查询添加GOOGLE地图功能的代码
2010/08/08 PHP
基于php split()函数的用法详解
2013/06/05 PHP
8个PHP程序员常用的功能汇总
2014/12/18 PHP
PHPCMS2008广告模板SQL注入漏洞修复
2016/10/11 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
YII2框架中使用RBAC对模块,控制器,方法的权限控制及规则的使用示例
2020/03/18 PHP
图片自动缩小的js代码,用以防止图片撑破页面
2007/03/12 Javascript
javascript下查找父节点的简单方法
2007/08/13 Javascript
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
2013/07/08 Javascript
JS操作CSS随机改变网页背景实现思路
2014/03/10 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
2014/04/03 Javascript
ECMAScript6中Set/WeakSet详解
2015/06/12 Javascript
javascript实现的闭包简单实例
2015/07/17 Javascript
jQuery原理系列-css选择器的简单实现
2016/06/07 Javascript
JavaScript基于对象去除数组重复项的方法
2016/10/09 Javascript
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to
2016/12/20 Javascript
jQuery插件echarts去掉垂直网格线用法示例
2017/03/03 Javascript
详解Vue中使用v-for语句抛出错误的解决方案
2017/05/04 Javascript
浅谈ES6 模板字符串的具体使用方法
2017/11/07 Javascript
node.js基于express使用websocket的方法
2017/11/09 Javascript
vue-cli中的babel配置文件.babelrc实例详解
2018/02/22 Javascript
深入理解js A*寻路算法原理与具体实现过程
2018/12/13 Javascript
uploadify插件实现多个图片上传并预览
2019/09/30 Javascript
[44:43]完美世界DOTA2联赛决赛日 FTD vs GXR 第一场 11.08
2020/11/11 DOTA
python自动12306抢票软件实现代码
2018/02/24 Python
Python网络编程之TCP套接字简单用法示例
2018/04/09 Python
Python3.4学习笔记之列表、数组操作示例
2019/03/01 Python
Python Datetime模块和Calendar模块用法实例分析
2019/04/15 Python
pytorch 实现cross entropy损失函数计算方式
2020/01/02 Python
Pytest框架之fixture的详细使用教程
2020/04/07 Python
python获取系统内存占用信息的实例方法
2020/07/17 Python
python help函数实例用法
2020/12/06 Python
玩转CSS3色彩
2010/01/16 HTML / CSS
CSS中几个与换行有关的属性简明总结
2014/04/15 HTML / CSS
浅谈CSS3动画的回调处理
2016/07/21 HTML / CSS
工作能力自我评价2015
2015/03/05 职场文书