欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript給input的value賦值引發(fā)的關(guān)于基本類型值和引用類型值問題

 更新時間:2015年12月07日 09:12:51   作者:Blueprison  
這篇文章主要介紹了JavaScript給input的value賦值引發(fā)的關(guān)于基本類型值和引用類型值問題的相關(guān)資料,需要的朋友可以參考下

 在自己做東西時,遇見了一個問題。就拿博客園的首頁右邊的搜索舉例吧,用控制臺操作。

   

  

  現(xiàn)在我需要從另外一個地方將數(shù)據(jù)傳給input,讓其在一刷新的時候就顯示數(shù)據(jù)。

  這不難啊,于是我按照我的理解做了

  代碼如下:

  

  此時,id為zzk_q的值應(yīng)該為  測試  ,即input框內(nèi)應(yīng)該顯示 測試 。但結(jié)果。。

  

  咦,為什么沒有變呢,不對啊,又來來回回變著法子試一下,還是不行,當(dāng)然代碼基本還是那樣子的。突然想起我以前遇見過這樣子的問題,仔細回想當(dāng)時解決的方法(看樣子當(dāng)時沒理解透,只是找到方法就過去了),想起來了,我試一下,代碼如下:

  看結(jié)果:

 

  這次成了。第一次遇見這個問題時沒有細想,成功了就跳過了。但這次我開始想為什么呢?為什么呢?怎么會這樣啊,沒辦法理解啊。然后我自己在哪里來回折騰,但還是想不明白。同樣是賦值這倆者有什么差別嗎?差別在哪里???后來才知道是值類型和引用類型,當(dāng)然是別人給我指出來的(……)。

  然后我就去找這方面的東西看,發(fā)現(xiàn)這東西我看過,汗。

  自1997年Javascript被標(biāo)準(zhǔn)化以來,它定義了六種基本類型。直到ES6,JS程序中任何一個值都屬于以下幾種類型之一。

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

  不過,ES6又加了一個基本類型:Symbol 類型。這個沒多大了解,不作討論,等以后熟悉再說吧,又要學(xué)。

  在JavaScript的變量中,有倆種類型的值:基本類型和引用類型的值?;绢愋椭担ㄒ灿腥朔Q為值類型)是簡單地數(shù)據(jù)段,它是按值訪問的,并對其中的值進行操作。而引用類型值值那些有可能有多個值構(gòu)成的對象。賦值的時候,解釋器必須確定值是基本類型還是引用類型。

  基本數(shù)據(jù)類型有:Undefined、Null、Boolean、Number、String。引用類型是保存在內(nèi)存中的對象,即Object,對象是方法和屬性結(jié)合。

  1.類型值的動態(tài)屬性

  這是引用類型:

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

  這個例子中,我們先創(chuàng)建了一個空對象,然后將其保存在person變量中,然后給對象添加了一個屬性name,而且給這個屬性賦值了一個字符串“foo”,然后輸出,可以看到輸出了字符串foo,然后我們將這個屬性刪除,輸出undefined。這些說明,我們可以動態(tài)的給對象添加屬性和方法,如果不銷毀對象或者刪除屬性,將會一直存在。

  這是基本類型:

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

   在這個中,我們將一個字符串"foo",保存在一個name變量中,然后也給它添加了一個屬性age,并賦值22,然后輸出,像我以前想的那么該輸出22,但實際情況是undefined。

  這個是否可以理解為基本類型的值是不可變的,而引用類型是可以動態(tài)改變的。

  2.復(fù)制變量值

  和上面說的一樣,基本類型是按值訪問的。而引用類型呢,在JavaScript和其它語言不同,允許直接訪問內(nèi)存中的位置,也就是說我們不可以直接操作對象的內(nèi)存空間,那怎么辦呢?在操作對象時,實際上是對操作對象的引用,引用類型的值是按引用對象訪問的。引用類型的存儲需要內(nèi)存的棧內(nèi)存和堆內(nèi)存共同完成,棧內(nèi)存保存變量標(biāo)識符和指向堆內(nèi)存中該對象的指針,也可以說是該對象在堆內(nèi)存的地址。

  先看例子:

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

 從一個變量向另一個變量復(fù)制基本類型的值,我們會在變量對象上重新創(chuàng)建一個新值,然后把該值復(fù)制到新變量分配的位置上。這倆個值是完全對立的,對倆個變量進行其他操作是互不影響的。它們應(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)從一個變量想另一個變量復(fù)制引用類型的的值時,也會將該值復(fù)制一份放到新的空間中。但是就跟上面說的一樣,引用類型的存儲要棧內(nèi)存和堆內(nèi)存一起完成,這個值實際上是一個指針,而這個指針指向存儲在堆中的一個對象。復(fù)制操作結(jié)束后,倆個變量實際上是同一個指針,也就是引用同一個對象。所以,改變其中的一個變量,另一個變量也會隨之改變。如下圖:


參看 JavaScript高級程序設(shè)計。

  這樣一梳理,就對一開始的問題有些明白了,開頭那個錯誤,一開始,取到input的value(此時為空),復(fù)制給title,然后以改變title期望改變input的value。但input的value(可以看成一個變量)就是一個基本類型,復(fù)制后,它倆完全獨立了,互不影響。再說成功的,將value拿出來,先將input(對象)復(fù)制給title,然后給title添加value屬性,并賦值,此時倆個指向同一個對象,改變一個,也會影響另外一個。恩,就這樣子。

  雖然很多知識從書上或其他地方看了一遍或多遍,但是等你真正遇到時感覺好奇怪。怎么會這樣,然后自己去找答案。等找到或是別人指出后,才發(fā)現(xiàn)這個以前看見過,有些甚至自己解決過(不能說解決,只能說沒有深究,沒有徹底弄懂)。還有一些大學(xué)的基礎(chǔ)都忘的七七八八了(本來就學(xué)的不好)。連棧內(nèi)存和堆內(nèi)存都去搜了一下。恩,既然決定走這條路了,就好好學(xué)習(xí)吧。 

  最后:

Good good coding,day day up!

PS:(集合和引用類型、基本數(shù)據(jù)類型賦值不一樣)一個簡單的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里面的值就改變不了

結(jié)果:

11 
8888  

切記:最好還是按正常來寫,避免混淆

相關(guān)文章

  • JavaScript之移動端H5生成圖片解決方案講解

    JavaScript之移動端H5生成圖片解決方案講解

    這篇文章主要介紹了JavaScript之移動端H5生成圖片解決方案講解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下
    2021-08-08
  • webpack教程之webpack.config.js配置文件

    webpack教程之webpack.config.js配置文件

    本篇文章主要介紹了webpack教程之webpack.config.js配置文件 ,具有一定的參考價值,有興趣的可以了解一席
    2017-07-07
  • javascript簡單實現(xiàn)滑動菜單效果的方法

    javascript簡單實現(xiàn)滑動菜單效果的方法

    這篇文章主要介紹了javascript簡單實現(xiàn)滑動菜單效果的方法,實例分析了javascript通過對頁面元素與相關(guān)屬性的操作實現(xiàn)滑動菜單效果的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-07-07
  • JavaScript適配器模式詳解

    JavaScript適配器模式詳解

    這篇文章主要為大家詳細介紹了JavaScript適配器模式的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-10-10
  • JS輸入用戶名自動顯示郵箱后綴列表的方法

    JS輸入用戶名自動顯示郵箱后綴列表的方法

    這篇文章主要介紹了JS輸入用戶名自動顯示郵箱后綴列表的方法,可實現(xiàn)自動顯示郵箱后綴名列表的功能,非常具有實用價值,需要的朋友可以參考下
    2015-01-01
  • JavaScript實現(xiàn)圖片懶加載的三種方案詳解

    JavaScript實現(xiàn)圖片懶加載的三種方案詳解

    圖片懶加載,當(dāng)圖片出現(xiàn)在可視區(qū)域再進行加載,提升用戶的體驗,這篇文章主要為大家整理了三個常用的圖片懶加載實現(xiàn)方法,希望對大家有所幫助
    2023-12-12
  • JavaScript獲取一個范圍內(nèi)日期的方法

    JavaScript獲取一個范圍內(nèi)日期的方法

    這篇文章主要介紹了JavaScript獲取一個范圍內(nèi)日期的方法,涉及javascript操作日期的相關(guān)技巧,需要的朋友可以參考下
    2015-04-04
  • JavaScript實現(xiàn)下拉菜單的顯示和隱藏

    JavaScript實現(xiàn)下拉菜單的顯示和隱藏

    這篇文章主要介紹了JavaScript實現(xiàn)下拉菜單的顯示和隱藏的相關(guān)資料,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-01-01
  • 微信小程序?qū)崿F(xiàn)二維碼生成器

    微信小程序?qū)崿F(xiàn)二維碼生成器

    這篇文章主要為大家詳細介紹了如何通過微信小程序開發(fā)一個簡單的二維碼生成器,文中的示例代碼講解詳細,感興趣的小伙伴可以和小編一起學(xué)習(xí)一下
    2023-01-01
  • Bootstrap基本插件學(xué)習(xí)筆記之Tooltip提示工具(18)

    Bootstrap基本插件學(xué)習(xí)筆記之Tooltip提示工具(18)

    這篇文章主要為大家詳細介紹了Bootstrap基本插件學(xué)習(xí)筆記之oltip提示工具的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-12-12

最新評論