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 继承的实现
Jul 09 Javascript
jQuery鼠标经过方形图片切换成圆边效果代码分享
Aug 20 Javascript
Node.js的项目构建工具Grunt的安装与配置教程
May 12 Javascript
JavaScript中数据类型转换总结
Dec 25 Javascript
Bootstrap模态框插件使用详解
May 11 Javascript
浅谈Node Inspector 代理实现
Oct 19 Javascript
你点的 ES6一些小技巧,请查收
Apr 25 Javascript
Express的HTTP重定向到HTTPS的方法
Jun 06 Javascript
在Vue 中使用Typescript的示例代码
Sep 10 Javascript
vue+elementUi图片上传组件使用详解
Aug 20 Javascript
详解Node.js使用token进行认证的简单示例
May 25 Javascript
vue同个按钮控制展开和折叠同个事件操作
Jul 29 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的ob_start();控制您的浏览器cache!
2006/11/25 PHP
php中用加号与用array_merge合并数组的区别深入分析
2013/06/03 PHP
PHP自定义大小验证码的方法详解
2013/06/07 PHP
WordPress中使主题支持小工具以及添加插件启用函数
2015/12/22 PHP
PHP实现微信网页授权开发教程
2016/01/19 PHP
php添加数据到xml文件的简单例子
2016/09/08 PHP
PHP实现Snowflake生成分布式唯一ID的方法示例
2020/08/30 PHP
使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码
2010/12/30 Javascript
GRID拖拽行的实例代码
2013/07/18 Javascript
jquery 获取表单元素里面的值示例代码
2013/07/28 Javascript
JavaScript实现的购物车效果可以运用在好多地方
2014/05/09 Javascript
JavaScript中的Math.E属性使用详解
2015/06/12 Javascript
js实现滚动条滚动到页面底部继续加载
2015/12/19 Javascript
Angularjs 自定义服务的三种方式(推荐)
2016/08/02 Javascript
jquery popupDialog 使用 加载jsp页面的方法
2016/10/25 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
2016/12/18 Javascript
利用transition实现文字上下抖动的效果
2017/01/21 Javascript
js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解
2017/03/15 Javascript
详解如何用babel转换es6的class语法
2018/04/03 Javascript
Angular学习教程之RouterLink花式跳转
2018/05/03 Javascript
Js中将Long转换成日期格式的实现方法
2018/06/05 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
2018/12/13 Javascript
JS实现的A*寻路算法详解
2018/12/14 Javascript
vue动画效果实现方法示例
2019/03/18 Javascript
keep-Alive搭配vue-router实现缓存页面效果的示例代码
2020/06/24 Javascript
vue 出现data-v-xxx的原因及解决
2020/08/04 Javascript
vue router-link 默认a标签去除下划线的实现
2020/11/06 Javascript
Python音频操作工具PyAudio上手教程详解
2019/06/26 Python
Python shutil模块用法实例分析
2019/10/02 Python
Python+OpenCV+图片旋转并用原底色填充新四角的例子
2019/12/12 Python
python shutil文件操作工具使用实例分析
2019/12/25 Python
基于Python获取docx/doc文件内容代码解析
2020/02/17 Python
Python实现微信表情包炸群功能
2021/01/28 Python
HTML5 UTF-8 中文乱码的解决方法
2013/11/18 HTML / CSS
在线实验室测试:HealthLabs.com
2020/05/03 全球购物
python​格式化字符串
2022/04/20 Python