JavaScript給input的value賦值引發(fā)的關(guān)于基本類型值和引用類型值問(wèn)題
在自己做東西時(shí),遇見了一個(gè)問(wèn)題。就拿博客園的首頁(yè)右邊的搜索舉例吧,用控制臺(tái)操作。
現(xiàn)在我需要從另外一個(gè)地方將數(shù)據(jù)傳給input,讓其在一刷新的時(shí)候就顯示數(shù)據(jù)。
這不難啊,于是我按照我的理解做了
代碼如下:
此時(shí),id為zzk_q的值應(yīng)該為 測(cè)試 ,即input框內(nèi)應(yīng)該顯示 測(cè)試 。但結(jié)果。。
咦,為什么沒(méi)有變呢,不對(duì)啊,又來(lái)來(lái)回回變著法子試一下,還是不行,當(dāng)然代碼基本還是那樣子的。突然想起我以前遇見過(guò)這樣子的問(wèn)題,仔細(xì)回想當(dāng)時(shí)解決的方法(看樣子當(dāng)時(shí)沒(méi)理解透,只是找到方法就過(guò)去了),想起來(lái)了,我試一下,代碼如下:
看結(jié)果:
這次成了。第一次遇見這個(gè)問(wèn)題時(shí)沒(méi)有細(xì)想,成功了就跳過(guò)了。但這次我開始想為什么呢?為什么呢?怎么會(huì)這樣啊,沒(méi)辦法理解啊。然后我自己在哪里來(lái)回折騰,但還是想不明白。同樣是賦值這倆者有什么差別嗎?差別在哪里???后來(lái)才知道是值類型和引用類型,當(dāng)然是別人給我指出來(lái)的(……)。
然后我就去找這方面的東西看,發(fā)現(xiàn)這東西我看過(guò),汗。
自1997年Javascript被標(biāo)準(zhǔn)化以來(lái),它定義了六種基本類型。直到ES6,JS程序中任何一個(gè)值都屬于以下幾種類型之一。
•Undefined
•Null
•Boolean
•Number
•String
•Object
不過(guò),ES6又加了一個(gè)基本類型:Symbol 類型。這個(gè)沒(méi)多大了解,不作討論,等以后熟悉再說(shuō)吧,又要學(xué)。
在JavaScript的變量中,有倆種類型的值:基本類型和引用類型的值。基本類型值(也有人稱為值類型)是簡(jiǎn)單地?cái)?shù)據(jù)段,它是按值訪問(wèn)的,并對(duì)其中的值進(jìn)行操作。而引用類型值值那些有可能有多個(gè)值構(gòu)成的對(duì)象。賦值的時(shí)候,解釋器必須確定值是基本類型還是引用類型。
基本數(shù)據(jù)類型有:Undefined、Null、Boolean、Number、String。引用類型是保存在內(nèi)存中的對(duì)象,即Object,對(duì)象是方法和屬性結(jié)合。
1.類型值的動(dòng)態(tài)屬性
這是引用類型:
var person = new Object(); person.name = "foo"; console.log(person.name);//foo delete person.name; console.log(person.name)://undefined
這個(gè)例子中,我們先創(chuàng)建了一個(gè)空對(duì)象,然后將其保存在person變量中,然后給對(duì)象添加了一個(gè)屬性name,而且給這個(gè)屬性賦值了一個(gè)字符串“foo”,然后輸出,可以看到輸出了字符串foo,然后我們將這個(gè)屬性刪除,輸出undefined。這些說(shuō)明,我們可以動(dòng)態(tài)的給對(duì)象添加屬性和方法,如果不銷毀對(duì)象或者刪除屬性,將會(huì)一直存在。
這是基本類型:
var name = "foo"; name.age = 22; console.log(name.age);//undefined
在這個(gè)中,我們將一個(gè)字符串"foo",保存在一個(gè)name變量中,然后也給它添加了一個(gè)屬性age,并賦值22,然后輸出,像我以前想的那么該輸出22,但實(shí)際情況是undefined。
這個(gè)是否可以理解為基本類型的值是不可變的,而引用類型是可以動(dòng)態(tài)改變的。
2.復(fù)制變量值
和上面說(shuō)的一樣,基本類型是按值訪問(wèn)的。而引用類型呢,在JavaScript和其它語(yǔ)言不同,允許直接訪問(wèn)內(nèi)存中的位置,也就是說(shuō)我們不可以直接操作對(duì)象的內(nèi)存空間,那怎么辦呢?在操作對(duì)象時(shí),實(shí)際上是對(duì)操作對(duì)象的引用,引用類型的值是按引用對(duì)象訪問(wèn)的。引用類型的存儲(chǔ)需要內(nèi)存的棧內(nèi)存和堆內(nèi)存共同完成,棧內(nèi)存保存變量標(biāo)識(shí)符和指向堆內(nèi)存中該對(duì)象的指針,也可以說(shuō)是該對(duì)象在堆內(nèi)存的地址。
先看例子:
var num1 =5; var num2 =num1;//5 num1+=1; //6 num2;//5
從一個(gè)變量向另一個(gè)變量復(fù)制基本類型的值,我們會(huì)在變量對(duì)象上重新創(chuàng)建一個(gè)新值,然后把該值復(fù)制到新變量分配的位置上。這倆個(gè)值是完全對(duì)立的,對(duì)倆個(gè)變量進(jìn)行其他操作是互不影響的。它們應(yīng)該是保存在棧內(nèi)存中,如下圖所示:
看一下引用類型:
var obj1 = new Object(); var obj2 = obj1; obj1.name = "foo"; console.log(obj2.name); //foo obj2.age = 22; console.log(obj1.age); //22
當(dāng)從一個(gè)變量想另一個(gè)變量復(fù)制引用類型的的值時(shí),也會(huì)將該值復(fù)制一份放到新的空間中。但是就跟上面說(shuō)的一樣,引用類型的存儲(chǔ)要棧內(nèi)存和堆內(nèi)存一起完成,這個(gè)值實(shí)際上是一個(gè)指針,而這個(gè)指針指向存儲(chǔ)在堆中的一個(gè)對(duì)象。復(fù)制操作結(jié)束后,倆個(gè)變量實(shí)際上是同一個(gè)指針,也就是引用同一個(gè)對(duì)象。所以,改變其中的一個(gè)變量,另一個(gè)變量也會(huì)隨之改變。如下圖:
參看 JavaScript高級(jí)程序設(shè)計(jì)。
這樣一梳理,就對(duì)一開始的問(wèn)題有些明白了,開頭那個(gè)錯(cuò)誤,一開始,取到input的value(此時(shí)為空),復(fù)制給title,然后以改變title期望改變input的value。但input的value(可以看成一個(gè)變量)就是一個(gè)基本類型,復(fù)制后,它倆完全獨(dú)立了,互不影響。再說(shuō)成功的,將value拿出來(lái),先將input(對(duì)象)復(fù)制給title,然后給title添加value屬性,并賦值,此時(shí)倆個(gè)指向同一個(gè)對(duì)象,改變一個(gè),也會(huì)影響另外一個(gè)。恩,就這樣子。
雖然很多知識(shí)從書上或其他地方看了一遍或多遍,但是等你真正遇到時(shí)感覺好奇怪。怎么會(huì)這樣,然后自己去找答案。等找到或是別人指出后,才發(fā)現(xiàn)這個(gè)以前看見過(guò),有些甚至自己解決過(guò)(不能說(shuō)解決,只能說(shuō)沒(méi)有深究,沒(méi)有徹底弄懂)。還有一些大學(xué)的基礎(chǔ)都忘的七七八八了(本來(lái)就學(xué)的不好)。連棧內(nèi)存和堆內(nèi)存都去搜了一下。恩,既然決定走這條路了,就好好學(xué)習(xí)吧。
最后:
Good good coding,day day up!
PS:(集合和引用類型、基本數(shù)據(jù)類型賦值不一樣)一個(gè)簡(jiǎn)單的java問(wèn)題 先后的賦值問(wèn)題
<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里面的對(duì)象加進(jìn)去就改不了,但是可以修改對(duì)象里面的屬性值。
簡(jiǎn)單string里面的值就改變不了
結(jié)果:
11
8888
切記:最好還是按正常來(lái)寫,避免混淆
相關(guān)文章
JavaScript之移動(dòng)端H5生成圖片解決方案講解
這篇文章主要介紹了JavaScript之移動(dòng)端H5生成圖片解決方案講解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-08-08webpack教程之webpack.config.js配置文件
本篇文章主要介紹了webpack教程之webpack.config.js配置文件 ,具有一定的參考價(jià)值,有興趣的可以了解一席2017-07-07javascript簡(jiǎn)單實(shí)現(xiàn)滑動(dòng)菜單效果的方法
這篇文章主要介紹了javascript簡(jiǎn)單實(shí)現(xiàn)滑動(dòng)菜單效果的方法,實(shí)例分析了javascript通過(guò)對(duì)頁(yè)面元素與相關(guān)屬性的操作實(shí)現(xiàn)滑動(dòng)菜單效果的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07JavaScript實(shí)現(xiàn)圖片懶加載的三種方案詳解
圖片懶加載,當(dāng)圖片出現(xiàn)在可視區(qū)域再進(jìn)行加載,提升用戶的體驗(yàn),這篇文章主要為大家整理了三個(gè)常用的圖片懶加載實(shí)現(xiàn)方法,希望對(duì)大家有所幫助2023-12-12JavaScript獲取一個(gè)范圍內(nèi)日期的方法
這篇文章主要介紹了JavaScript獲取一個(gè)范圍內(nèi)日期的方法,涉及javascript操作日期的相關(guān)技巧,需要的朋友可以參考下2015-04-04JavaScript實(shí)現(xiàn)下拉菜單的顯示和隱藏
這篇文章主要介紹了JavaScript實(shí)現(xiàn)下拉菜單的顯示和隱藏的相關(guān)資料,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-01-01Bootstrap基本插件學(xué)習(xí)筆記之Tooltip提示工具(18)
這篇文章主要為大家詳細(xì)介紹了Bootstrap基本插件學(xué)習(xí)筆記之oltip提示工具的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12