javascript - jquery' title




var關鍵字的用途是什麼,什麼時候應該使用它(或省略它)? (12)

注意 :這個問題是從ECMAScript版本3或5的角度提出的。在ECMAScript 6發行版中引入新功能後,答案可能會過時。

JavaScript中var關鍵字的功能究竟是什麼,以及它們之間的區別是什麼

var someNumber = 2;
var someFunction = function() { doSomething; }
var someObject = { }
var someObject.someProperty = 5;

someNumber = 2;
someFunction = function() { doSomething; }
someObject = { }
someObject.someProperty = 5;

你什麼時候可以使用任何一個,為什麼?它有什麼作用?


不要使用var

var是聲明變量的ES6之前的方法。 我們現在是未來 ,你應該這樣編碼。

使用constlet

95%的情況下應該使用const 。 它使得變量引用不能改變,因此數組,對象和DOM節點屬性可以改變,並且可能是const

let應該被用於任何期望被重新分配的變量。 這包括在for循環中。 如果您在初始化之後編寫varName = ,請使用let

兩者都有塊級的範圍界定,正如大多數其他語言所預期的那樣。


@Chris S給出了一個很好的例子,展示了var和no var之間的實際區別(和危險)。 這裡有另外一個,我覺得這個特別危險,因為只有在異步環境中才可以看到差異,所以在測試過程中它很容易滑倒。

正如你所期望的,以下代碼段輸出["text"]

function var_fun() {
  let array = []
  array.push('text')
  return array
}

console.log(var_fun())

那麼下面的代碼片段(注意在array之前丟失):

function var_fun() {
  array = []
  array.push('text')
  return array
}

console.log(var_fun())

異步執行數據操作仍然會產生與單個執行程序相同的結果:

function var_fun() {
  array = [];
  return new Promise(resolve => resolve()).then(() => {
    array.push('text')
    return array
  })
}

var_fun().then(result => {console.log(result)})

但是與多個行為有所不同:

function var_fun() {
  array = [];
  return new Promise(resolve => resolve()).then(() => {
    array.push('text')
    return array
  })
}

[1,2,3].forEach(i => {
  var_fun().then(result => {console.log(result)})
})

然而,使用讓:

function var_fun() {
  let array = [];
  return new Promise(resolve => resolve()).then(() => {
    array.push('text')
    return array
  })
}

[1,2,3].forEach(i => {
  var_fun().then(result => {console.log(result)})
})


下面是一個很好的例子,說明如何從var聲明局部變量:

<script>
one();

function one()
{
    for (i = 0;i < 10;i++)
    {
        two();
        alert(i);
    }
}

function two()
{
    i = 1;
}
</script>

i在循環的每次迭代時重置,因為它不是在for循環中本地聲明的for而是全局的)最終導致無限循環


不使用“var”變量只能在設置值時進行定義。 例如:

my_var;

無法在全球範圍任何其他範圍內工作 。 它應該具有以下價值:

my_var = "value";

另一方面,你可以定義一個可變的像;

var my_var;

它的值是undefined (它的值不是null ,它不等於null有趣)。


使用var總是一個好主意,可以防止變量混淆全局範圍和變量之間的衝突,導致不必要的覆蓋。


另一個差異例如

var a = a || [] ; // works 

a = a || [] ; // a is undefined error.

如果你在全球範圍內,那麼沒有區別。

如果你在一個函數中,那麼var將創建一個局部變量,“no var”將查找範圍鏈,直到它找到變量或命中全局範圍(它將創建它):

// These are both globals
var foo = 1;
bar = 2;

function()
{
    var foo = 1; // Local
    bar = 2;     // Global

    // Execute an anonymous function
    (function()
    {
        var wibble = 1; // Local
        foo = 2; // Inherits from scope above (creating a closure)
        moo = 3; // Global
    }())
}

如果你沒有做任務,那麼你需要使用var

var x; // Declare x

我會說在大多數情況下使用var更好。

局部變量總是比全局範圍內的變量更快。

如果你不使用var來聲明一個變量,那麼這個變量將在全局範圍內。

有關更多信息,您可以在Google中搜索“範圍鏈JavaScript”。


正如有人試圖學習這一點,這是我看到它的方式。 對於初學者來說,上面的例子可能有點過於復雜。

如果你運行這個代碼:

var local = true;
var global = true;


function test(){
  var local = false;
  var global = false;
  console.log(local)
  console.log(global)
}

test();

console.log(local);
console.log(global);

輸出將顯示為:false,false,true,true

因為它將函數中的變量視為與其外部的變量分離,因此術語局部變量,這是因為我們在賦值中使用了var。 如果你拿掉了函數中的變量,現在它讀起來像這樣:

var local = true;
var global = true;


function test(){
  local = false;
  global = false;
  console.log(local)
  console.log(global)
}

test();

console.log(local);
console.log(global);

輸出是錯誤的,錯誤的,錯誤的,錯誤的

這是因為不是在本地作用域或函數中創建新變量,而是簡單地使用全局變量並將它們重新賦值為false。


沒有var - 全局變量。

強烈建議總是使用var語句,因為本地環境中的init全局變量 - 是邪惡的。 但是,如果你需要這個骯髒的竅門,你應該在頁面開始寫評論:

/* global: varname1, varname2... */

說這是“ 本地全球 ”之間的差異並不完全準確。

把它看作“ 本地最近 ”之間的區別可能會更好。 離得最近的人肯定是全球性的,但事實並非總是如此。

/* global scope */
var local = true;
var global = true;

function outer() {
    /* local scope */
    var local = true;
    var global = false;

    /* nearest scope = outer */
    local = !global;

    function inner() {
        /* nearest scope = outer */
        local = false;
        global = false;

        /* nearest scope = undefined */
        /* defaults to defining a global */
        public = global;
    }
}

這是我為你理解這個概念而編寫的示例代碼:

var foo = 5; 
bar = 2;     
fooba = 3;

// Execute an anonymous function
(function() {    
    bar = 100;             //overwrites global scope bar
    var foo = 4;           //a new foo variable is created in this' function's scope
    var fooba = 900;       //same as above
    document.write(foo);   //prints 4
    document.write(bar);   //prints 100
    document.write(fooba); //prints 900
})();

document.write('<br/>');
document.write('<br/>');
document.write(foo);       //prints 5
document.write(bar);       //prints 100
document.write(fooba);     //prints 3






ecmascript-5