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全选checkBox功能实现代码(取消全选功能)
Dec 10 Javascript
jQuery常用数据处理方法小结
Feb 20 Javascript
JS+CSS实现简易的滑动门效果代码
Sep 24 Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
Oct 30 Javascript
JS实现页面进入和返回定位到具体位置
Dec 08 Javascript
Javascript 链式作用域详细介绍
Feb 23 Javascript
vue+node+webpack环境搭建教程
Nov 05 Javascript
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
Sep 07 Javascript
Vue实现简单分页器
Dec 29 Javascript
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
Jun 10 Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
Jun 24 Javascript
Element Tooltip 文字提示的使用示例
Jul 26 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中的时间处理
2006/10/09 PHP
浅析php中jsonp的跨域实例
2013/06/21 PHP
php.ini中的request_order推荐设置
2015/05/10 PHP
php基于curl实现的股票信息查询类实例
2016/11/11 PHP
yii2使用GridView实现数据全选及批量删除按钮示例
2017/03/01 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
Javascript中常见的校验如域名、手机、邮箱等等
2014/01/02 Javascript
jsPDF生成pdf后在网页展示实例
2014/01/16 Javascript
Javascript字符串对象的常用方法简明版
2014/06/26 Javascript
node.js中使用socket.io的方法
2014/12/15 Javascript
jQuery制作仿Mac Lion OS滚动条效果
2015/02/10 Javascript
JQuery页面地址处理插件jqURL详解
2015/05/03 Javascript
JavaScript小技巧整理
2015/12/30 Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
2016/05/07 Javascript
用angular实现多选按钮的全选与反选实例代码
2017/05/23 Javascript
jQuery UI 实例讲解 - 日期选择器(Datepicker)
2017/09/18 jQuery
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
2019/11/06 Javascript
JavaScript实现简单随机点名器
2019/11/21 Javascript
nuxt配置通过指定IP和端口访问的实现
2020/01/08 Javascript
Vuex中的Mutations的具体使用方法
2020/06/01 Javascript
vue:el-input输入时限制输入的类型操作
2020/08/05 Javascript
Python使用multiprocessing实现一个最简单的分布式作业调度系统
2016/03/14 Python
Python使用lxml模块和Requests模块抓取HTML页面的教程
2016/05/16 Python
python cx_Oracle模块的安装和使用详细介绍
2017/02/13 Python
深入浅析python with语句简介
2018/04/11 Python
Django Admin中增加导出CSV功能过程解析
2019/09/04 Python
Python3如何对urllib和urllib2进行重构
2019/11/25 Python
如何利用python发送邮件
2020/09/26 Python
世界上第一个水枕头:Mediflow
2018/12/06 全球购物
Stella McCartney官网:成衣、包袋、香水、内衣、童装及Adidas系列
2018/12/20 全球购物
心理健康教育心得体会
2013/12/29 职场文书
上帝也疯狂观后感
2015/06/09 职场文书
何玥事迹观后感
2015/06/16 职场文书
Python基础之元类详解
2021/04/29 Python
MySQL 如何分析查询性能
2021/05/12 MySQL