JavaScript變數相關問題

来源:http://www.cnblogs.com/Livia-Peng/archive/2017/03/15/js_variable.html
-Advertisement-
Play Games

JavaScript變數包含的兩種不同數據類型的值——基本類型值和引用類型值的區別;ECMAScript和JavaScript的關係。 ...


  本文重在探討JavaScript變數包含的兩種不同數據類型的值——基本類型值和引用類型值的區別。在此外稍微帶過ECMAScript和JavaScript的關係。

  題為JavaScript變數,但更具體的說應該是ECMAScript變數。

  二十世紀九十年代,Netscape公司和微軟公司推出了兩個不同版本的JavaScript,不利於JavaScript的開發和使用,促使歐洲電腦製造商協會(ECMA,European Computer Manufacturers Association)著手處理JavaScript的標準化問題,從而完成了著名的 ECMA-262——定義了一種名為ECMAScript的新腳本語言的標準。

  一個完整的JavaScript實現包括ECMAScript,文檔對象模型(DOM,Document Object Model),以及瀏覽器對象模型(BOM,Browser Object Model)。ECMAScript作為JavaScript的核心以及實現的基礎,是ECMA-262標準規定的在語法、類型、語句、關鍵字、保留字、操作符和對象這幾個方面內容的語言的描述。

  ECMA-262標準規定的ECMAScript變數是鬆散類型的,可以用來保存任何類型的數據,所以不同類型初始化變數的操作可以放在一條語句中執行,如下列代碼是合法的。

1 var message = "hello",  //string
2     age = 20,           //number
3     found = false;   //boolean 

  用 var 操作符定義的變數將成為定義該變數的作用域中的局部變數,退出該作用域後變數會被立即銷毀。例如在函數內定義一個變數,當函數被調用的時候,該變數即被創建,但在函數退出後,該變數將無法再被繼續訪問。

  ECMAScript中有6種數據類型(也只有6中,ECMAScript不支持任何創建自定義類型的機制)。

  其中基本數據類型包括5種——underfinded、null、boolean、number、string,這5種基本數據類型按值訪問,其值屬於文章開頭提到的基本類型值,是簡單的數據段,可以操作保存在變數中的實際的值。

  第6種為複雜數據類型——object,本質上是由一組無序的名-值對組成的,屬於引用類型值,是保存在記憶體中的對象。JavaScript不允許直接操作對象的記憶體空間,在操作對象時實際是在操作對象的引用而不是實際的對象。

  雖然定義變數時不需要規定其為何種數據類型,但基本類型和引用類型的值可以執行的操作還是大相徑庭。

  屬性的添加

  對於引用類型的值,可以為其屬性和方法進行添加、改變和刪除,如下列代碼:  

var obj = new object();  //創建對象並保存在obj中
obj.name = "Marry";      //添加名為name的屬性,賦予字元串值“Marry”
alert(obj.name);         //彈出"Marry"

    如果obj對象不被銷毀或者name屬性不被刪除,這個屬性將一直存在。  

  再看基本類型值:

var name = "Marry";  //創建字元串
name.age = 20;       //添加名為age的屬性,賦予number值20
alert(name.age);     //彈出"underfinded"

  name字元串被添加了一個age屬性,為其賦值20,但下次訪問時這個屬性就不見了。

  這說明只能給引用類型值動態地添加屬性。

  複製變數值

  從變數a變數b複製基本類型的值,會在變數b對象上創建一個新值,將該值複製到給變數a分配的位置上,獨立保存。這兩個變數參與的任何操作都不會互相影響。

  若從變數c變數d複製引用類型的值,同樣會將存儲在變數d對象中的值複製一份放到為變數c分配的空間中,但這個值的副本實際是一個指針,與變數d指向堆記憶體中的同一個對象。兩個變數實際引用同一個對象,改變其中一個變數,將影響另一個變數。

  具體區別見如下例子:

//基本類型值
var num1 = 5;
var num2 = num1;
num2 = num2 + 5;
alert(num1);                   //5
alert(num2);                   //10

//引用類型值
var obj1 = new object();
var obj2 = obj1;
obj1.name = "Marry";
alert(obj2.name);            //"Marry"

 

   函數傳參

  ECMAScript中所有函數的參數都是按值傳遞的,即將函數外部的值複製給函數內部的參數。鑒於基本類型值與引用類型值複製變數的不同,其函數傳參的效果也不同。

  在向參數傳遞基本類型值時,被傳遞的參數被賦給一個局部變數,函數內部參數的變化不影響函數外部的變數;向參數傳遞引用類型值時,會把這個值在記憶體中的地址複製給一個局部變數,因此這個局部變數的變化將會反映在函數的外部。如下列例子:

//傳遞基本類型值
function addnum(num) {
    num += 10;
    return num; 
}
var num1 = 5;
var num2 = addnum(num1);
alert(num1);                  //5,無變化
alert(num2);                  //15

//傳遞引用類型值
function setage(obj) {
    obj.age = 20;
}
var obj1 = new object();
setage(obj1)
alert(obj1.age);            //20

   在局部作用域中修改的對象反映在全局作用域中,很多人會以為這是按引用傳遞。但函數對象確實都是按值傳遞,見下列例子:

function setage(obj) {
    obj.age = 20;
    obj = new object();
    obj.age = 30;
}
var obj1 = new object();
setage(obj1)
alert(obj1.age);           //20

  此例中在函數內部為obj重新定義了一個對象,且為其age屬性重新賦值,但這一變化並未反映在函數外部,說明obj1 並不是按引用傳遞的。實際函數內重新定義的對象為局部對象,在退出函數後就會被立即銷毀。

 

  檢測類型

  基本類型值可以通過typeof檢測,但typeof檢測引用類型時只能返回object。所以為了知道某個值是什麼類型的對象,ECMAScript提供了instandof操作符,語法如下:

result = variable instanceof constructor

  如果變數是引用類型的實例,instanceof操作符就會返回true。

 


  第一篇技術文,原本想放些實例,但想了想還是想還是從基礎的東西開始記錄。

  時間也有些晚了,腦子不是很清楚((⊙o⊙)…),有錯誤和補充之處請多多指教(抱拳)

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • AJAX技術是網頁構建的必備技能之一,本文希望能幫助大家輕鬆的學習這項技術 ...
  • 文本整理了javascript操作DOM的一些常用的api,根據其作用整理成為創建,修改,查詢等多種類型的api,主要用於複習基礎知識,加深對原生js的認識。 基本概念 在講解操作DOM的api之前,首先我們來複習一下一些基本概念,這些概念是掌握api的關鍵,必須理解它們。 Node類型 DOM1級 ...
  • 複習下ajax吧! 1.創建XMLHttpRequest對象 代碼僅供參考,具體功能可以自己擴展。 http://www.cnblogs.com/jiebba/p/6529854.html http://www.cnblogs.com/jiebba 我的博客,來看吧! 如果有錯誤,請留言修改下 哦! ...
  • 1.現在看看對JSONP的封裝 get / post / getJson 在 ajax的基礎上封裝了再次封裝了。 zepto基本差不多完成了, 看了之後,不難發現,zepto也就有幾大模塊: 選擇器 , 一些js原生方法的封裝 , 事件模型模塊 , 再就是 ajax 的封裝 。 代碼僅供參考,具體功 ...
  • background-image繪製多張圖片疊加,示例如下: css3的box-shadow屬性: 讓ie6、7、8都支持border-radius 、box-shadow、text-shadow的方法:用ie-css3.htc 首先下載ie-css3.htc腳本,然後在css中加入: 它的使用方法 ...
  • 獲取URL裡面傳的參數,在Js中不能像後臺一樣使用Request.QueryString來獲取URL裡面參數,下麵介紹兩種方式用來獲取參數 方式一:使用split分隔來獲取,這種方法考試了地址中包含了returnUrl參數的形式,如果地址中本來就包含了另外一個網址,這個時候需要先過濾掉這個網址再去獲 ...
  • 前言 在vue里,組件之間的作用域是獨立的,父組件跟子組件之間的通訊可以通過prop屬性來傳參,但是在兄弟組件之間通訊就比較麻煩了。比如A組件要告訴一件事給B組件,那麼A就要先告訴他們的爸組件,然後爸組件再告訴B。當組件比較多,要互相通訊的事情很多的話,爸組件要管他們那麼多事,很累的。vuex正是為 ...
  • 本文實現了一個簡單的個人漫畫網站,配合之前的漫畫爬蟲使用。享受無處不在的漫畫生活。 github地址:https://github.com/miaoerduo/cartoon-cat-server 歡迎大家star、fork和指教。 ...
一周排行
    -Advertisement-
    Play Games
  • 示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後,項目結構如下所示: MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread] 特性用於需要與 COM 組件交互的應用程式,尤其是依賴單線程模型(如 Windows Forms 應用程式)的組件。在 STA 模式下,線程擁有自己的消息迴圈,這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • 在WinForm中使用全局異常捕獲處理 在WinForm應用程式中,全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理,可以有效地捕獲並處理未預見的異常,從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • 前言 給大家推薦一款開源的 Winform 控制項庫,可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫,同時也提供了工具類庫、擴展 ...
  • 說明 該文章是屬於OverallAuth2.0系列文章,每周更新一篇該系列文章(從0到1完成系統開發)。 該系統文章,我會儘量說的非常詳細,做到不管新手、老手都能看懂。 說明:OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友,請關註我吧(*^▽^*) ...
  • 一、下載安裝 1.下載git 必須先下載並安裝git,再TortoiseGit下載安裝 git安裝參考教程:https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit,Git客戶端,32/6 ...
  • 前言 在項目開發過程中,理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼,還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程:Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 一:背景 1. 講故事 前段時間有位朋友找到我,說他的窗體程式在客戶這邊出現了卡死,讓我幫忙看下怎麼回事?dump也生成了,既然有dump了那就上 windbg 分析吧。 二:WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死,入口門檻很低,後續往下分析就不一定了,不管怎麼說先用 !clrsta ...
  • 前言 人工智慧時代,人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API,工具不僅易於集成,還具備高效處理能力。 本文將介紹一款如何利用這些API,為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...