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 相关文章推荐
js编码之encodeURIComponent使用介绍(asp,php)
Mar 01 Javascript
JQuery入门——事件切换之hover()方法应用介绍
Feb 05 Javascript
javascript 用函数语句和表达式定义函数的区别详解
Jan 06 Javascript
jQuery定义背景动态切换效果的方法
Mar 23 Javascript
使用Node.js为其他程序编写扩展的基本方法
Jun 23 Javascript
JS中多步骤多分步的StepJump组件实例详解
Apr 01 Javascript
JavaScript 监控微信浏览器且自带返回按钮时间
Nov 27 Javascript
vue.js前后端数据交互之提交数据操作详解
Apr 24 Javascript
详解js中Array的方法及技巧
Sep 12 Javascript
vue.js层叠轮播效果的实例代码
Nov 08 Javascript
用VsCode编辑TypeScript的实现方法
May 07 Javascript
react 项目中引入图片的几种方式
Jun 02 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
漫荒推荐:画风超赞的国风漫画推荐 超长假期不无聊
2020/03/08 国漫
Discuz 模板语句分析及知识技巧
2009/08/21 PHP
php实现单链表的实例代码
2013/03/22 PHP
php树型类实例
2014/12/05 PHP
给大家分享几个常用的PHP函数
2017/01/15 PHP
Javascript 中的类和闭包
2010/01/08 Javascript
悄悄用脚本检查你访问过哪些网站的代码
2010/12/04 Javascript
基于jquery实现的类似百度搜索的输入框自动完成功能
2011/08/23 Javascript
js 将json字符串转换为json对象的方法解析
2013/11/13 Javascript
防止按钮在短时间内被多次点击的方法
2014/03/10 Javascript
jQuery的position()方法详解
2015/07/19 Javascript
jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
2016/03/05 Javascript
详解JavaScript中数组和字符串的lastIndexOf()方法使用
2016/03/13 Javascript
AngularJS获取json数据的方法详解
2017/05/27 Javascript
JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】
2018/05/14 Javascript
基于Vue2x的图片预览插件的示例代码
2018/05/14 Javascript
vue-cli中安装方法(图文详细步骤)
2018/12/12 Javascript
基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例
2019/08/27 Javascript
微信小程序HTTP接口请求封装代码实例
2019/09/05 Javascript
为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置
2019/09/29 Javascript
微信小程序 行的删除和增加操作实现详解
2019/09/29 Javascript
js实现文字头像的生成代码
2020/03/07 Javascript
微信小程序学习总结(二)样式、属性、模板操作分析
2020/06/04 Javascript
javascript实现移动端轮播图
2020/12/09 Javascript
多种类型jQuery网页验证码插件代码实例
2021/01/09 jQuery
[03:40]DOTA2抗疫特别篇《英雄年代》
2020/02/28 DOTA
python命令行解析之parse_known_args()函数和parse_args()使用区别介绍
2018/01/24 Python
使用pycharm生成代码模板的实例
2018/05/23 Python
对Python实现累加函数的方法详解
2019/01/23 Python
Python GUI编程 文本弹窗的实例
2019/06/11 Python
CSS3制作缩略图的详细过程
2016/07/08 HTML / CSS
线程的基本概念、线程的基本状态以及状态之间的关系
2012/10/26 面试题
大班幼儿评语大全
2014/04/30 职场文书
清明节网上祭英烈活动总结
2014/04/30 职场文书
企业党建工作总结2015
2015/05/26 职场文书
《确定位置》教学反思
2016/02/18 职场文书