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 类方法定义还是有点区别
Apr 15 Javascript
SyntaxHighlighter语法高亮插件使用说明
Aug 14 Javascript
Js实现当前点击a标签变色突出显示其他a标签回复原色
Nov 27 Javascript
js特殊字符过滤的示例代码
Mar 05 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
Jan 27 Javascript
JS实现Select的option上下移动的方法
Mar 01 Javascript
JSONP原理及简单实现
Jun 08 Javascript
JS中substring与substr的用法
Nov 16 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
Jan 11 Javascript
JS获得一个对象的所有属性和方法实例
Feb 21 Javascript
webpack安装配置与常见使用过程详解(结合vue)
Jun 01 Javascript
mapboxgl实现带箭头轨迹线的代码
Jan 04 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
PHP4(windows版本)中的COM函数
2006/10/09 PHP
15种PHP Encoder的比较
2007/03/06 PHP
centos 5.6 升级php到5.3的方法
2011/05/14 PHP
php解决约瑟夫环示例
2014/04/09 PHP
PHP封装的Twitter访问类实例
2015/07/18 PHP
thinkphp3.x中display方法及show方法的用法实例
2016/05/19 PHP
javascript一些不错的函数脚本代码
2008/09/10 Javascript
判断目标是否是window,document,和拥有tagName的Element的代码
2010/05/31 Javascript
javascript计算当月剩余天数(天数计算器)示例代码
2014/01/09 Javascript
关于JavaScript中name的意义冲突示例介绍
2014/05/29 Javascript
js学习阶段总结(必看篇)
2016/06/16 Javascript
Javascript生成带参数的二维码示例
2016/10/10 Javascript
bootstrap datetimepicker实现秒钟选择下拉框
2017/01/05 Javascript
详解Vue如何支持JSX语法
2017/11/10 Javascript
vue.js与element-ui实现菜单树形结构的解决方法
2018/04/21 Javascript
Vue实现数据请求拦截
2019/10/23 Javascript
微信小程序的引导页实现代码
2020/06/24 Javascript
[03:59]DOTA2英雄梦之声_第07期_水晶室女
2014/06/23 DOTA
[00:53]2015国际邀请赛 中国区预选赛一触即发
2015/05/14 DOTA
Python自定义函数的创建、调用和函数的参数详解
2014/03/11 Python
python3简单实现微信爬虫
2015/04/09 Python
Python实现动态图解析、合成与倒放
2018/01/18 Python
解决python字典对值(值为列表)赋值出现重复的问题
2019/01/20 Python
Python Des加密解密如何实现软件注册码机器码
2020/01/08 Python
Python3之乱码\xe6\x97\xa0\xe6\xb3\x95处理方式
2020/05/11 Python
CSS3中的transform属性进行2D和3D变换的基本用法
2016/05/12 HTML / CSS
html5 移动端视频video的android兼容(去除播放控件、全屏)
2020/03/26 HTML / CSS
伦敦一家非常流行的时尚精品店:Oxygen Boutique
2017/01/15 全球购物
关于元旦的广播稿
2014/02/16 职场文书
《蚂蚁和蝈蝈》教学反思
2014/02/24 职场文书
学校课外活动总结
2014/05/08 职场文书
2014教师党员自我评议(5篇)
2014/09/20 职场文书
2015年助残日活动总结
2015/03/27 职场文书
小学生一年级(书信作文)
2019/08/13 职场文书
MySQL窗口函数的具体使用
2021/11/17 MySQL
MySQL中正则表达式(REGEXP)使用详解
2022/07/07 MySQL