js构造函数、索引数组和属性的实现方式和使用


Posted in Javascript onNovember 16, 2014
<script>
function p(){
 var len=arguments.length;
 for(var i=0;i<len;i++){
  document.write(arguments[i]+"<br/>");
 }
 
}
function Myclass(x,y){
 this.x=x;
 this.y=y;
 this.show=function(){
  return this.x+this.y;
 }
}
var m1=new Myclass(1,2);
var m2=new Myclass(3,4);
p(m1.show(),m2.show());
</script>

存在的问题
1.由于所有的实例都是复制了同一个方法所定义的实体,所以效率(内存效率与执行效率低下),可通过原型继承解决
2.无法对属性值进行访问控制(private ,Public)可通过闭包解决
属性访问的运算对象不是变量而是对象的引用
仅读取数值的整数部分的处理
Math[this<0?'celling':'floor'](this);

关联数组
在js中必须通过对象才能实现关联数组
基本操作 通过键取值,元素的设定,元素的删除

<script>
var map={x:3,y:4};
p(map.x);
delete map.x; //true
p(map.x); //undefined 对不存在的元素进行访问结果是undefined ,由于可以显示地将值设置为undefined ,因此无法通过将值与undefined比较来判断值是否存在 ,可以通过for in进行枚举
a='undefined';
p(a);//undefined
p(typeof map.x==a); //true
</script>

作为关联数组应该注意的点

<script>
function Myclass(x,y){
 this.x=x;
 this.y=y;
}
Myclass.prototype.z=5;
var obj=new Myclass(1,2);
for(var key in obj){
 p(key+":"+obj[key]); //会枚举出通过原型继承来的属性
}
//x:1 y:2 z:5
delete obj.x;//true
p(obj.x); //undefined
p(obj.z); //5
//通过原型继承来的属性 无法被delete删除
delete obj.z; //true
p(obj.z);//5
//在将对象作为关联数组使用时,通常都会使用字面量来创建,即使视图通过使用空的对象字面量来创建一个没有元素的关联数组,也仍会从Object类中继承原型的属性
p('toString' in obj); //true
var obj1={};
p('toString' in obj1);//true
//通过 for in枚举
p(obj1.length); //undefined
for(var k in obj1){
 p(obj1[k]);
}
//没有元素 被枚举出来 这是由于enumerable属性的缘故
//通过hasOwnProperty来判断 是本身的属性还是通过 参与原型继承而来的属性
var map={};
p(map.hasOwnProperty('toString')); //false
map['toString']=1;
p(map.hasOwnProperty('toString')); //true
delete map['toString'] ;
p(map.hasOwnProperty('toString'));//false
</script>

属性的属性

对象的属性 也是有些属性的
如下表总结了在ECMAScript第五版定义了的属性 ,属性值被定为为值属性
表格1

属性的属性名 含义
writable 可以改写属性的值
enumerable 可以通过for in枚举出
configurable 可以改变属性的属性,可以删除属性
get 可以指定属性值的getter函数
set 可以指定属性值的setter函数

不可变对象
即生成之后状态不能再被改变的对象,字符串对象就是典型的不可变对象
灵活运用不可变对象可以提高程序的健壮性,比如在将传递给方法参数时,存在方法对对象内容的改写等
js中可通过以下方式实现不可变对象
1.将属性(状态隐藏藏) ,不提供变更操作(闭包实现)
2.灵活运用ECMAScript第五版提供的函数
3.灵活运用writable,configurable属性以及setter和getter
ECMAScript第五版中用于支持对象不可变的函数 见下表格

方法名 属性新增 属性删除 属性值变更 确认方法
preventExtensions x o o Object.isExtensible
seal x x o Object.isSealed
freeze x x x Object.isFrozen

Object.preventExtensions例子

<script>
var obj={x:2,y:3};
Object.preventExtensions(obj);
//无法新增属性
obj.z=4;
p(Object.keys(obj));//x,y
//可以删除属性
delete obj.y;
p(Object.keys(obj)); //x
//可以更改属性值
obj.x=20;
p(obj.x); //20

//Object.seal例子 将属性的configurable设置为假
var obj={x:2,y:3};
Object.seal(obj);
//无法新增 也无法删除
obj.z=3;
p(Object.keys(obj)); //x,y
delete obj.x; //false
p(Object.keys(obj));//x,y
//可以改变 属性值
obj.x=20;
p(obj.x);//20



//Object.freeze例子 将属性的writable设置为假
var obj={x:2,y:3};
Object.freeze(obj);
//无法新增 也无法删除,也无法改变属性值
obj.z=3;
p(Object.keys(obj)); //x,y
delete obj.x;
p(Object.keys(obj));//x,y
//可以改变 属性值
obj.x=20;
p(obj.x);//20
</script>

需要注意
1.对于以上三种方法一旦更改就无法还原
2.如果想让原型继承中的被继承的方法也不可改变,需要对其进行显示操作

Javascript 相关文章推荐
JS代码格式化和语法着色V2
Oct 14 Javascript
简洁短小的 JavaScript IE 浏览器判定代码
Mar 21 Javascript
jQuery 浮动导航菜单适合购物商品类型的网站
Sep 09 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
Oct 08 Javascript
node.js中的buffer.Buffer.isEncoding方法使用说明
Dec 14 Javascript
常用的JavaScript模板引擎介绍
Feb 28 Javascript
js计算文本框输入的字符数
Oct 23 Javascript
JQuery解析XML的方法小结
Apr 02 Javascript
vuejs绑定class和style样式
Apr 11 Javascript
详解组件库的webpack构建速度优化
Jun 18 Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
Aug 21 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
Jun 01 Javascript
JQuery表单验证插件EasyValidator用法分析
Nov 15 #Javascript
不到30行JS代码实现Excel表格的方法
Nov 15 #Javascript
Node.js中HTTP模块与事件模块详解
Nov 14 #Javascript
jquery中append()与appendto()用法分析
Nov 14 #Javascript
jQuery 插件开发指南
Nov 14 #Javascript
使用JavaScript和C#中获得referer
Nov 14 #Javascript
JavaScript window.location对象
Nov 14 #Javascript
You might like
DC最新动画电影:《战争之子》为何内容偏激,毁了一个不错的漫画
2020/04/09 欧美动漫
php全排列递归算法代码
2012/10/09 PHP
PHP生成条形图的方法
2014/12/10 PHP
简单的php+mysql聊天室实现方法(附源码)
2016/01/05 PHP
php打包压缩文件之ZipArchive方法用法分析
2016/04/30 PHP
php原生导出excel文件的两种方法(推荐)
2016/11/19 PHP
PHP实现微信小程序人脸识别刷脸登录功能
2018/05/24 PHP
微信公众平台开发教程④ ThinkPHP框架下微信支付功能图文详解
2019/04/10 PHP
Js 本页面传值实现代码
2009/05/17 Javascript
js css实现垂直方向自适应的三角提示菜单
2016/06/26 Javascript
JavaScript制作简单的框选图表
2017/05/15 Javascript
JS中的多态实例详解
2017/10/15 Javascript
改变vue请求过来的数据中的某一项值的方法(详解)
2018/03/08 Javascript
vue-cli配置环境变量的方法
2018/07/09 Javascript
vue+iview 实现可编辑表格的示例代码
2018/10/31 Javascript
微信小程序上传多图到服务器并获取返回的路径
2019/05/05 Javascript
Layui Table js 模拟选中checkbox的例子
2019/09/03 Javascript
layui table数据修改的回显方法
2019/09/04 Javascript
layui下拉框获取下拉值(select)的例子
2019/09/10 Javascript
ant-design-vue按需加载的坑的解决
2020/05/14 Javascript
python实现斐波那契数列的方法示例
2017/01/12 Python
django中上传图片分页三级联动效果的实现代码
2019/08/30 Python
python读取图片的几种方式及图像宽和高的存储顺序
2020/02/11 Python
pandas数据拼接的实现示例
2020/04/16 Python
tensorflow实现残差网络方式(mnist数据集)
2020/05/26 Python
详解python datetime模块
2020/08/17 Python
银行实习生的自我评价
2013/12/09 职场文书
会计学专业学生的求职信范文
2014/01/27 职场文书
高三体育教学反思
2014/01/29 职场文书
卫生院健康教育实施方案
2014/06/07 职场文书
2014年安置帮教工作总结
2014/12/11 职场文书
2015教师见习期工作总结
2014/12/12 职场文书
董事长岗位职责
2015/02/13 职场文书
如何理解Vue前后端数据交互与显示
2021/05/10 Vue.js
浅谈如何提高PHP代码的质量
2021/05/28 PHP
Golang解析JSON对象
2022/04/30 Golang