หมายเหตุ : คำถามนี้ถูกถามจากมุมมองของ ECMAScript เวอร์ชัน 3 หรือ 5 คำตอบอาจล้าสมัยเมื่อมีการเปิดตัวฟีเจอร์ใหม่ในการเปิดตัว ECMAScript 6

ฟังก์ชันของvarคำหลักใน JavaScript คืออะไรและอะไรคือความแตกต่างระหว่าง

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

และ

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

?

เมื่อไหร่ที่คุณจะใช้อันใดอันหนึ่งและเพราะอะไร / ทำอะไร?

หากคุณอยู่ในขอบเขตทั่วโลกก็มีความแตกต่างไม่มาก อ่านคำตอบของ Kangaxเพื่อขอคำอธิบาย

หากคุณอยู่ในฟังก์ชันแล้ว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 x = 1 ประกาศตัวแปร xในขอบเขตปัจจุบัน (รู้จักในบริบทการดำเนินการ) หากการประกาศปรากฏขึ้นในฟังก์ชั่น - มีการประกาศตัวแปรท้องถิ่น ถ้าอยู่ในขอบเขตทั่วโลกตัวแปรทั่วโลกจะถูกประกาศ

x = 1ในทางกลับกันเป็นเพียงการมอบหมายคุณสมบัติ ก่อนอื่นพยายามแก้ไขxกับสายโซ่ขอบเขต หากพบที่ใดก็ได้ในห่วงโซ่ขอบเขตนั้นจะทำการมอบหมาย หากไม่พบxก็จะสร้างxคุณสมบัติบนวัตถุทั่วโลก (ซึ่งเป็นวัตถุระดับบนสุดในห่วงโซ่ขอบเขต)

ตอนนี้สังเกตว่ามันไม่ได้ประกาศตัวแปรทั่วโลกมันสร้างทรัพย์สินส่วนกลาง

ความแตกต่างระหว่างทั้งสองนั้นบอบบางและอาจสร้างความสับสนเว้นแต่ว่าคุณเข้าใจว่าการประกาศตัวแปรยังสร้างคุณสมบัติ (เฉพาะในตัวแปรที่เป็นวัตถุ) และทุกคุณสมบัติใน Javascript (ดี ECMAScript) มีแฟล็กที่แน่นอนที่อธิบายคุณสมบัติของพวกเขา - ReadOnly, DontEnum และ DontDelete

เนื่องจากการประกาศตัวแปรสร้างคุณสมบัติด้วยแฟล็ก DontDelete ความแตกต่างระหว่างvar x = 1และx = 1(เมื่อดำเนินการในขอบเขตทั่วโลก) คือการประกาศในอดีต - การประกาศตัวแปร - สร้างคุณสมบัติ DontDelete'able และอันหลังไม่ได้ ด้วยเหตุนี้คุณสมบัติที่สร้างขึ้นผ่านการกำหนดโดยนัยนี้จะสามารถลบออกจากออบเจ็กต์ทั่วโลกและไม่สามารถลบอันแรกที่สร้างผ่านการประกาศตัวแปร -

แต่นี่เป็นเพียงทฤษฎีแน่นอนและในทางปฏิบัติมีความแตกต่างระหว่างทั้งสองมากขึ้นเนื่องจากข้อบกพร่องต่าง ๆ ในการใช้งาน (เช่นจาก IE)

หวังว่ามันจะสมเหตุสมผล:)

[อัพเดท 2010/12/16]

ใน ES5 (ECMAScript 5; ภาษามาตรฐานฉบับที่ 5 เมื่อเร็ว ๆ นี้) มีสิ่งที่เรียกว่า "โหมดเข้มงวด" - โหมดการเลือกใช้ภาษาซึ่งเปลี่ยนพฤติกรรมของการมอบหมายที่ไม่ได้ประกาศเล็กน้อย ในโหมดเข้มงวดมอบหมายให้ตัวระบุไม่ได้ประกาศเป็นReferenceError เหตุผลสำหรับเรื่องนี้คือการจับการมอบหมายโดยไม่ตั้งใจป้องกันการสร้างคุณสมบัติทั่วโลกที่ไม่พึงประสงค์ เบราว์เซอร์ที่ใหม่กว่าบางตัวเริ่มการสนับสนุนในโหมดเข้มงวดแล้ว ดูตัวอย่างตารางที่เข้ากันได้ของฉัน

การพูดว่าเป็นความแตกต่างระหว่าง " ระดับท้องถิ่นและระดับโลก " นั้นไม่ถูกต้องทั้งหมด

มันอาจจะเป็นการดีกว่าถ้าคิดว่าเป็นความแตกต่างระหว่าง " ท้องถิ่นและใกล้ที่สุด " ที่ใกล้ที่สุดสามารถเป็นโลกได้ แต่ไม่ได้เป็นเช่นนั้นเสมอไป

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

เมื่อ Javascript ทำงานในเบราว์เซอร์รหัสทั้งหมดของคุณจะถูกล้อมรอบด้วยคำสั่ง with เช่น:

with (window) {
    //Your code
}

ข้อมูลเพิ่มเติมเกี่ยวกับwith- MDN

เนื่องจากvarประกาศตัวแปรในขอบเขตปัจจุบันจึงไม่มีความแตกต่างระหว่างการประกาศvar ภายในหน้าต่างและไม่ประกาศตัวแปรเลย

ความแตกต่างเกิดขึ้นเมื่อคุณไม่ได้อยู่ในหน้าต่างโดยตรงเช่นภายในฟังก์ชั่นหรือภายในบล็อก

การใช้varให้คุณซ่อนตัวแปรภายนอกที่มีชื่อเหมือนกัน ด้วยวิธีนี้คุณสามารถจำลองตัวแปร "ส่วนตัว" แต่นั่นเป็นอีกหัวข้อ

กฎของหัวแม่มือคือการใช้เสมอvarเพราะมิฉะนั้นคุณจะเสี่ยงต่อการแนะนำข้อบกพร่องที่ลึกซึ้ง

แก้ไข: หลังจากวิพากษ์วิจารณ์ที่ฉันได้รับฉันต้องการเน้นย้ำต่อไปนี้:

• varประกาศตัวแปรในขอบเขตปัจจุบัน
• ขอบเขตทั่วโลกคือ window
• ไม่ได้ใช้varประกาศโดยปริยายvarในขอบเขตส่วนกลาง (หน้าต่าง)
• การประกาศตัวแปรในขอบเขตโกลบอล (หน้าต่าง) ที่ใช้varนั้นเหมือนกับการละเว้นตัวแปร
• การประกาศตัวแปรในขอบเขตที่แตกต่างจากการใช้หน้าต่างvar ไม่ใช่สิ่งเดียวกับการประกาศตัวแปรที่ไม่มีvar
• ประกาศvarอย่างชัดเจนเสมอเพราะเป็นแนวปฏิบัติที่ดี

ใช้varคำสำคัญเพื่อประกาศตัวแปรเสมอ ทำไม? การเขียนโค้ดที่ดีควรมีเหตุผลเพียงพอในตัวมันเอง แต่ไม่ได้หมายความว่ามันถูกประกาศในขอบเขตทั่วโลก (ตัวแปรเช่นนี้เรียกว่า "โดยนัย" ทั่วโลก) Douglas Crockford ไม่แนะนำให้ใช้ globals โดยนัยและเป็นไปตามแนวทางการเข้ารหัสของApple JavaScript :

ตัวแปรใด ๆ ที่สร้างขึ้นโดยไม่มีvar คีย์เวิร์ดจะถูกสร้างขึ้นที่ขอบเขตส่วนกลางและจะไม่ถูกเก็บรวบรวมขยะเมื่อฟังก์ชันส่งคืน (เนื่องจากไม่ได้อยู่นอกขอบเขต) ซึ่งจะแสดงโอกาสสำหรับหน่วยความจำรั่ว

นี่เป็นตัวอย่างที่ดีของวิธีที่คุณสามารถหลีกเลี่ยงการประกาศตัวแปรท้องถิ่นด้วยvar:

<script>
one();

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

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

( iถูกรีเซ็ตทุกการวนซ้ำของลูปเนื่องจากไม่ได้ประกาศเฉพาะในforลูป แต่เป็นแบบโกลบอล) ทำให้เกิดลูปไม่สิ้นสุด

ฉันจะบอกว่ามันจะดีกว่าที่จะใช้varในสถานการณ์ส่วนใหญ่

ตัวแปรโลคัลจะเร็วกว่าตัวแปรในขอบเขตโกลบอลเสมอ

หากคุณไม่ได้ใช้varเพื่อประกาศตัวแปรตัวแปรนั้นจะอยู่ในขอบเขตส่วนกลาง

สำหรับข้อมูลเพิ่มเติมคุณสามารถค้นหา "JavaScript chain scope" ใน Google

อย่าใช้var!

varเป็นวิธีก่อน ES6 ในการประกาศตัวแปร เรากำลังอยู่ในอนาคตและคุณควรเขียนโค้ดเช่นนี้

ใช้constและlet

constควรใช้ 95% ของกรณี มันทำให้ดังนั้นการอ้างอิงตัวแปรไม่สามารถเปลี่ยนอาร์เรย์จึงวัตถุและ DOM constคุณสมบัติโหนดสามารถเปลี่ยนและมีแนวโน้มที่ควรจะเป็น

letควรใช้สำหรับตัวแปรใด ๆ ที่คาดว่าจะกำหนดใหม่ ซึ่งรวมถึงภายในวง ถ้าคุณเคยเขียนเกินกว่าการเริ่มต้นใช้งานvarName =let

ทั้งสองมีการกำหนดขอบเขตระดับบล็อกตามที่คาดไว้ในภาษาอื่น ๆ ส่วนใหญ่

ความแตกต่างอื่น ๆ เช่น

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

ในขณะที่

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

การใช้varเป็นความคิดที่ดีในการป้องกันไม่ให้ตัวแปรยุ่งเหยิงขอบเขตทั่วโลกและตัวแปรจากการขัดแย้งกันทำให้เกิดการเขียนทับที่ไม่ต้องการ

ไม่มีvar- ตัวแปรทั่วโลก

แนะนำอย่างยิ่งให้ใช้คำสั่งเสมอvarเพราะตัวแปรทั่วโลก init ในบริบทท้องถิ่น - เป็นความชั่วร้าย แต่ถ้าคุณต้องการเคล็ดลับสกปรกคุณควรเขียนความคิดเห็นเมื่อเริ่มต้นหน้า:

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

นี่คือโค้ดตัวอย่างที่ฉันเขียนให้คุณเข้าใจแนวคิดนี้:

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 ให้เป็นตัวอย่างที่ดีการจัดแสดงความแตกต่างของการปฏิบัติ (และอันตราย) ระหว่างและไม่มีการvar varนี่คืออีกอันหนึ่งฉันพบว่าสิ่งนี้อันตรายเป็นพิเศษเพราะความแตกต่างสามารถมองเห็นได้ในสภาพแวดล้อมแบบอะซิงโครนัสเท่านั้นดังนั้นจึงสามารถลื่นหลุดได้ง่ายในระหว่างการทดสอบ

ตามที่คุณคาดหวังผลลัพธ์ตัวอย่างต่อไปนี้["text"]:

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

console.log(var_fun())

ดังนั้นข้อมูลโค้ดต่อไปนี้ (โปรดสังเกตสิ่งที่ขาดไปletก่อนหน้านี้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 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 ในฟังก์ชั่นดังนั้นตอนนี้มันจะอ่านดังนี้:

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, false, false, false

นี่เป็นเพราะแทนที่จะสร้างตัวแปรใหม่ในขอบเขตหรือฟังก์ชั่นในท้องถิ่นมันก็ใช้ตัวแปรทั่วโลกและกำหนดให้เป็นเท็จ

ฉันเห็นคนสับสนเมื่อประกาศตัวแปรที่มีหรือไม่มีvarและภายในหรือภายนอกฟังก์ชั่น นี่คือตัวอย่างลึก ๆ ที่จะนำคุณเข้าสู่ขั้นตอนเหล่านี้:

ดูสคริปต์ด้านล่างในการดำเนินการที่นี่ที่ 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);

ข้อสรุป

1. ไม่ว่ามีการประกาศโดยมีหรือไม่มี var (เช่น a, b) หากพวกเขาได้รับค่าของพวกเขานอกฟังก์ชั่นพวกเขาจะรักษาคุณค่าของพวกเขาและค่าอื่น ๆ ที่เพิ่มเข้ามาในฟังก์ชั่นต่างๆผ่านสคริปต์จะถูกเก็บไว้
2. หากตัวแปรถูกประกาศโดยไม่มี var ภายในฟังก์ชั่น (เช่น c) มันจะทำหน้าที่เหมือนกฎก่อนหน้านี้มันจะเก็บค่าไว้ในทุกฟังก์ชั่นนับจากนี้เป็นต้นไป ไม่ว่าจะได้รับค่าแรกในฟังก์ชั่น testVar1 () ก็ยังคงรักษาค่าและรับค่าเพิ่มเติมในฟังก์ชั่น testVar2 ()
3. หากประกาศตัวแปรด้วย var ภายในฟังก์ชั่นเท่านั้น (เช่น d ใน testVar1 หรือ testVar2) มันจะไม่ถูกกำหนดเมื่อใดก็ตามที่ฟังก์ชั่นสิ้นสุดลง ดังนั้นมันจะเป็นตัวแปรชั่วคราวในฟังก์ชั่น

ภายในรหัสของคุณถ้าคุณใช้ตัวแปรโดยไม่ต้องใช้ var สิ่งที่เกิดขึ้นคือ var var_name อัตโนมัติจะถูกวางในขอบเขตทั่วโลกเช่น:

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

นอกจากปัญหาขอบเขตแล้วบางคนยังพูดถึงการชักรอกแต่ก็ไม่มีใครยกตัวอย่าง นี่คือขอบเขตหนึ่งของโลก:

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

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

โดยไม่ใช้ตัวแปร "var" สามารถกำหนดได้เมื่อตั้งค่าเท่านั้น ในตัวอย่าง:

my_var;

ไม่สามารถทำงานได้ในขอบเขตทั่วโลกหรือขอบเขตอื่น ๆ ควรมีค่าเช่น:

my_var = "value";

ในอีกทางหนึ่งคุณสามารถกำหนด vaiable like;

var my_var;

ค่าของมันคือundefined(ค่าของมันไม่ได้nullและไม่เท่ากับที่nullน่าสนใจ)

คุณควรใช้คำหลักวาร์ยกเว้นว่าคุณต้องการแนบตัวแปรกับวัตถุหน้าต่างในเบราว์เซอร์ นี่คือลิงค์ที่อธิบายการกำหนดขอบเขตและความแตกต่างระหว่างการกำหนดขอบเขตโกลคาลและการกำหนดขอบเขตท้องถิ่นด้วยคำหลักและคำหลักที่ไม่มี

เมื่อตัวแปรถูกกำหนดโดยไม่ต้องใช้คำหลัก var สิ่งที่ดูเหมือนว่าเป็นการดำเนินการ "การมอบหมาย" อย่างง่าย

เมื่อค่าถูกกำหนดให้กับตัวแปรใน javascript ล่ามจะพยายามค้นหา“ การประกาศตัวแปร” ในบริบท / ขอบเขตเดียวกันกับที่ได้รับมอบหมาย เมื่อล่ามดำเนินการdummyVariable = 20มันจะค้นหาการประกาศของ dummyVariable ที่จุดเริ่มต้นของฟังก์ชัน (เนื่องจากการประกาศตัวแปรทั้งหมดจะถูกย้ายไปที่จุดเริ่มต้นของบริบทโดยล่าม javascript และสิ่งนี้เรียกว่า hoisting)

คุณอาจต้องการดูhoisting ใน javascript