JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题


Posted in Javascript onDecember 07, 2015

 在自己做东西时,遇见了一个问题。就拿博客园的首页右边的搜索举例吧,用控制台操作。

 

JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题

JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题

现在我需要从另外一个地方将数据传给input,让其在一刷新的时候就显示数据。

这不难啊,于是我按照我的理解做了

代码如下:

JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题

此时,id为zzk_q的值应该为  测试  ,即input框内应该显示 测试 。但结果。。

JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题

咦,为什么没有变呢,不对啊,又来来回回变着法子试一下,还是不行,当然代码基本还是那样子的。突然想起我以前遇见过这样子的问题,仔细回想当时解决的方法(看样子当时没理解透,只是找到方法就过去了),想起来了,我试一下,代码如下:

JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题

看结果:

 JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题

这次成了。第一次遇见这个问题时没有细想,成功了就跳过了。但这次我开始想为什么呢?为什么呢?怎么会这样啊,没办法理解啊。然后我自己在哪里来回折腾,但还是想不明白。同样是赋值这俩者有什么差别吗?差别在哪里啊?后来才知道是值类型和引用类型,当然是别人给我指出来的(……)。

然后我就去找这方面的东西看,发现这东西我看过,汗。

  自1997年Javascript被标准化以来,它定义了六种基本类型。直到ES6,JS程序中任何一个值都属于以下几种类型之一。

 •Undefined
 •Null
 •Boolean
 •Number
 •String
 •Object

不过,ES6又加了一个基本类型:Symbol 类型。这个没多大了解,不作讨论,等以后熟悉再说吧,又要学。

在JavaScript的变量中,有俩种类型的值:基本类型和引用类型的值。基本类型值(也有人称为值类型)是简单地数据段,它是按值访问的,并对其中的值进行操作。而引用类型值值那些有可能有多个值构成的对象。赋值的时候,解释器必须确定值是基本类型还是引用类型。

基本数据类型有:Undefined、Null、Boolean、Number、String。引用类型是保存在内存中的对象,即Object,对象是方法和属性结合。

1.类型值的动态属性

这是引用类型:

var person = new Object();   
person.name = "foo";
console.log(person.name);//foo
delete person.name;
console.log(person.name)://undefined

这个例子中,我们先创建了一个空对象,然后将其保存在person变量中,然后给对象添加了一个属性name,而且给这个属性赋值了一个字符串“foo”,然后输出,可以看到输出了字符串foo,然后我们将这个属性删除,输出undefined。这些说明,我们可以动态的给对象添加属性和方法,如果不销毁对象或者删除属性,将会一直存在。

  这是基本类型:

var name = "foo";
name.age = 22;
console.log(name.age);//undefined

 

在这个中,我们将一个字符串"foo",保存在一个name变量中,然后也给它添加了一个属性age,并赋值22,然后输出,像我以前想的那么该输出22,但实际情况是undefined。

这个是否可以理解为基本类型的值是不可变的,而引用类型是可以动态改变的。

  2.复制变量值

和上面说的一样,基本类型是按值访问的。而引用类型呢,在JavaScript和其它语言不同,允许直接访问内存中的位置,也就是说我们不可以直接操作对象的内存空间,那怎么办呢?在操作对象时,实际上是对操作对象的引用,引用类型的值是按引用对象访问的。引用类型的存储需要内存的栈内存和堆内存共同完成,栈内存保存变量标识符和指向堆内存中该对象的指针,也可以说是该对象在堆内存的地址。

先看例子:

var num1 =5;
var num2 =num1;//5
num1+=1; //6
num2;//5

 从一个变量向另一个变量复制基本类型的值,我们会在变量对象上重新创建一个新值,然后把该值复制到新变量分配的位置上。这俩个值是完全对立的,对俩个变量进行其他操作是互不影响的。它们应该是保存在栈内存中,如下图所示:

JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题 

看一下引用类型: 

var obj1 = new Object();
var obj2 = obj1;
obj1.name = "foo";
console.log(obj2.name);  //foo
obj2.age = 22;
console.log(obj1.age);  //22

当从一个变量想另一个变量复制引用类型的的值时,也会将该值复制一份放到新的空间中。但是就跟上面说的一样,引用类型的存储要栈内存和堆内存一起完成,这个值实际上是一个指针,而这个指针指向存储在堆中的一个对象。复制操作结束后,俩个变量实际上是同一个指针,也就是引用同一个对象。所以,改变其中的一个变量,另一个变量也会随之改变。如下图:

JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题

参看 JavaScript高级程序设计。

这样一梳理,就对一开始的问题有些明白了,开头那个错误,一开始,取到input的value(此时为空),复制给title,然后以改变title期望改变input的value。但input的value(可以看成一个变量)就是一个基本类型,复制后,它俩完全独立了,互不影响。再说成功的,将value拿出来,先将input(对象)复制给title,然后给title添加value属性,并赋值,此时俩个指向同一个对象,改变一个,也会影响另外一个。恩,就这样子。

虽然很多知识从书上或其他地方看了一遍或多遍,但是等你真正遇到时感觉好奇怪。怎么会这样,然后自己去找答案。等找到或是别人指出后,才发现这个以前看见过,有些甚至自己解决过(不能说解决,只能说没有深究,没有彻底弄懂)。还有一些大学的基础都忘的七七八八了(本来就学的不好)。连栈内存和堆内存都去搜了一下。恩,既然决定走这条路了,就好好学习吧。 

最后:

Good good coding,day day up!

PS:(集合和引用类型、基本数据类型赋值不一样)一个简单的java问题 先后的赋值问题

<span style="white-space:pre">  </span>List<person> list = new ArrayList<person>(); 
<span style="white-space:pre">  </span>person pp = new person(); 
<span style="white-space:pre">  </span>list.add(pp); 
<span style="white-space:pre">  </span>pp.setIvalue(12); 
<span style="white-space:pre">  </span>pp.setIvalue(20); 
<span style="white-space:pre">  </span>pp = null;; 
<span style="white-space:pre">  </span>int b = 0; 
<span style="white-space:pre">  </span>int a = b; 
<span style="white-space:pre">  </span>b = 8; 
<span style="white-space:pre">  </span>System.out.println(a); 
<span style="white-space:pre">  </span>for (person ppp : list) { 
<span style="white-space:pre">   </span>ppp.getIvalue(); 
<span style="white-space:pre">  </span>} 
<span style="white-space:pre"> </span>

list里面的对象加进去就改不了,但是可以修改对象里面的属性值。

简单string里面的值就改变不了

结果:

11 
8888  

切记:最好还是按正常来写,避免混淆

Javascript 相关文章推荐
window.open的功能全解析
Oct 10 Javascript
html文件中jquery与velocity变量中的$冲突的解决方法
Nov 01 Javascript
jQuery jcrop插件截图使用方法
Nov 20 Javascript
JS+CSS实现自动改变切换方向图片幻灯切换效果的方法
Mar 02 Javascript
JQuery简单实现锚点链接的平滑滚动
May 03 Javascript
javascript嵌套函数和在函数内调用外部函数的区别分析
Jan 31 Javascript
浅谈JS中的!=、== 、!==、===的用法和区别
Sep 24 Javascript
纯js实现手风琴效果代码
Apr 17 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
Mar 24 Javascript
WebSocket实现简单客服聊天系统
May 12 Javascript
jQuery替换节点元素的操作方法
Mar 18 jQuery
Vue.js 利用v-for中的index值实现隔行变色
Aug 01 Javascript
小巧强大的jquery layer弹窗弹层插件
Dec 06 #Javascript
使用jQuery+EasyUI实现CheckBoxTree的级联选中特效
Dec 06 #Javascript
javascript字符串函数汇总
Dec 06 #Javascript
win7下安装配置node.js+express开发环境
Dec 06 #Javascript
分享使用AngularJS创建应用的5个框架
Dec 05 #Javascript
如何利用AngularJS打造一款简单Web应用
Dec 05 #Javascript
使用CDN和AJAX加速WordPress中jQuery的加载
Dec 05 #Javascript
You might like
PHP session文件独占锁引起阻塞问题解决方法
2015/05/12 PHP
PHP实现多级分类生成树的方法示例
2017/02/07 PHP
javascript firefox兼容ie的dom方法脚本
2008/05/18 Javascript
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
2014/02/13 Javascript
原生的html元素选择器类似jquery选择器
2014/10/15 Javascript
js onmousewheel事件多次触发问题解决方法
2014/10/17 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
2015/05/14 Javascript
JavaScript中的setMilliseconds()方法使用详解
2015/06/11 Javascript
原生JS实现-星级评分系统的简单实例
2016/08/21 Javascript
JS查找英文文章中出现频率最高的单词
2017/03/20 Javascript
js获取css的各种样式并且设置他们的方法
2017/08/22 Javascript
Node.js log4js日志管理详解
2018/07/31 Javascript
jquery选择器和属性对象的操作实例分析
2020/01/10 jQuery
Vue中import from的来源及省略后缀与加载文件夹问题
2020/02/09 Javascript
[01:06]DOTA2隆重推出2016冬季勇士令状 内含上海特级锦标赛互动指南
2016/02/17 DOTA
[00:32]2016完美“圣”典风云人物:Maybe宣传片
2016/12/05 DOTA
天翼开放平台免费短信验证码接口使用实例
2013/12/18 Python
python可视化实现代码
2019/01/15 Python
Python OpenCV利用笔记本摄像头实现人脸检测
2020/08/20 Python
pycharm设置鼠标悬停查看方法设置
2019/07/29 Python
Python实现TCP探测目标服务路由轨迹的原理与方法详解
2019/09/04 Python
django序列化serializers过程解析
2019/12/14 Python
基于Python3.6中的OpenCV实现图片色彩空间的转换
2020/02/03 Python
解决pytorch 交叉熵损失输出为负数的问题
2020/07/07 Python
详解selenium + chromedriver 被反爬的解决方法
2020/10/28 Python
HTML5之web workers_动力节点Java学院整理
2017/07/17 HTML / CSS
详解Html5原生拖拽操作
2018/01/12 HTML / CSS
有关HTML5页面在iPhoneX适配问题
2017/11/13 HTML / CSS
基于canvas使用贝塞尔曲线平滑拟合折线段的方法
2018/01/10 HTML / CSS
The Beach People美国:澳洲海滨奢华品牌
2018/07/05 全球购物
莫斯科高科技在线商店:KremlinStore
2019/03/13 全球购物
阿里巴巴Oracle DBA笔试题答案-备份恢复类
2013/11/20 面试题
药学专业大专生的自我评价
2013/12/12 职场文书
现金出纳岗位职责
2014/03/15 职场文书
村委会贫困证明范本
2014/09/17 职场文书
浅谈PostgreSQL表分区的三种方式
2021/06/29 PostgreSQL