自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

寫了10年Javascript未必全了解的連續(xù)賦值運算

開發(fā) 前端
該文章中將分享一下作者在寫Javascript的心得,是關(guān)于連續(xù)賦值運算一些技巧。對大家在Web開發(fā)方面肯定有很大的啟發(fā)和幫助。

  該文章中將分享一下作者在寫Javascript的心得,是關(guān)于連續(xù)賦值運算一些技巧。對大家在Web開發(fā)方面肯定有很大的啟發(fā)和幫助。

      一、引子

  1. var a = {n:1};     
  2. a.x = a = {n:2};     
  3. alert(a.x); // --> undefined    

  這是蔡蔡在看jQuery源碼 時發(fā)現(xiàn)這種寫法的。以上第二句 a.x = a = {n:2} 是一個連續(xù)賦值表達式。這個連續(xù)賦值表達式在引擎內(nèi)部究竟發(fā)生了什么?是如何解釋的?

  二、猜想

  猜想1:從左到右賦值,a.x 先賦值為{n:2},但隨后 a 賦值為 {n:2},即 a 被重寫了,值為 {n:2},新的 a 沒有 x屬性,因此為undefined。步驟如下

  1. a.x = {n:2};   
  2. a = {n:2};  

  這種解釋得出的結(jié)果與實際運行結(jié)果一致,貌似是對的。注意猜想1中 a.x 被賦值過。

  猜想2:從右到左賦值,a 先賦值為{n:2},a.x 發(fā)現(xiàn) a 被重寫后(之前a是{a:1}),a.x = {n:2} 引擎限制a.x賦值,忽略了。步驟如下:

  1. a = {n:2};  
  2. a.x 未被賦值{n:2}  

  等價于 a.x = (a = {n:2}),即執(zhí)行了***步,這樣也能解釋a.x為undefined了。注意猜想2中a.x壓根沒被賦值過。

  三、證明

  上面兩種猜想相信多數(shù)人都有,群里討論呆呆認為是猜想1, 我認為是猜想2。其實都錯了。我忽略了引用的關(guān)系。如下,加一個變量b,指向a。

  Js代碼

  1. var a = {n:1};     
  2. var b = a; // 持有a,以回查     
  3. a.x = a = {n:2};     
  4. alert(a.x);// --> undefined     
  5. alert(b.x);// --> [object Object]    

  發(fā)現(xiàn)a.x仍然是undefined,神奇的是 b.x 并未被賦值過(比如:b.x={n:2}),卻變成了[object Object]。b 是指向 a({n:1})的,只有a.x = {n:2}執(zhí)行了才說明b是有x屬性的。實際執(zhí)行過程:從右到左,a 先被賦值為{n:2},隨后a.x被賦值{n:2}。

  1. a = {n:2};  
  2. a.x = {n:2};  

  等價于

  1. a.x = (a = {n:2});  

  與猜想2的區(qū)別在于a.x 被賦值了,猜想2中并未賦值。最重要的區(qū)別,***步 a = {n:2} 的 a 指向的是新的對象{n:2} , 第二步 a.x = {n:2} 中的 a 是 {a:1}。即在這個連等語句

  Js代碼

  1. a.x = (a = {n:2});  

  a.x 中的a指向的是 {n:1},a 指向的是 {n:2}。如下圖

Javascript的連續(xù)賦值運算

  四:解惑

  這篇寫完,或許部分人看完還是暈暈的。因為里面的文字描述實在是繞口。最初我在理解這個連等賦值語句時

  Js代碼

  1. var a = {n:1};     
  2. a.x = a = {n:2};  

  認為引擎會限制a.x的重寫(a被重寫后),實際卻不是這樣的。指向的對象已經(jīng)不同了。引擎也沒有限制a.x={n:2}的重寫。

  謝謝所有參與討論的人:蔡蔡、豬大腸 、呆呆、雅儒。這個問題最早是蔡蔡提出的。雅儒在 菜鳥灰呀灰 群里每次的討論都那么投入,認真,哪怕是別人提出的話題。

  五:結(jié)束

  呵,以另一個連續(xù)賦值題結(jié)束。fun執(zhí)行后,這里的 變量 b 溢出到fun外成為了全局變量。想到了嗎?

  Js代碼

  1. function fun(){     
  2.     var a = b = 5;     
  3. }     
  4. fun();     
  5. alert(typeof a); // --> undefined     
  6. alert(typeof b); // --> number    

   原文鏈接:http://www.javaeye.com/topic/785445

【編輯推薦】

  1. JavaScript初學者應注意的七個細節(jié)
  2. Web開發(fā)者必知 31個最實用的Javascript工具(附下載)
  3. JavaScript函數(shù)式編程
  4. 提升JavaScript遞歸效率:Memoization技術(shù)詳解
責任編輯:陳貽新 來源: zhouyrt的博客
相關(guān)推薦

2020-10-15 08:11:56

JavaScript邏輯運算符

2020-05-26 08:38:57

JavaScript語言

2020-11-12 15:54:40

IT技術(shù)數(shù)據(jù)分析

2014-08-26 09:52:57

2009-08-12 15:02:49

C#賦值運算符簡單賦值運算符

2009-08-12 15:20:18

C#賦值運算符復合賦值運算符

2020-12-29 10:28:01

業(yè)務(wù)連續(xù)性經(jīng)理數(shù)字計劃投資

2015-07-15 13:34:37

JS開發(fā)習慣

2021-01-09 22:50:16

JavaScript開發(fā)技術(shù)

2023-06-26 17:45:14

編程語言ChatGPTJavaScript

2014-04-03 10:16:44

JavaScriptCSS

2021-11-22 22:14:46

JavaScript開發(fā)模塊

2018-07-16 14:39:16

前端JavaScript動畫庫

2025-03-05 09:37:03

2021-04-01 17:04:34

Javascript語法數(shù)組

2017-12-10 21:33:45

2017-12-23 08:50:30

JavascripCSS數(shù)據(jù)

2020-07-09 08:01:48

JavaScriptES模塊

2012-07-25 13:25:11

ibmdw
點贊
收藏

51CTO技術(shù)棧公眾號