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 乱码问题
Aug 06 Javascript
基于jQuery的动态表格插件
Mar 28 Javascript
javascript 通用loading动画效果实例代码
Jan 14 Javascript
js导出txt示例代码
Jan 14 Javascript
页面刷新时记住滚动条的位置jquery代码
Jun 17 Javascript
jquery validate表单验证的基本用法入门
Jan 18 Javascript
Bootstrap Chart组件使用教程
Apr 28 Javascript
jQuery使用经验小技巧(推荐)
May 31 Javascript
微信小程序 出现47001 data format error原因解决办法
Mar 10 Javascript
Vue 单文件中的数据传递示例
Mar 21 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
Jun 14 Javascript
VS Code转换大小写、修改选中文字或代码颜色的方法
Dec 15 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
咖啡与水的关系
2021/03/03 冲泡冲煮
php使用curl发送json格式数据实例
2013/12/17 PHP
用PHP和Shell写Hadoop的MapReduce程序
2014/04/15 PHP
PHP微框架Dispatch简介
2014/06/12 PHP
php新浪微博登录接口用法实例
2014/12/23 PHP
php使用Header函数,PHP_AUTH_PW和PHP_AUTH_USER做用户验证
2016/05/04 PHP
3种方法轻松处理php开发中emoji表情的问题
2016/07/18 PHP
Yii中的cookie的发送和读取
2016/07/27 PHP
PHP实现的下载远程文件类定义与用法示例
2017/07/05 PHP
JavaScript具有类似Lambda表达式编程能力的代码(改进版)
2010/09/14 Javascript
js类式继承的具体实现方法
2013/12/31 Javascript
JavaScript数值数组排序示例分享
2014/05/27 Javascript
JavaScript实现网页对象拖放功能的方法
2015/04/15 Javascript
JavaScript动态添加css样式和script标签
2016/07/19 Javascript
用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法
2016/10/27 Javascript
domReady的实现案例
2016/11/23 Javascript
Javascript中document.referrer隐藏来源的方法
2017/01/16 Javascript
如何让你的JS代码更好看易读
2017/12/01 Javascript
Vue $emit $refs子父组件间方法的调用实例
2018/09/12 Javascript
vue-cli安装使用流程步骤详解
2018/11/08 Javascript
JavaScript中this的全面解析及常见实例
2019/05/14 Javascript
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
2020/04/14 Javascript
VueQuillEditor富文本上传图片(非base64)
2020/06/03 Javascript
vue prop传值类型检验方式
2020/07/30 Javascript
JavaScript使用setTimeout实现倒计时效果
2021/02/19 Javascript
Python使用sax模块解析XML文件示例
2019/04/04 Python
Django1.11配合uni-app发起微信支付的实现
2019/10/12 Python
基于python使用tibco ems代码实例
2019/12/20 Python
HTML块级标签汇总(小篇)
2016/07/13 HTML / CSS
股东协议书范本
2014/04/14 职场文书
感情真挚的毕业生求职信
2014/07/19 职场文书
优秀教研组申报材料
2014/12/26 职场文书
2015年酒店年度工作总结
2015/05/23 职场文书
2016廉洁从政心得体会
2016/01/19 职场文书
导游词之安徽巢湖
2019/12/26 职场文书
python爬取某网站原图作为壁纸
2021/06/02 Python