`
rainytimes
  • 浏览: 7033 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

有关JS类的属性值初始化问题

阅读更多

最近在开发一个JS功能的时候犯了一个错误,主要是没有理解JS属性的声明问题。想当然的认为JS的写法和Java是一致的呵呵,查了一周才找到原因,下面先来看段Java代码的示例:

import java.util.Date;

class A{

    private Date createDate = new Date();

    private String name;

    public A(String name){

       this.name = name;

    }

    public void print(){

          System.out.println(name+"==="+createDate .getTime());

    }

}

这里我们的测试代码为:

 

public static void main(String[] args){

    A a1 = new  A("测试1");

        a1.print();

        try {
		Thread.sleep(5000);
	} catch (InterruptedException e) {
		e.printStackTrace();
	}
        
       
        A a2 = new  A("测试2");

        a2.print();

}

 

我们运行的输出结果分别为:

测试1===1379430542493
测试2===1379430547494

 

 

可以看到时间是不一致的,这个正常

 

 

下面看段JS的代码

<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8">
		  <script type="text/javascript">
				var ClassA = function(option){
					this.init(option);
				}
				
				ClassA.prototype = {
					name : '',
					createDate : new Date(),
					init : function(option){
						this.name = option.name;
					}
				
				}
				
				function test1(){
					 
					var a1 = new ClassA({
						name : '测试1'
					});
					
					alert(a1.name+" == "+  a1.createDate.getTime());
					 
				
				}
				
				function test2(){
					 
					var a2 = new ClassA({
						name : '测试2'
					});
					
					alert(a2.name+" == "+  a2.createDate.getTime());
					 
				
				}
				 
		  </script>
	</head>
	<body>
			<input type="button" value="测试1" onclick="test1()"   >
			<input type="button" value="测试2" onclick="test2()"   >
	</body>

</html>

 

 我们分别执行 测试1按钮和测试2按钮,按照一般逻辑,期alert语句打印的信息和时间应该是不一致的,但是实际上是:按钮1执行结果

 

 按钮1执行结果

 

按钮2执行结果

 

按钮2执行结果

 

神奇的地方出现了,两个时间竟然一致!!!!!!!!!!

也就是说在JS的class定义中使用了new关键字初始化属性对象,其只初始化一次,其是在class的prototype定义阶段执行的。当一个类的class prototype定义完毕以后,使用new 关键字再次初始化这个对象的时候,并不会将prototype再次初始化,也就是说这里有点类似Java中的 private static property的用法。如果避免JS这样的问题,那么则将类对象值的初始化放到初始化方法里去,确保能正常执行。

 

不知道这样理解是否正确权且记下,或者那个高人有这方面的原理性资料,也请不吝赐教!

 

 

 

 

 

  • 大小: 10.9 KB
  • 大小: 11.3 KB
分享到:
评论

相关推荐

    Angular.js基础学习之初始化

    一、绑定初始化,自动加载 通过绑定来进行angular的初始化,会把js代码...也就是说,ng-app是可以带属性值的。 &lt;body ng-app=myApp&gt; {{ hello }} [removed] var myModule = angular.module(myApp,[]);

    js-lazy-object:JavaScript 库,用于在仅在访问时初始化的对象上定义惰性属性。 也称为延迟初始化和缓存记忆的 getter

    LazyObject.js 允许您定义对象的属性,该对象的值仅在第一次访问时初始化。 从那时起,值被缓存/记忆。 它的defineLazyProperty函数紧跟Object.defineProperty签名,允许您更改定义的属性是否可configurable 、 ...

    Node.js 湿度和温度传感器插件_C语言_C++_JavaScript_代码_相关文件_下载

    要初始化传感器,您必须指定传感器类型和传感器连接到的GPIO 引脚。它应该适用于 DHT11、DHT22 和 AM2302 传感器。 您应该使用 sensorType 值来匹配传感器,如下所示: 传感器 传感器类型值 DHT11 11 DHT22 或 AM...

    下载好的vue.js库资源,可以直接使用

    vue使用的时候,必须要通过 new Vue( ) 来实例化一个对象 vue实例化的对象中, 常见的参数为: ...watch: 如果需要监控data中的某些属性值, 可以在watch中添加监听方法. vue 中一般会使用小胡子语法 (插值表达式)

    JavaScript模式中文[pdf] 百度云

     即时对象初始化  初始化时分支  函数属性——备忘模式  配置对象  Curry  小结  第5章 对象创建模式  命名空间模式  声明依赖关系  私有属性和方法  模块模式  沙箱模式  静态成员  对象常量  链...

    (vue面试题)Vue.js的生命周期是什么?每个阶段的作用包括代码.txt

    Vue.js的生命周期是指一个Vue实例从创建到销毁的过程中,会经历的一系列初始化步骤和一些特定的钩子函数。这些步骤和函数可以让开发者在特定...这个阶段常常用于执行一些初始化的操作,比如获取数据、计算属性值等。

    JavaScript权威指南(第6版)(附源码)

    4.2 对象和数组的初始化表达式 4.3 函数定义表达式 4.4 属性访问表达式 4.5 调用表达式 4.6 对象创建表达式 4.7 运算符概述 4.8 算术表达式 4.9 关系表达式 4.10 逻辑表达式 4.11 赋值表达式 4.12 表达式计算 4.13 ...

    JavaScript权威指南(第6版)中文版pdf+源代码

     4.2 对象和数组的初始化表达式61  4.3 函数定义表达式62  4.4 属性访问表达式63  4.5 调用表达式64  4.6 对象创建表达式64  4.7 运算符概述65  4.8 算术表达式69  4.9 关系表达式74  4.10 逻辑表达式79  ...

    JavaScript权威指南(第6版)

    4.2 对象和数组的初始化表达式 4.3 函数定义表达式 4.4 属性访问表达式 4.5 调用表达式 4.6 对象创建表达式 4.7 运算符概述 4.8 算术表达式 4.9 关系表达式 4.10 逻辑表达式 4.11 赋值表达式 4.12 表达式计算 4.13 ...

    JavaScript 权威指南(第四版).pdf

     4.2 对象和数组的初始化表达式61  4.3 函数定义表达式62  4.4 属性访问表达式63  4.5 调用表达式64  4.6 对象创建表达式64  4.7 运算符概述65  4.8 算术表达式69  4.9 关系表达式74  4.10 逻辑表达式79  ...

    【JavaScript源代码】JavaScript中Object、map、weakmap的区别分析.docx

     ECMAScript 6以前,在JavaScript中实现“键/值”式存储可以使用Object来方便高效地完成,也就是使用对象属性作为键,再使用属性来引用值。但这种实现并非没有问题,为此TC39委员会专门为“键/值”存储定义了一个...

    jsmap数据结构.pdf

    初始化 初始化map对象的三种⽅式 对象的三种⽅式 // 初始化map的三种⽅式 const map1 = new Map() map1.set(60, '及格') map1.set(80, '良') map1.set(90, '优秀') // 第⼆种⽅式 set⽅法返回的是当前map对象,因此...

    【JavaScript源代码】JavaScript canvas实现雨滴特效.docx

    JavaScript canvas实现雨滴特效 ...雨滴初始化需要的属性有哪些? 坐标x,y 宽高w,h 。 2.雨滴下落是逐渐加速下落不是匀速需要给一个加速度的属性,也就是y轴坐标不断加上加速度的值 3.雨滴下落到底部某

    JavaScript权威指南(第6版)(中文版)

    4.2 对象和数组的初始化表达式 4.3 函数定义表达式 4.4 属性访问表达式 4.5 调用表达式 4.6 对象创建表达式 4.7 运算符概述 4.8 算术表达式 4.9 关系表达式 4.10 逻辑表达式 4.11 赋值表达式 4.12 表达式计算 4.13 ...

    JavaScript权威指南-第六版

     4.2 对象和数组的初始化表达式61  4.3 函数定义表达式62  4.4 属性访问表达式63  4.5 调用表达式64  4.6 对象创建表达式64  4.7 运算符概述65  4.8 算术表达式69  4.9 关系表达式74  4.10 逻辑表达式79  ...

    JavaScript模式 斯托扬·斯特凡洛夫 著

    即时对象初始化 初始化时分支 函数属性——备忘模式 配置对象 Curry 小结 第5章 对象创建模式 命名空间模式 声明依赖关系 私有属性和方法 模块模式 沙箱模式 静态成员 对象常量 链模式 method()方法 小结 第6章 ...

    decorator-initial-values:声明性地定义类的初始属性

    在 ES6 类中的super调用之前初始化值在 ES7 中,在继承另一个类的构造函数中,您只能在调用super后使用this关键字。 如果父类期望继承类中有一些初始值,这将是有问题的。 使用decorator-initial-value ,您现在可以...

    javascript学习笔记.docx

    a) 实例属性:在构造函数创建或初始化的属性。 b) 实例方法:在构造函数中把原型对象中的一个属性设为函数来实现。 c) 类属性:构造函数本身的属性。 d) 类方法:用合适的函数作为构造函数本身的一个属性。 e) 子类...

    大名鼎鼎SWFUpload- Flash+JS 上传

     动态修改SWFUpload初始化设置中的post_params属性,其中所有的值都将被覆盖。  - 参数  param_object:一个simple JavaScript object,所有的name/value都必须是字符串,例如(this.setPostParams({ "Mari": name...

Global site tag (gtag.js) - Google Analytics