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 相关文章推荐
通用javascript脚本函数库 方便开发
Oct 13 Javascript
11款新鲜的jQuery插件[附所有demo下载]
Jan 24 Javascript
用JavaScript实现使用鼠标画线的示例代码
Aug 19 Javascript
JavaScript在浏览器标题栏上显示当前日期和时间的方法
Mar 19 Javascript
javascript实现tab切换的两个实例
Nov 05 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
Mar 07 Javascript
JS生成不重复的随机数组的简单实例
Jul 10 Javascript
jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
Sep 17 Javascript
RequireJS 依赖关系的实例(推荐)
Jan 21 Javascript
jquery插件ContextMenu设置右键菜单
Mar 13 Javascript
关于vue单文件中引用路径的处理方法
Jan 08 Javascript
mpvue跳转页面及注意事项
Aug 03 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
php的array_multisort()使用方法介绍
2012/05/16 PHP
深入PHP变量存储的详解
2013/06/13 PHP
在WordPress中使用wp_count_posts函数来统计文章数量
2016/01/05 PHP
JavaScript Title、alt提示(Tips)实现源码解读
2010/12/12 Javascript
jQuery学习笔记 操作jQuery对象 CSS处理
2012/09/19 Javascript
JS实现图片预加载无需等待
2012/12/21 Javascript
jQuery输入城市查看地图使用介绍
2013/05/08 Javascript
JS获取当前网址、主机地址项目根路径
2013/11/19 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
2015/08/26 Javascript
Linux下为Node.js程序配置MySQL或Oracle数据库的方法
2016/03/19 Javascript
第三章之Bootstrap 表格与按钮功能
2016/04/25 Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
2017/01/19 Javascript
基于JavaScript实现自定义滚动条
2017/01/25 Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
2017/02/05 Javascript
如何解决vue2.0下IE浏览器白屏问题
2018/09/13 Javascript
vue使用v-for实现hover点击效果
2018/09/29 Javascript
详解jQuery设置内容和属性
2019/04/11 jQuery
Vue编程式跳转的实例代码详解
2019/07/10 Javascript
小程序实现简单语音聊天的示例代码
2020/07/24 Javascript
Vue实现简单的拖拽效果
2020/08/25 Javascript
Javascript中window.name属性详解
2020/11/19 Javascript
[00:12]2018DOTA2亚洲邀请赛 Sccc亮相SOLO赛,今年他又会有什么样的战绩?
2018/04/06 DOTA
Python多线程编程(七):使用Condition实现复杂同步
2015/04/05 Python
Python实现Logger打印功能的方法详解
2017/09/01 Python
详解Python中 sys.argv[]的用法简明解释
2017/12/20 Python
Python反射和内置方法重写操作详解
2018/08/27 Python
Python3多目标赋值及共享引用注意事项
2019/05/27 Python
Python发展史及网络爬虫
2019/06/19 Python
Python importlib动态导入模块实现代码
2020/04/16 Python
一篇文章带你学习CSS3图片边框
2020/11/04 HTML / CSS
size?爱尔兰官方网站:英国伦敦的球鞋精品店
2019/03/31 全球购物
会计系中文个人求职信
2013/12/24 职场文书
个人简历自我评价
2014/02/02 职场文书
新闻编辑专业毕业自荐书范文
2014/02/05 职场文书
春节慰问信范文
2015/02/15 职场文书
JavaScript 中for/of,for/in 的详细介绍
2021/11/17 Javascript