ȸ¿ø°¡ÀԡžÆÀ̵ð/ºñ¹øã±â
ȨÀ¸·Î

[¹ø¿ª] javascript ÀÇ this ¶õ ¹«¾ùÀΰ¡
9³â Àü
ÀÚ¹Ù½ºÅ©¸³Æ®¸¦ ¹è¿ì´Â ´ëºÎºÐÀÇ »ç¶÷µéÀº ´Ù¸¥ ¾ð¾î¸¦ ¹è¿öº» °æÇèÀÌ ÀÖ´Ù. ÀÚ¹Ù½ºÅ©¸³Æ®´Â ´Ù¸¥ ¾ð¾îµé°ú ´Ù¸¥ ¸éµéÀÌ Àִµ¥, À̸¦ Àß ÀÌÇØÇÏÁö ¸øÇϸé, ÀÚ¹Ù½ºÅ©¸³Æ®¸¦ Àß ÀÌ¿ëÇϱⰡ ¾î·Æ´Ù. ¿ì¸®µé¸¸ÀÇ À߸øÀº ¾Æ´Ï´Ù. ÀÚ¹Ù½ºÅ©¸³Æ®´Â scheme ó·³ µ¿ÀÛÇϵµ·Ï ¼³°èµÇ¾ú´Âµ¥, ¸¶Ä¡ c ó·³ »ý°å±â ¶§¹®ÀÌ´Ù. ÀÌ ¹®¼­´Â lexical scope °ú this º¯¼ö¿¡ ´ëÇؼ­ ¼³¸íÇÏ°í, À̵éÀ» ÀÚ¹Ù½ºÅ©¸³Æ®¿¡¼­ ¾î¶»°Ô »ç¿ëÇؾßÇÏ´ÂÁö¿¡ ´ëÇؼ­ ¾ê±âÇÒ °ÍÀÌ´Ù.

It's all about where you are.

¸ðµç ÇÁ·Î±×·¡¹Ö ¾ð¾î¿¡´Â, ÇöÀç scope ¿Í ÇöÀç context ¶ó´Â °³³äÀÌ ÀÖ´Ù. ÀÚ¹Ù½ºÅ©¸³Æ®¿¡´Â lexical scope °ú this ¶ó´Â context °¡ ÀÖ´Ù.

ÀÚ¹Ù½ºÅ©¸³Æ®¿¡¼­´Â ¸ðµç »õ·Î¿î scope µéÀº function ÀÇ Á¤ÀÇ·Î ÀÎÇØ »ý¼ºµÈ´Ù. ÇÏÁö¸¸ C °°Àº ¾ð¾î¿Í´Â ´Ù¸£°Ô, ÀÌ°ÍÀÌ scope ¸¦ ¸¸µå´Â À¯ÀÏÇÑ ¹æ¹ýÀÌ´Ù. ¹Ýº¹¹®µµ, if ¹®µµ, {} ºí¶ô µµ scope ¸¦ ¸¸µéÁö ¾Ê´Â´Ù. ÀÌ·± ´Ü¼øÇÔÀº ÃູÀÓ°ú µ¿½Ã¿¡ ÀúÁÖ´Ù. ¿¹¸¦µé¾î scope ¸¦ »ý¼ºÇÏ´Â °ÍÀ» ¼³¸íÇغ¸°Ú´Ù.

global scope ÀÇ ¿¹ÀÌ´Ù:
// global º¯¼ö¸¦ ¼±¾ðÇÑ´Ù.
var name = "Tim";
var age = 28;

// global scope ¿¡¼­ À̵éÀ» Á¢±ÙÇÑ´Ù.
name;

Output

=> 'Tim'

local scope ÀÇ ¿¹ÀÌ´Ù:
// ÇÔ¼ö¿¡¼­ local º¯¼öµéÀ» »ý¼ºÇÑ´Ù.
function newScope() {
      var name = "tim";
      var age = 28;
    }
// global scope ¿¡¼­ local º¯¼ö¸¦ Á¢±ÙÇÏ·Á Çϸé
// ¿¡·¯°¡ ¹ß»ýÇÑ´Ù.
name;

Error
ReferenceError: name is not defined

Lexical Scope

Lexical scope Àº closure ¸¦ °¡´ÉÇÏ°ÔÇÏ´Â ÇÙ½É ¿ä¼ÒÀÌ´Ù. wikipedia ÀÇ closure ¿Í lexical scope ¿¡ ´ëÇÑ ±ÛÀÌ´Ù:


ÄÄÇ»ÅÍ °øÇп¡¼­, closure ´Â, lexical ȯ°æ¿¡ bound µÈ free º¯¼ö¸¦ °®´Â first-class ÇÔ¼öÀÌ´Ù. ÀÌ·± ÇÔ¼ö´Â free º¯¼öµéÀ» "closed over" ÇÑ´Ù°í Ç¥ÇöÇÑ´Ù. Ŭ·ÎÀú´Â À̵é free º¯¼öµéÀÇ scope ³»¿¡ Á¤ÀǵȴÙ. ±×¸®°í ÀÌ º¯¼öµéÀº closure °¡ »ì¾ÆÀÖ´Â µ¿¾È »ì¾ÆÀÖ°Ô µÈ´Ù.

ÀÌ°Ô ¹«½¼ ¼Ò¸®Àΰ¡? ´ÙÀ½ ¿¹Á¦¸¦ º¸¶ó:
var name = "outer";
function one() {
    var name = "middle";
    var other = "findme";
    function two() {
        var name = "inner";
        // `name` Àº "inner" ÀÌ°í, `other` ´Â "findme" ÀÌ´Ù
        console.dir({name: name, other: other});
    }
    two();
    // `name` Àº "middle" ÀÌ°í `other` ´Â "findme" ÀÌ´Ù
    console.dir({name: name, other: other});
}
one();
// `name` Àº "outer" ÀÌ°í `other` ´Â undefined ÀÌ´Ù
console.dir({name: name});
console.dir({other: other});

Output
{ name: 'inner', other: 'findme' } { name: 'middle', other: 'findme' } { name: 'outer' }

Error
ReferenceError: other is not defined

¾ÈÂÊ scope ¿¡ ÀÖ´Â local º¯¼ö°¡ ¹Ù±ù scope ¿¡ ÀÖ´Â °°Àº À̸§ÀÇ º¯¼ö¸¦ °¡·Á¹ö¸°´Ù´Â °ÍÀ» ¾Ë ¼ö ÀÖ´Ù. ±×¸®°í ¹Ù±ùÂÊ¿¡¼­´Â ¾ÈÂÊÀÇ º¯¼ö¸¦ º¼ ¼ö°¡ ¾ø´Ù. lexical scope À̶õ º¯¼öÀÇ scope ÀÌ, Äڵ忡¼­ÀÇ º¯¼ö À§Ä¡¿¡(¾ó¸¶³ª ¾ÈÂÊÀ̳Ä) µû¶ó °áÁ¤µÇ´Â °ÍÀ» ¸»ÇÑ´Ù. ¾ÈÂÊ ÇÔ¼ö¿¡ Á¢±ÙÇϱâ À§ÇØ ¾î¶² °æ·Î¸¦ °ÅÄ¡´Â °Í°ú´Â ¾Æ¹« »ó°üÀÌ ¾ø´Ù.
// closure ÇÔ¼ö¸¦ ¸®ÅÏÇÏ´Â ÇÔ¼ö¸¦ ¸¸µç´Ù.
function myModule() {
    var name = "tim", age = 28;
    return function greet() {
        return "Hello " + name + ".  Wow, you are " + age + " years old.";
    }
}
// `myModule()` À» È£ÃâÇÏ¿© closure ¸¦ ¾ò´Â´Ù.
var greeter = myModule();
// closure ¸¦ È£ÃâÇÑ´Ù
greeter();

Output

=> 'Hello tim. Wow, you are 28 years old.'

name °ú age º¯¼ö´Â myModule ÇÔ¼öÀÇ ·ÎÄà º¯¼öÀÌ´Ù. ÇÏÁö¸¸ ±Û·Î¹ú scope ¿¡¼­ greeter() ¸¦ È£ÃâÇÒ ¶§ ¿¡·¯°¡ ¹ß»ýÇÏÁö ¾Ê´Â´Ù. ±× ÀÌÀ¯´Â greet ÇÔ¼ö°¡ name °ú age ¸¦ ÀÚ½ÅÀÇ lexical scope ¿¡ °¡Áö±â ¶§¹®ÀÌ´Ù. µû¶ó¼­ ¸¶Ä¡ ÀÌ º¯¼öµéÀÌ ÀÚ½ÅÀÇ local º¯¼öÀÎ¾ç »ç¿ëÇÒ ¼ö°¡ ÀÖ´Ù. ±âº»ÀûÀ¸·Î º¯¼ö¸¦ ãÀ» ¶§¿¡´Â, ÀÚ½ÅÀÇ scope ¿¡¼­ ¸ÕÀú ã°í ±× À§ÀÇ scope µé·Î Â÷·Ê Â÷·Ê ã´Â´Ù.

The context of "this"

ÀÚ¹Ù½ºÅ©¸³Æ®´Â this ¶ó´Â Ưº°ÇÑ Å°¿öµå¸¦ ÀÌ¿ëÇÑ´Ù. this ´Â ´Ù¸¥ ¿©Å¸ º¯¼öµé°ú µ¿ÀÏÇÏ°Ô µ¿ÀÛÇϳª, ¼öÁ¤ÀÌ ºÒ°¡´ÉÇÏ´Ù´Â Á¡ÀÌ ´Ù¸£´Ù. ÀÌ º¯¼ö´Â context (¿ªÁÖ: ȯ°æ) À» °¡¸®Å°´Â ÂüÁ¶ °´Ã¼·Î ¾²ÀδÙ. °´Ã¼À̱⠶§¹®¿¡, . À̳ª [] À» ÀÌ¿ëÇÏ¿© ¼Ó¼ºµéÀ» Á¢±ÙÇÒ ¼öµµ ÀÖ´Ù. ½Å±âÇÑ Á¡Àº ¿©·¯ºÐÀÌ ÇÔ¼ö¸¦ È£ÃâÇÏ´Â context ¿¡ µû¶ó this ÀÇ °ªÀÌ ´Þ¶óÁø´Ù´Â °ÍÀÌ´Ù. º¸ÅëÀÇ °æ¿ì¿¡´Â context ´Â message ¸¦ ¹Þ´Â (¿ªÁÖ: È£Ãâ¹Þ´Â) °´Ã¼ÀÌ´Ù. ¿¹¸¦µé¾î:
var Person = {
    name: "Tim",
    age: 28,
    greeting: function () {
        return "Hello " + this.name + ".  Wow, you are " + this.age + " years old.";
    }
};

Person.greeting();

Output

=> 'Hello Tim. Wow, you are 28 years old.'

Person.greeting ¿¡¼­ Person.name °ú Person.age ¸¦ Á¢±ÙÇÏ¿´´Ù.

"this" is where it bites

À§ ÄÚµå´Â ´Ù¸¥ ¾ð¾îÀÇ Å¬·¡½º °´Ã¼Ã³·³ º¸ÀδÙ. ÇÏÁö¸¸ °Å±â¿¡ ÇÔÁ¤ÀÌ ÀÖ´Ù. this °¡ ²À Person ÀÏ °ÍÀ̶ó´Â º¸ÀåÀÌ ¾ø´Ù. ¿¹¸¦µé¾î greeting ÇÔ¼ö¸¦ ´ÙÀ½Ã³·³ ÀúÀåÇÑ´Ù°í Çغ¸ÀÚ:
  var greeting = Person.greeting;
  greeting(); // `this.name` °ú `this.age` ´Â undefined °¡ µÈ´Ù

Output

=> 'Hello undefined. Wow, you are undefined years old.'

À§ greeting ÇÔ¼ö¿¡¼­ this ´Â global °´Ã¼ÀÌÁö Person °´Ã¼°¡ ¾Æ´Ï´Ù. ¶Ç ´Ù¸¥ ¿¹¸¦ º¸ÀÚ:
var Dog = {
    name: "Alfred",
    age: 110,
    greeting: Person.greeting
}

Dog.greeting(); // Á¤»óÀÛµ¿Çϸç, Dog ÀÇ µ¥ÀÌÅ͸¦ º¸¿©ÁØ´Ù.

Output

=> 'Hello Alfred. Wow, you are 110 years old.'

Dog °ú Person ÀÇ greeting ÇÔ¼ö´Â °°Àº ÇÔ¼öÀÌ´Ù. ÀÌ µÎ ÇÔ¼ö´Â ¸Þ¸ð¸®»óÀÇ °°Àº °´Ã¼¸¦ ÂüÁ¶ÇÑ´Ù. ÇÏÁö¸¸ ¾îµð¼­ ºÒ·È´ÂÁö¿¡ µû¶ó this ÀÇ °ªÀÌ º¯ÇÒ ¼ö ÀÖ´Ù. ±âº»ÀûÀ¸·Î ÇÔ¼öÈ£Ãâ½Ã . ¾Õ¿¡ ÀÖ´Â °´Ã¼°¡, ÇÔ¼ö¿¡¼­ this °¡ µÈ´Ù. Dog.greeting() ¿¡¼­´Â this °¡ Dog ÀÌ°í, Person.greeting() ¿¡¼­´Â Person ÀÌ´Ù. . ¾Õ¿¡ ¾Æ¹«°Íµµ ¾øÀ» ¶§¿¡´Â ±Û·Î¹ú °´Ã¼°¡ this °¡ µÈ´Ù.

Taming "this"

ÀÚ¹Ù½ºÅ©¸³Æ®´Â call °ú apply ¶ó´Â Function.prototype ÀÇ ÇÔ¼öµéÀ» Á¦°øÇÑ´Ù. °ÅÀÇ ±â´ÉÀÌ °°Àºµ¥ ÀÎÀÚ¸¦ ´Ù¸¥ ÇüÅ·Π¹Þ´Â´Ù. ÀÌÀü ¿¹Á¦¸¦ À̾, greeting ÀÌ ¾ø´Â »õ·Î¿î °´Ã¼¸¦ ¸¸µé¾î º¸ÀÚ. ÇÏÁö¸¸ ÀÌ °´Ã¼·Î greeting ÇÔ¼ö¸¦ È£ÃâÇÒ ¼ö ÀÖ´Ù.
var Alien = {
    name: "Zygoff",
    age: 5432
}

Person.greeting.call(Alien);

Output

=> 'Hello Zygoff. Wow, you are 5432 years old.'

¿©±â¼­ ¿ì¸®´Â Person.greeting ÇÔ¼ö¸¦ ºÎ¸£¸é¼­ this ·Î Alien À» ¾²µµ·Ï ÇÏ´Â °ÍÀÌ´Ù. call ´ë½Å apply ¸¦ ½áµµ ¹«¹æÇÏ´Ù. Àü´ÞÇÏ´Â ÀÎÀÚ°¡ ¾ø±â ¶§¹®ÀÌ´Ù.

age ¿Í name ¼Ó¼ºÀ» °®´Â ¾Æ¹« °´Ã¼³ª »ç¿ëÇÒ ¼ö ÀÖ´Â ÇÔ¼ö¸¦ ¸¸µé¾îº¸ÀÚ:
function makeOlder(years, newname) {
    this.age += years;
    if (newname) {
        this.name = newname;
    }
}

ÀÌ ÇÔ¼ö´Â this °´Ã¼¿¡ years ¸¦ ´õÇÏ°í, ¼±ÅÃÀûÀ¸·Î À̸§µµ º¯°æÇÑ´Ù. ÀÌ ÇÔ¼ö´Â ¾î¶² ƯÁ¤ °´Ã¼¿Í ¿¬°áµÇ¾î ÀÖÁö ¾Ê´Ù. (¹Ù±ù scope ÀÇ º¯¼ö¸¦ »ç¿ëÇÏÁö ¾Ê´Â ÇÔ¼ö´Â µ¶¸³ÀûÀÎ ÇÔ¼öÀÌ´Ù). call À̳ª apply ¸¦ ÀÌ¿ëÇÏ¿© À§ ÇÔ¼ö¸¦ ´ÙÀ½°ú °°ÀÌ ÀÌ¿ëÇÑ´Ù:
makeOlder.call(Person, 2, "Old Tim");
makeOlder.apply(Dog, [1, "Shaggy"]);
console.dir({Person: Person, Dog: Dog});

Output
{ Person: { name: 'Old Tim', age: 30, greeting: [Function] }, Dog: { name: 'Shaggy', age: 111, greeting: [Function] } }

call Àº Àü´Þ¹ÞÀº ÀÎÀÚµéÀ» Çϳª¾¿ ÇÔ¼ö·Î Àü´ÞµÈ´Ù. apply ´Â ¹è¿­ ÀÎÀÚ¸¦ Àü´Þ¹Þ¾Æ ÇÔ¼ö·Î Àü´ÞÇÑ´Ù.

Binding "this"

¶§¶§·Î, ¿ì¸®´Â OOP (°´Ã¼ÁöÇâÇÁ·Î±×·¡¹Ö) ½ºÅ¸ÀÏÀ» ³Ê¹« ÁÁ¾ÆÇÑ ³ª¸ÓÁö, ÀÚ¹Ù½ºÅ©¸³Æ®µµ OOP ó·³ µ¿ÀÛÇÏ°Ô ¸¸µé·Á ÇÑ´Ù. ¾î¶»°Ô ÇÔ¼ö¸¦ È£ÃâÇÏ´À³Ä¿¡ µû¶ó this °¡ º¯ÇÑ´Â °ÍÀÌ ½È´Ù. Äݹé ÇÔ¼ö¸¦ ÀÎÀÚ·Î ¹Þ´Â À̺¥Æ®¸¦ ¼³Á¤ÇÒ ¶§ ÀÌ¿Í °°Àº ÀÏÀÌ ¸¹ÀÌ ¹ß»ýÇÑ´Ù.
Cart = {
    items: [1,4,2],
    onClick: function () {
        // this.items ·Î ¹«¾ùÀΰ¡¸¦ ÇÑ´Ù.
    }
}
$("#mybutton").click(Cart.onClick);

¹®Á¦ ¾ø¾î º¸ÀÌÁö¸¸, Àç¾ÓÀÌ µÉ ¼ö ÀÖ´Â ÄÚµå´Ù. onClick ÀÌ ¾Æ´Ñ Cart.onClick ¸¦ »ç¿ëÇÏ´õ¶óµµ ¸»ÀÌ´Ù. jQuery click ÇÔ¼ö´Â Cart.onClick ÇÔ¼ö¸¦ ¹ÞÁö¸¸, ÀÌ ÇÔ¼ö¸¦ È£ÃâÇÒ ¶§¿¡´Â, ÀÌ ÇÔ¼ö°¡ Cart ·ÎºÎÅÍ ¿Ô´Ù´Â °ÍÀ» ¸ð¸¦ °ÍÀÌ´Ù. (¿ªÁÖ: Cart.onClick() ÀÌ ¾Æ´Ñ var eventFunc = Cart.onClick; eventFunc() ÀÎ ¼ÀÀ̱⠶§¹®ÀÌ´Ù)

closure ¿Í lexical scope Áö½ÄÀ» ÀÌ¿ëÇÏ¿©, this °¡ ´Ù¸¥ OOP ¾ð¾î¿¡¼­Ã³·³ µ¿ÀÛÇÏ°Ô Çغ¸ÀÚ.
  $("#mybutton").click(function () { Cart.onClick() });

closure ¸¦ ¸¸µé°í Cart.onClick() À» È£ÃâÇÑ´Ù. ¹®Á¦´Â (Àб⠾î·Æ´Ù´Â °Í¿Ü¿¡µµ) ÇÔ¼ö°¡ ÀÎÀÚ¸¦ ¹ÞÁöµµ °ªÀ» ¸®ÅÏÇÏÁöµµ ¾Ê´Â´Ù´Â °ÍÀÌ´Ù.
  $("#mybutton").click(function () { return Cart.onClick.apply(Cart, arguments) });

ÀÌ·¸°Ô ÇÏ¸é µÇÁö¸¸, ´õ Àб⠾î·Á¿î Äڵ尡 µÇ¾ú´Ù. arguments ´Â ÇöÀç °¡Àå ¾ÈÂÊÀÇ ÇÔ¼ö¿¡°Ô Àü´ÞµÈ ÀÎÀÚµéÀ» °¡Áö°í ÀÖ´Â ¹è¿­ÀÌ´Ù.

Cart °¡ Àü¿ªÀûÀ¸·Î Á¢±Ù °¡´ÉÇÑ singleton °´Ã¼¶ó¸é, this ´ë½Å¿¡ Cart ¸¦ »ç¿ëÇÒ ¼ö ÀÖÀ» °ÍÀÌ´Ù. ÇÏÁö¸¸ ±×·¸Áö ¾ÊÀº °æ¿ì°¡ ´õ ¸¹´Ù.

Cart.onClick ÀÇ this °¡ Ç×»ó Cart ¸¦ °¡¸®Å°°Ô ÇÒ ¼ö´Â ¾øÀ»±î?
function bind(fn, scope) {
    return function () {
        return fn.apply(scope, arguments);
    }
}
Cart.onClick = bind(Cart.onClick, Cart);
$("#mybutton").click(Cart.onClick);

ÀÌ ¹æ¹ý¸»°íµµ ´Ù¸¥ ¹æ¹ýµéÀÌ ÀÖÁö¸¸, º¸Åë ¿Ã¹Ù¸¥ ÇØ°áÃ¥Àº ¾Æ´Ï´Ù. javascript ¸¦ ´Ù¸¥ ¾ð¾îó·³ ¸¸µé°í ½Í´Ù¸é, ÁÁÀº ¹æ¹ýÀÌÁö¸¸, javascript ÀÇ ¹æ¹ýÀ» ¹è¿ì´Â °ÍÀÌ ´õ ÁÁ´Ù.

À§¿¡¼­ ¿ì¸®´Â scope À» Æ÷ÇÔÇÏ´Â closure ¸¦ ¸¸µé¾ú´Ù. (¿ªÁÖ: scope º¸´Ù´Â context °¡ ÀÌ ±Û¿¡¼­ÀÇ ¾²ÀÓ»õ¿¡ ´õ ¸Â´Â°ÍÀÌ ¾Æ´Ñ°¡ ½Í´Ù) ±×¸®°í Cart.onClick À» ÀÌ closure ·Î º¯°æ ÇÏ¿´´Ù. ±×¸®°í apply ¸¦ ÀÌ¿ëÇÏ¿© ÀÎÀÚ¸¦ Àü´ÞÇÏ°í °ªÀ» ¸®ÅÏÇÏ¿´´Ù.

Var statements

var ¹®ÀåÀº ´Ü¼øÈ÷ ¾î¶² º¯¼ö°¡ ¾î¶² scope ¿¡ ¼ÓÇÏ´ÂÁö¸¦ ³ªÅ¸³»´Â Å°¿öµåÀÌ´Ù. var ¸¦ »ç¿ëÇÏÁö ¾Ê´Â´Ù¸é, ¸ðµç º¯¼ö´Â ±Û·Î¹ú º¯¼ö°¡ µÉ °ÍÀÌ´Ù.
global_var = true;
function someFunc() {
    another_global = 42;
    var local_var = 5;
}

´ÙÀ½ °°Àº ¹Ýº¹¹®¿¡¼­ ¸Å¿ì À§ÇèÇÏ´Ù:
function sum(start, end) {
    var n = 0;
    for (i = start; i <= end; i++) {
        n += i;
    }
    return n;
}

function nested_sum(num) {
    var n = 0;
    for (i = 1; i <= num; i++) {
        n += sum(1, i);
    }
    return n;
}

nested_sum(3); // 10 À» ¿øÇÏÁö¸¸, i °ªÀÌ ²¿ÀδÙ.

Output

=> 7

µÎ°³ÀÇ ·ì¿¡¼­ i º¯¼ö´Â °°Àº º¯¼ö·Î, ¾ÈÂÊ¿¡¼­ i °¡ Áõ°¡ÇÏ¿© ¹Ù±ùÀÇ ·ì¿¡ ¿µÇâÀ» ¹ÌÄ¡°Ô µÈ´Ù. (¿ªÁÖ: (1) + (1+2+3) = 7) ¶Ç n ¾Õ¿¡ var ¸¦ ºÙÀÌÁö ¾Ê¾Æµµ, ¼­·Î °£¼·ÇÏ¿© À߸øµÈ °ªÀ» ¸®ÅÏÇÒ °ÍÀÌ´Ù.

var ¸¦ »ç¿ëÇÒ ¶§ ÁÖÀÇÁ¡ÀÌ ÀÖ´Ù. ÇÔ¼ö ¾îµð¿¡ var ¸¦ ³õ¾Æµµ »ó°ü¾ø´Ù. ¾î¶² ÇÔ¼ö¿¡ var ¸¦ ³õ´À³Ä¸¸ Áß¿äÇÏ´Ù. ±×¸®°í ÀÌ·¸°Ô ¼±¾ðÇÑ º¯¼öÀÇ scope Àº ÇÔ¼öÀÇ ÀÎÀÚµé º¸´Ù ¾ÈÂÊÀÌ´Ù (¿ªÁÖ: ÀÀ?)
name = "Tim";
function greet() {
    console.dir(name);
    // name Àº undefined ÀÌ´Ù.
    // ÄÚµå ¾Æ·¡ ÂÊ¿¡ var ·Î º¯¼ö¸¦ ¼±¾ðÇÏ¿´±â ¶§¹®ÀÌ´Ù
    var name;
}
greet();

function greet2(name) {
    console.dir(name);
    // name Àº "Tim" ÀÌ´Ù. ¿Ö³ÄÇϸé ÇÔ¼öÀÇ ÀÎÀÚµéÀº Ưº°Çϱ⠶§¹®ÀÌ´Ù.
    // ÇÑÂü ÈÄ¿¡, var name ÀÌ ÀÖ´õ¶óµµ ¸»ÀÌ´Ù
    var name;
}
greet2("Tim");

Output
undefined 'Tim'

ÀÌ°ÍÀÌ jslint ÀÌ ¸ðµç var ¼±¾ðÀ» ÇÔ¼öÀÇ Á© À§¿¡ ³õÀ¸¶ó´Â ÀÌÀ¯ÀÌ´Ù. ³ª´Â ÇѶ§ À̹®Á¦·Î °ñ¸Ó¸®¸¦ ½âÀÎÀûÀÌ ÀÖ´Ù.

--------------------------------------------------------------------------------

Conclusion

ÀÚ¹Ù½ºÅ©¸³Æ®¿¡¼­ scope À» ÀÌÇØÇÏ·Á¸é ´ÙÀ½À» ÀÌÇØÇØ¾ß ÇÑ´Ù:
•»õ·Î¿î scope Àº function À» ÅëÇؼ­¸¸ ¸¸µé ¼ö ÀÖ´Ù. for ... in µî ´Ù¸¥ ¾î¶² °Íµµ scope À» ¸¸µéÁö ¾Ê´Â´Ù.
•var ¹®ÀåÀº º¯¼ö¸¦ ÇöÀçÀÇ scope ¿¡ ·ÎÄà º¯¼ö·Î ¼±¾ðÇÑ´Ù. var ¹®ÀåÀ» »ç¿ëÇÑ ÀÌÈÄ°¡ ¾Æ´Ñ, var ¹®ÀåÀ» Æ÷ÇÔÇÏ´Â scope ¿¡ ¼±¾ðÇÏ´Â °ÍÀÌ´Ù. ÀÌ ·ÎÄà º¯¼ö´Â ¹Ù±ù scope ÀÇ °°ÀºÀ̸§ º¯¼ö¸¦ °¡¸°´Ù.
•this ¿Í arguments ¸¦ Á¦¿ÜÇÑ ¸ðµç º¯¼ö´Â lexical scope À» µû¸¥´Ù. Áï ÀÌµé º¯¼öÀÇ Àǹ̴ ÄÚµå»óÀÇ À§Ä¡ ¿¡ µû¶ó Á¤ÇØÁø´Ù.
•this ¿Í arguments º¯¼ö´Â ¸ðµç Áßø ¸¶´Ù º¯È­ÇÑ´Ù. ÀÌ º¯¼öµéÀ» closure ¿¡ º¸°üÇÏ·Á¸é, lexical scope À» µû¸£´Â ´Ù¸¥ º¯¼ö¸¦ ÀÌ¿ëÇÏ¿© this ³ª arguments µéÀ» ÂüÁ¶ÇÏ¿©¾ß ÇÑ´Ù.
•this ÀÇ °ªÀº ÇÔ¼ö°¡ È£ÃâµÈ ¹æ¹ý ¿¡ ÀÇÇØ Á¤ÇØÁø´Ù. apply ¿Í call À» ÀÌ¿ëÇÏ¿© À̸¦ Á¶ÀýÇÒ ¼ö ÀÖ´Ù.

À§ ·ê¿¡ ¿¹¿Ü°¡ ÀÖ´Ù. function decomposition, eval, with Å°¿öµå¸¦ ÀÌ¿ëÇÒ ¶§ÀÌ´Ù. (¿ªÁÖ: ¿ò ¹ºÁö ¸ð¸£´Â °ÍµéÀÌ´Ù) ÀÌ ¶§¿¡µµ, À§ ·êµéÀº µû¸£Áö¸¸, ¿¹»ó°ú´Â ´Ù¸¥ ¹æ¹ýÀÏ °ÍÀÌ´Ù. function decompilation + eval Àº ÇÔ¼ö¸¦ »õ·Î¿î lexical scope À¸·Î À̵¿½ÃŲ´Ù. ±×¸®°í with ¸¦ ÀÌ¿ëÇÏ¿© this.name ÀÌ local lexical º¯¼öÀÎ °Íó·³ ¸¸µé ¼öµµ ÀÖ´Ù.
ÃßõÃßõ : 423 Ãßõ ¸ñ·Ï
¹øÈ£ Á¦¸ñ
2,645
php set time limit ÇÔ¼ö - ŸÀӾƿô ¼³Á¤
2,644
Setting .htaccess to allow PHP to be accessed with .xml extension
2,643
jQuery API: Manipulation, Events, Effects, Internals, Utilities
2,642
´Ù¿î·Îµå Ƚ¼ö Á¦ÇÑ ½ºÅ©¸³Æ®
2,641
ÀÚ¹Ù½ºÅ©¸³Æ® ŸÀÌ¸Ó - setTimeout, setInterval, clearInterval ÇÔ¼ö
2,640
jQuery AJAX ·Î±×ÀÎ ±¸Çö
2,639
PHP ¼¼¼Ç ·Î±×ÀÎ ±¸Çö
2,638
PHP ÄíÅ° ·Î±×ÀÎ ±¸Çö
2,637
jQuery¿¡¼­ json º¯¼ö »ç¿ë(È°¿ë)¹ý
2,636
AJAX ¹Ýº¹Ã³¸® ¹× ¼³¸í ¿¹Á¦
2,635
[Android] Intent È°¿ë ¿¹½Ã
2,634
[php] ¹è¿­À» ÀÓÀÇÀÇ ¼ø¼­·Î ¼¯´Â shuffle ÇÔ¼ö
2,633
jQuery API - ¼Ó¼º(CSS), ÃßÃâ
2,632
DIV ¿µ¿ªÀÇ À§Ä¡ ÁöÁ¤ÇÏ´Â ¹æ¹ý°ú ½ºÅ©·Ñ - Àý´ëÀ§Ä¡(absolute), »ó´ëÀ§Ä¡(relative), °íÁ¤À§Ä¡(fixed)
2,631
urlencode(), base64 encode() ÇÔ¼ö
2,630
PHP·Î IE¹öÀü üũÇÏ´Â ¹æ¹ý(Trident°ª»ç¿ë)
2,629
HTML5 °ü·Ã À¯¿ëÇÑ ·¹ÆÛ(ÂüÁ¶) »çÀÌÆ®
2,628
[HTML5] Video & Audio
2,627
HTML5 ¿Àµð¿À °î ¸ñ·Ï Àç»ý
2,626
HTML5 ¿Àµð¿À 404 ¿À·ù½Ã ´Ù¸¥ ÆÄÀÏ Àç»ý
2,625
HTML5 ¿Àµð¿À À̺¥Æ®¸®½º³Ê onerror
2,624
JavaScript Audio °´Ã¼
2,623
HTML5 Audio 2ä³Î Àç»ý
2,622
HTML5 Audio 2ä³Î Àç»ý + Àç»ý¿Ï·á ¸®½º³Ê
2,621
HTML5 À½¾Ç º¼·ý Á¶Àý
2,620
HTML5 À½¾Ç º¼·ý Á¶Àý
2,619
HTML5 ¿Àµð¿À ÀÚµ¿Àç»ý
2,618
HTML5 ¿Àµð¿À ¹Ýº¹ Àç»ý
2,617
HTML5 ¿Àµð¿À À̺¥Æ®¸®½º³Ê
2,616
Ŭ¸¯ ÇѹøÀ¸·Î °íÀ¯ÁÖ¼Ò(URL) º¹»çµÇ°Ô ÇÏ´Â ¹æ¹ý
¸ñ·Ï
¹ÂÁ÷Æ®·ÎÆ® ºÎ»ê±¤¿ª½Ã ºÎ»êÁø±¸ °¡¾ßµ¿ ¤Ó °³ÀÎÁ¤º¸Ãë±Þ¹æħ
Copyright ¨Ï musictrot All rights reserved.