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 相关文章推荐
jquery validation验证身份证号,护照,电话号码,email(实例代码)
Nov 06 Javascript
浅谈JS闭包中的循环绑定处理程序
Nov 09 Javascript
轻量级javascript 框架Backbone使用指南
Jul 24 Javascript
深入理解js promise chain
May 05 Javascript
原生js实现商品放大镜效果
Jan 12 Javascript
使用jQuery实现购物车结算功能
Aug 15 jQuery
JavaScript 通过Ajax 动态加载CheckBox复选框
Aug 31 Javascript
react中的ajax封装实例详解
Oct 17 Javascript
javascript中floor使用方法总结
Feb 02 Javascript
从0到1构建vueSSR项目之node以及vue-cli3的配置
Mar 07 Javascript
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
layer.js之回调销毁对话框的例子
Sep 11 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中的foreach问题
2013/06/30 PHP
Laravel 5框架学习之Eloquent 关系
2015/04/09 PHP
php 解析xml 的四种方法详细介绍
2016/10/26 PHP
PHP生成随机字符串实例代码(字母+数字)
2019/09/11 PHP
javascript 显示当前系统时间代码
2009/12/28 Javascript
js中if语句的几种优化代码写法
2011/03/12 Javascript
删除条目时弹出的确认对话框
2014/06/05 Javascript
用JavaScript实现使用鼠标画线的示例代码
2014/08/19 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
2014/09/06 Javascript
JavaScript获取文本框内选中文本的方法
2015/02/20 Javascript
微信小程序 定位到当前城市实现实例代码
2017/02/23 Javascript
vue 动态绑定背景图片的方法
2018/08/10 Javascript
JS实现电话号码的字母组合算法示例
2019/02/26 Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
2019/09/04 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
2019/11/14 Javascript
javascript canvas实现简易时钟例子
2020/09/05 Javascript
[48:37]EG vs OG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[01:09:01]完美世界DOTA2联赛循环赛 Magma vs PXG BO2第一场 10.28
2020/10/28 DOTA
pycharm 使用心得(九)解决No Python interpreter selected的问题
2014/06/06 Python
在Python中使用__slots__方法的详细教程
2015/04/28 Python
Python 常用 PEP8 编码规范详解
2017/01/22 Python
Python从文件中读取数据的方法讲解
2019/02/14 Python
Django rest framework jwt的使用方法详解
2019/08/08 Python
Python基于pygame实现单机版五子棋对战
2019/12/26 Python
Python日志syslog使用原理详解
2020/02/18 Python
django中嵌套的try-except实例
2020/05/21 Python
深入浅析python 中的self和cls的区别
2020/06/20 Python
Pycharm自动添加文件头注释和函数注释参数的方法
2020/10/23 Python
python Autopep8实现按PEP8风格自动排版Python代码
2021/03/02 Python
纽约21世纪百货官网:Century 21
2016/08/27 全球购物
美国杂志订阅折扣与优惠网站:Magazines.com
2016/08/31 全球购物
日本著名化妆品零售网站:Cosme Land
2019/03/01 全球购物
英国家具、照明、家居用品网上商店:Wayfair.co.uk
2020/02/13 全球购物
澳大利亚网上书店:QBD
2021/01/09 全球购物
PHP如何设置和取得Cookie值
2015/06/30 面试题
小学生教师节演讲稿
2014/09/03 职场文书