LƯU Ý : Câu hỏi này được hỏi từ quan điểm của ECMAScript phiên bản 3 hoặc 5. Các câu trả lời có thể trở nên lỗi thời khi giới thiệu các tính năng mới trong bản phát hành ECMAScript 6.

Chính xác thì chức năng của vartừ khóa trong JavaScript là gì và sự khác biệt giữa

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

và

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

?

Khi nào bạn sẽ sử dụng một trong hai, và tại sao / nó làm gì?

Nếu bạn ở trong phạm vi toàn cầu thì không có nhiều khác biệt. Đọc câu trả lời của Kangax để được giải thích

Nếu bạn đang ở trong một hàm thì varsẽ tạo một biến cục bộ, "no var" sẽ tra cứu chuỗi phạm vi cho đến khi nó tìm thấy biến hoặc chạm vào phạm vi toàn cầu (tại điểm đó nó sẽ tạo ra nó):

// 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
    }())
}

Nếu bạn không làm bài tập thì bạn cần sử dụng var:

var x; // Declare x

Có một sự khác biệt .

var x = 1 khai báo biến x trong phạm vi hiện tại (còn gọi là bối cảnh thực thi). Nếu khai báo xuất hiện trong một hàm - một biến cục bộ được khai báo; nếu nó trong phạm vi toàn cầu - một biến toàn cục được khai báo.

x = 1, mặt khác, chỉ là một sự phân công tài sản. Đầu tiên nó cố gắng giải quyết xchống lại chuỗi phạm vi. Nếu nó tìm thấy nó ở bất cứ đâu trong chuỗi phạm vi đó, nó sẽ thực hiện chuyển nhượng; nếu nó không tìm thấy x, chỉ sau đó nó mới tạo thuộc xtính trên một đối tượng toàn cục (là đối tượng cấp cao nhất trong chuỗi phạm vi).

Bây giờ, lưu ý rằng nó không khai báo một biến toàn cục, nó tạo ra một thuộc tính toàn cầu.

Sự khác biệt giữa hai loại này là tinh tế và có thể gây nhầm lẫn trừ khi bạn hiểu rằng khai báo biến cũng tạo ra các thuộc tính (chỉ trên Đối tượng biến) và mọi thuộc tính trong Javascript (tốt, ECMAScript) đều có các cờ nhất định mô tả các thuộc tính của chúng - ReadOnly, DontEnum và Đừng bỏ qua.

Vì khai báo biến tạo thuộc tính với cờ DontDelete, nên sự khác biệt giữa var x = 1và x = 1(khi được thực thi trong phạm vi toàn cầu) là khai báo biến trước đây - tạo ra thuộc tính DontDelete'able, và sau này không có. Do đó, thuộc tính được tạo thông qua việc gán ẩn này sau đó có thể bị xóa khỏi đối tượng toàn cục và đối tượng cũ - thuộc tính được tạo thông qua khai báo biến - không thể bị xóa.

Nhưng đây chỉ là lý thuyết tất nhiên, và trong thực tế thậm chí còn có nhiều sự khác biệt hơn giữa hai điều này , do các lỗi khác nhau trong việc triển khai (chẳng hạn như các lỗi từ IE).

Hy vọng tất cả có ý nghĩa :)

[Cập nhật 2010/12/16]

Trong ES5 (ECMAScript 5; phiên bản thứ 5 của ngôn ngữ được chuẩn hóa gần đây) có cái gọi là "chế độ nghiêm ngặt" - chế độ ngôn ngữ chọn tham gia, thay đổi một chút hành vi của các bài tập không được khai báo. Trong chế độ nghiêm ngặt, việc gán cho một định danh chưa được khai báo là ReferenceError . Lý do cho việc này là để bắt các nhiệm vụ tình cờ, ngăn chặn việc tạo ra các tài sản toàn cầu không mong muốn. Một số trình duyệt mới hơn đã bắt đầu hỗ trợ cho chế độ nghiêm ngặt. Xem, ví dụ, bảng compat của tôi .

Nói rằng sự khác biệt giữa " địa phương và toàn cầu " không hoàn toàn chính xác.

Có thể tốt hơn khi nghĩ về nó như là sự khác biệt giữa " địa phương và gần nhất ". Gần nhất chắc chắn có thể là toàn cầu, nhưng điều đó sẽ không luôn luôn như vậy.

/* 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;
    }
}

Khi Javascript được thực thi trong trình duyệt, tất cả mã của bạn được bao quanh bởi một câu lệnh with, như vậy:

with (window) {
    //Your code
}

Thông tin thêm về with- MDN

Vì varkhai báo một biến trong phạm vi hiện tại , không có sự khác biệt giữa khai báo var bên trong cửa sổ và không khai báo nó.

Sự khác biệt xuất hiện khi bạn không trực tiếp bên trong cửa sổ, ví dụ bên trong một chức năng hoặc bên trong một khối.

Sử dụng varcho phép bạn ẩn các biến bên ngoài có cùng tên. Theo cách này, bạn có thể mô phỏng một biến "riêng tư", nhưng đó là một chủ đề khác.

Một nguyên tắc nhỏ là luôn luôn sử dụng var, bởi vì nếu không, bạn sẽ gặp rủi ro khi đưa ra các lỗi tinh vi.

EDIT: Sau những bài phê bình tôi nhận được, tôi muốn nhấn mạnh những điều sau:

• varkhai báo một biến trong phạm vi hiện tại
• Phạm vi toàn cầu là window
• Không sử dụng varkhai báo ngầm vartrong phạm vi toàn cầu (cửa sổ)
• Khai báo một biến trong phạm vi toàn cầu (cửa sổ) bằng cách sử dụng vargiống như bỏ qua nó.
• Khai báo một biến trong phạm vi khác với cửa sổ sử dụng var không giống như khai báo một biến mà không cóvar
• Luôn luôn tuyên bố varrõ ràng bởi vì đó là thực hành tốt

Luôn luôn sử dụng vartừ khóa để khai báo các biến. Tại sao? Thực hành mã hóa tốt nên có đủ lý do trong chính nó, nhưng bỏ qua nó có nghĩa là nó được khai báo trong phạm vi toàn cầu (một biến như thế này được gọi là toàn cầu "ngụ ý"). Douglas Crockford khuyến nghị không bao giờ sử dụng toàn cầu ngụ ý và theo Nguyên tắc mã hóa JavaScript của Apple :

Bất kỳ biến nào được tạo mà không có var từ khóa đều được tạo ở phạm vi toàn cục và không phải là rác được thu thập khi hàm trả về (vì nó không nằm ngoài phạm vi), tạo cơ hội cho rò rỉ bộ nhớ.

Đây là một ví dụ điển hình về cách bạn có thể bị bắt gặp khi không khai báo các biến cục bộ với var:

<script>
one();

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

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

( iđược đặt lại ở mỗi lần lặp của vòng lặp, vì nó không được khai báo cục bộ trong forvòng lặp mà trên toàn cầu) cuối cùng dẫn đến vòng lặp vô hạn

Tôi sẽ nói rằng tốt hơn để sử dụng vartrong hầu hết các tình huống.

Các biến cục bộ luôn nhanh hơn các biến trong phạm vi toàn cầu.

Nếu bạn không sử dụng varđể khai báo một biến, biến đó sẽ nằm trong phạm vi toàn cầu.

Để biết thêm thông tin, bạn có thể tìm kiếm "JavaScript chuỗi phạm vi" trong Google.

Đừng sử dụng var!

varlà cách trước ES6 để khai báo một biến. Chúng tôi đang ở trong tương lai và bạn nên viết mã như vậy.

Sử dụng constvàlet

constnên được sử dụng cho 95% các trường hợp. Nó làm cho nó để tham chiếu biến không thể thay đổi, do đó các thuộc tính của mảng, đối tượng và nút DOM có thể thay đổi và có thể sẽ thay đổi const.

letnên được sử dụng cho bất kỳ biến nào được mong đợi được gán lại. Điều này bao gồm trong một vòng lặp for. Nếu bạn từng viết varName =vượt quá khởi tạo, hãy sử dụng let.

Cả hai đều có phạm vi cấp khối, như mong đợi trong hầu hết các ngôn ngữ khác.

sự khác biệt khác, vd

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

trong khi

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

Sử dụng varluôn là một ý tưởng tốt để ngăn chặn các biến làm lộn xộn phạm vi toàn cầu và các biến không xung đột với nhau, gây ra ghi đè không mong muốn.

Không có var - biến toàn cầu.

Rất khuyến khích LUÔN LUÔN sử dụng varcâu lệnh, bởi vì biến toàn cục init trong bối cảnh cục bộ - là xấu xa. Nhưng, nếu bạn cần thủ thuật bẩn này, bạn nên viết bình luận ở đầu trang:

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

Đây là mã ví dụ tôi đã viết để bạn hiểu khái niệm này:

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

@Chris S đã đưa ra một ví dụ hay cho thấy sự khác biệt thực tế (và nguy hiểm) giữa varvà khôngvar . Đây là một cái khác, tôi thấy cái này đặc biệt nguy hiểm vì sự khác biệt chỉ có thể nhìn thấy trong một môi trường không đồng bộ để nó có thể dễ dàng bị trượt trong quá trình thử nghiệm.

Như bạn mong đợi các đầu ra đoạn mã sau ["text"]:

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

console.log(var_fun())

Đoạn mã sau cũng vậy (lưu ý phần còn thiếu lettrước array):

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

console.log(var_fun())

Thực hiện thao tác dữ liệu không đồng bộ vẫn tạo ra kết quả tương tự với một người thực thi:

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

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

Nhưng hành xử khác nhau với nhiều người:

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)})
})

Tuy nhiên, sử dụng let:

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)})
})

Như một người nào đó đang cố gắng học điều này thì đây là cách tôi nhìn thấy nó. Các ví dụ trên có thể hơi phức tạp đối với người mới bắt đầu.

Nếu bạn chạy mã này:

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);

Đầu ra sẽ đọc là: false, false, true, true

Bởi vì nó thấy các biến trong hàm là tách biệt với các biến bên ngoài nó, do đó thuật ngữ biến cục bộ và điều này là do chúng ta đã sử dụng var trong bài tập. Nếu bạn lấy đi var trong hàm thì bây giờ nó sẽ đọc như sau:

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);

Đầu ra là sai, sai, sai, sai

Điều này là do thay vì tạo một biến mới trong phạm vi hoặc hàm cục bộ, nó chỉ đơn giản sử dụng các biến toàn cục và gán lại chúng thành false.

Tôi thấy mọi người bối rối khi khai báo các biến có hoặc không có var và bên trong hoặc bên ngoài hàm. Dưới đây là một ví dụ sâu sắc sẽ đưa bạn qua các bước sau:

Xem kịch bản dưới đây trong hành động ở đây tại jsfiddle

a = 1;// Defined outside the function without var
var b = 1;// Defined outside the function with var
alert("Starting outside of all functions... \n \n a, b defined but c, d not defined yet: \n a:" + a + "\n b:" + b + "\n \n (If I try to show the value of the undefined c or d, console.log would throw 'Uncaught ReferenceError: c is not defined' error and script would stop running!)");

function testVar1(){
    c = 1;// Defined inside the function without var
    var d = 1;// Defined inside the function with var
    alert("Now inside the 1. function: \n a:" + a + "\n b:" + b + "\n c:" + c + "\n d:" + d);

    a = a + 5;
    b = b + 5;
    c = c + 5;
    d = d + 5;

    alert("After added values inside the 1. function: \n a:" + a + "\n b:" + b + "\n c:" + c + "\n d:" + d);
};


testVar1();
alert("Run the 1. function again...");
testVar1();

function testVar2(){
    var d = 1;// Defined inside the function with var
    alert("Now inside the 2. function: \n a:" + a + "\n b:" + b + "\n c:" + c + "\n d:" + d);

    a = a + 5;
    b = b + 5;
    c = c + 5;
    d = d + 5;

    alert("After added values inside the 2. function: \n a:" + a + "\n b:" + b + "\n c:" + c + "\n d:" + d);
};

testVar2();

alert("Now outside of all functions... \n \n Final Values: \n a:" + a + "\n b:" + b + "\n c:" + c + "\n You will not be able to see d here because then the value is requested, console.log would throw error 'Uncaught ReferenceError: d is not defined' and script would stop. \n ");
alert("**************\n Conclusion \n ************** \n \n 1. No matter declared with or without var (like a, b) if they get their value outside the function, they will preserve their value and also any other values that are added inside various functions through the script are preserved.\n 2. If the variable is declared without var inside a function (like c), it will act like the previous rule, it will preserve its value across all functions from now on. Either it got its first value in function testVar1() it still preserves the value and get additional value in function testVar2() \n 3. If the variable is declared with var inside a function only (like d in testVar1 or testVar2) it will will be undefined whenever the function ends. So it will be temporary variable in a function.");
alert("Now check console.log for the error when value d is requested next:");
alert(d);

Phần kết luận

1. Bất kể được khai báo có hoặc không có var (như a, b) nếu chúng nhận được giá trị bên ngoài hàm, chúng sẽ bảo toàn giá trị của chúng và bất kỳ giá trị nào khác được thêm vào bên trong các hàm khác nhau thông qua tập lệnh được giữ nguyên.
2. Nếu biến được khai báo không có var bên trong một hàm (như c), nó sẽ hoạt động như quy tắc trước đó, nó sẽ bảo toàn giá trị của nó trên tất cả các hàm kể từ bây giờ. Hoặc nó có giá trị đầu tiên trong hàm testVar1 () nó vẫn giữ giá trị và nhận giá trị bổ sung trong hàm testVar2 ()
3. Nếu biến chỉ được khai báo với var bên trong một hàm (như d trong testVar1 hoặc testVar2) thì nó sẽ không được xác định bất cứ khi nào hàm kết thúc. Vì vậy, nó sẽ là biến tạm thời trong một chức năng.

Bên trong một mã bạn nếu bạn sử dụng một biến mà không sử dụng var, thì điều xảy ra là var var_name tự động được đặt trong phạm vi toàn cục, ví dụ:

someFunction() {
    var a = some_value; /*a has local scope and it cannot be accessed when this
    function is not active*/
    b = a; /*here it places "var b" at top of script i.e. gives b global scope or
    uses already defined global variable b */
}

Bên cạnh vấn đề phạm vi, một số người cũng đề cập đến cẩu , nhưng không ai đưa ra một ví dụ. Đây là một cho phạm vi toàn cầu:

console.log(noErrorCase);
var noErrorCase = "you will reach that point";

console.log(runTimeError);
runTimeError = "you won't reach that point";

Không sử dụng biến "var" chỉ có thể xác định khi đặt giá trị. Trong ví dụ:

my_var;

không thể làm việc trong phạm vi toàn cầu hoặc bất kỳ phạm vi khác . Nó nên có giá trị như:

my_var = "value";

Mặt khác, bạn có thể định nghĩa một khả năng thích;

var my_var;

Giá trị của nó là undefined(Giá trị của nó là không nullvà nó không bằng nullthú vị.).

Bạn nên sử dụng từ khóa var trừ khi bạn có ý định gắn biến đối tượng vào cửa sổ trong trình duyệt. Đây là một liên kết giải thích phạm vi và sự khác biệt giữa phạm vi glocal và phạm vi cục bộ với và từ khóa var không có.

Khi các biến được xác định mà không sử dụng từ khóa var, nó trông giống như một hoạt động chuyển nhượng đơn giản.

Khi giá trị được gán cho một biến trong javascript, trước tiên, trình thông dịch sẽ cố gắng tìm ra khai báo biến số biến đổi trong cùng một bối cảnh / phạm vi như của phép gán. Khi trình thông dịch thực thi dummyVariable = 20, nó tìm kiếm khai báo của dummyVariable khi bắt đầu hàm. (Vì tất cả các khai báo Biến được chuyển đến đầu ngữ cảnh bởi trình thông dịch javascript và điều này được gọi là cẩu

Bạn cũng có thể muốn nhìn vào cẩu trong javascript