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的trim方法
Oct 09 Javascript
Json和Jsonp理论实例代码详解
Nov 15 Javascript
将中国标准时间转换成标准格式的代码
Mar 20 Javascript
JSONP跨域GET请求解决Ajax跨域访问问题
Dec 31 Javascript
Jquery跨浏览器文本复制插件Zero Clipboard的使用方法
Feb 28 Javascript
js拖拽的原型声明和用法总结
Apr 04 Javascript
canvas 绘制圆形时钟
Feb 22 Javascript
vue loadmore 组件滑动加载更多源码解析
Jul 19 Javascript
JavaScript 异步调用
Oct 25 Javascript
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
Jul 13 Javascript
Jquery高级应用Deferred对象原理及使用实例
May 28 jQuery
何时/使用 Vue3 render 函数的教程详解
Jul 25 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
thinkphp浏览历史功能实现方法
2014/10/29 PHP
PHP 接入微信扫码支付总结(总结篇)
2016/11/03 PHP
php微信公众号开发之现金红包
2018/04/16 PHP
PHP+MySQL实现消息队列的方法分析
2018/05/09 PHP
js tab效果的实现代码
2009/12/26 Javascript
javascript判断机器是否联网的2种方法
2013/08/09 Javascript
浅谈JavaScript正则表达式分组匹配
2015/04/10 Javascript
基于jQuery+Cookie实现的防止刷新的在线考试倒计时
2015/06/19 Javascript
js窗口关闭提示信息(兼容IE和firefox)
2015/10/23 Javascript
鼠标悬停小图标显示大图标
2016/01/22 Javascript
JavaScript中 ES6 generator数据类型详解
2016/08/11 Javascript
jQuery复制节点用法示例(clone方法)
2016/09/08 Javascript
JavaScript队列的应用实例详解【经典数据结构】
2017/04/12 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
2017/07/13 Javascript
JSON生成Form表单的方法示例
2018/11/21 Javascript
JS中async/await实现异步调用的方法
2019/08/28 Javascript
JavaScript indexOf()原理及使用方法详解
2020/07/09 Javascript
python中enumerate函数用法实例分析
2015/05/20 Python
Pytorch中accuracy和loss的计算知识点总结
2019/09/10 Python
python和php哪个容易学
2020/06/19 Python
python自动化测试三部曲之request+django实现接口测试
2020/10/07 Python
Python  Asyncio模块实现的生产消费者模型的方法
2021/03/01 Python
SmartBuyGlasses台湾:名牌眼镜,名牌太阳眼镜及隐形眼镜
2017/01/04 全球购物
澳大利亚领先的在线美容商城:Adore Beauty
2017/04/14 全球购物
Lampegiganten丹麦:欧洲领先的照明网上商店
2018/04/25 全球购物
HQhair美国/加拿大:英国化妆品、美容及美发产品商城
2019/04/15 全球购物
Ever New美国:澳大利亚领先的女装时尚品牌
2019/11/28 全球购物
介绍一下HTTP、HTTPS和SSL
2012/12/16 面试题
《一个小村庄的故事》教学反思
2014/04/13 职场文书
效能监察建议书
2014/05/19 职场文书
低碳环保口号
2014/06/12 职场文书
四风自我剖析材料
2014/09/30 职场文书
律师授权委托书范本
2014/10/07 职场文书
运动会广播稿200米(5篇)
2014/10/15 职场文书
道歉情书大全
2015/05/12 职场文书
2016年教师节慰问信
2015/12/01 职场文书