자바스크립트에서 설명없이 코드만으로 이해해 보는 this에 대한 이해

브라우저의 콘솔탭을 켜고, 아래 나오는 코드들을 실행해보며 확인해보세요

Ly8gdGhpc+uKlCBXaW5kb3fqsIAg65Cp64uI64ukIC0tLS0tLS0tLS0tLS0tLS0tLS0tLS0KY29uc29sZS5sb2codGhpcyk7CgovLyB0aGlz64qUIFdpbmRvd+qwgCDrkKnri4jri6QgLS0tLS0tLS0tLS0tLS0tLS0tLS0tLQpsZXQgZmYgPSBmdW5jdGlvbiAoKSB7CiAgICBjb25zb2xlLmxvZyh0aGlzKTsKfQpmZigpOwoKLy8gdGhpc+uKlCBXaW5kb3fqsIAg65Cp64uI64ukIC0tLS0tLS0tLS0tLS0tLS0tLS0tLS0KbGV0IGZmID0gZnVuY3Rpb24gKCkgewogICAgbGV0IGZmMiA9IGZ1bmN0aW9uICgpIHsKICAgICAgICBjb25zb2xlLmxvZyh0aGlzKTsKICAgIH0KICAgIGZmMigpOwp9CmZmKCk7CgovLyB0aGlz64qUIG9iauqwgCDrkKDqsbDsmIjsmpQgLS0tLS0tLS0tLS0tLS0tLS0tLS0tLQpsZXQgb2JqID0gewogICAgbmFtZTogJ3BhcmsnLAogICAgZmY6IGZ1bmN0aW9uICgpIHsKICAgICAgICBjb25zb2xlLmxvZyh0aGlzKTsKICAgIH0KfTsKb2JqLmZmKCk7CgovLyB0aGlz64qUIFdpbmRvd+qwgCDrkKnri4jri6QgLS0tLS0tLS0tLS0tLS0tLS0tLS0tLQpsZXQgb2JqID0gewogICAgbmFtZTogJ3BhcmsnLAogICAgZmY6ICgpID0+IHsKICAgICAgICBjb25zb2xlLmxvZyh0aGlzKTsKICAgIH0KfTsKb2JqLmZmKCk7CgovLyB0aGlz64qUIFdpbmRvd+qwgCDrkKnri4jri6QgLS0tLS0tLS0tLS0tLS0tLS0tLS0tLQpsZXQgb2JqID0gewogICAgbmFtZTogJ3BhcmsnLAogICAgZmY6IGZ1bmN0aW9uICgpIHsKICAgICAgICBsZXQgZjIgPSBmdW5jdGlvbiAoKSB7CiAgICAgICAgICAgIGNvbnNvbGUubG9nKHRoaXMpOwogICAgICAgIH07CiAgICAgICAgZjIoKTsKICAgIH0KfTsKb2JqLmZmKCk7CgovLyB0aGlz64qUIG9iauqwgCDrkKDqsbDsmIjsmpQgLS0tLS0tLS0tLS0tLS0tLS0tLS0tLQpsZXQgb2JqID0gewogICAgbmFtZTogJ3BhcmsnLAogICAgZmY6IGZ1bmN0aW9uICgpIHsKICAgICAgICBsZXQgZjIgPSAoKSA9PiB7CiAgICAgICAgICAgIGNvbnNvbGUubG9nKHRoaXMpOwogICAgICAgIH07CiAgICAgICAgZjIoKTsKICAgIH0KfTsKb2JqLmZmKCk7CgovLyAjMeyXkOyEnOuKlCB0aGlz64qUIFdpbmRvdywgIzLsl5DshJzripQgdGhpc+uKlCBvYmouYS5hLmEuYSDqsIAg65Cp64uI64ukIC0tLS0tLS0tLS0tLS0tLS0tLS0tLS0KbGV0IGZmID0gZnVuY3Rpb24gKCkgewogICAgY29uc29sZS5sb2codGhpcyk7Cn07CmxldCBvYmogPSB7IGE6IHsgYTogeyBhOiB7IGE6IHsgZnY6IGZmIH0gfSB9IH0gfTsKZmYoKTsgLy8gIzEKb2JqLmEuYS5hLmEuZnYoKTsgLy8gIzIKCi8vICMx7JeQ7ISc64qUIHRoaXPripQgV2luZG93LCAjMuyXkOyEnOuKlCB0aGlz64qUIFdpbmRvdyDqsIAg65Cp64uI64ukIC0tLS0tLS0tLS0tLS0tLS0tLS0tLS0KbGV0IGZmID0gKCkgPT4gewogICAgY29uc29sZS5sb2codGhpcyk7Cn07CmxldCBvYmogPSB7IGE6IHsgYTogeyBhOiB7IGE6IHsgZnY6IGZmIH0gfSB9IH0gfTsKZmYoKTsgLy8gIzEKb2JqLmEuYS5hLmEuZnYoKTsgLy8gIzIKCi8vICMx7JeQ7ISc64qUIHRoaXPripQgV2luZG93LCAjMuyXkOyEnOuKlCB0aGlz64qUIG9iai5hLmEuYS5hIOqwgCDrkKnri4jri6QgLS0tLS0tLS0tLS0tLS0tLS0tLS0tLQpsZXQgb2JqID0gewogICAgZjogZnVuY3Rpb24gKCkgewogICAgICAgIGxldCBmZiA9IGZ1bmN0aW9uICgpIHsKICAgICAgICAgICAgY29uc29sZS5sb2codGhpcyk7CiAgICAgICAgfTsKICAgICAgICBsZXQgb2JqID0geyBhOiB7IGE6IHsgYTogeyBhOiB7IGZ2OiBmZiB9IH0gfSB9IH07CiAgICAgICAgZmYoKTsgLy8gIzEKICAgICAgICBvYmouYS5hLmEuYS5mdigpOyAvLyAjMgogICAgfQp9OwpvYmouZigpOwoKLy8gIzHsl5DshJzripQgdGhpc+uKlCBvYmosICMy7JeQ7ISc64qUIHRoaXPripQgb2JqIOqwgCDrkKnri4jri6QgLS0tLS0tLS0tLS0tLS0tLS0tLS0tLQpsZXQgb2JqID0gewogICAgZjogZnVuY3Rpb24gKCkgewogICAgICAgIGxldCBmZiA9ICgpID0+IHsKICAgICAgICAgICAgY29uc29sZS5sb2codGhpcyk7CiAgICAgICAgfTsKICAgICAgICBsZXQgb2JqID0geyBhOiB7IGE6IHsgYTogeyBhOiB7IGZ2OiBmZiB9IH0gfSB9IH07CiAgICAgICAgZmYoKTsgLy8gIzEKICAgICAgICBvYmouYS5hLmEuYS5mdigpOyAvLyAjMgogICAgfQp9OwpvYmouZigpOwoKLy8gdGhpc+uKlCDqsIHqsIEg64uk7J2M6rO8IOqwmeuLpCAtLS0tLS0tLS0tLS0tLS0tLS0tLS0tCi8vICMxOiBXaW5kb3cKLy8gIzI6IG9iagovLyAjMzogb2JqMS5hLmEuYS5hCi8vICM0OiBvYmoKbGV0IG9iaiA9IHsKICAgIGY6IGZ1bmN0aW9uICgpIHsKICAgICAgICBsZXQgZmYxID0gZnVuY3Rpb24gKCkgewogICAgICAgICAgICBjb25zb2xlLmxvZyh0aGlzKTsKICAgICAgICB9OwogICAgICAgIGxldCBmZjIgPSAoKSA9PiB7CiAgICAgICAgICAgIGNvbnNvbGUubG9nKHRoaXMpOwogICAgICAgIH07CiAgICAgICAgbGV0IG9iajEgPSB7IGE6IHsgYTogeyBhOiB7IGE6IHsgZnYxOiBmZjEgfSB9IH0gfSB9OwogICAgICAgIGxldCBvYmoyID0geyBhOiB7IGE6IHsgYTogeyBhOiB7IGZ2MjogZmYyIH0gfSB9IH0gfTsKICAgICAgICBmZjEoKTsgLy8gIzEKICAgICAgICBmZjIoKTsgLy8gIzIKICAgICAgICBvYmoxLmEuYS5hLmEuZnYxKCk7IC8vICMzCiAgICAgICAgb2JqMi5hLmEuYS5hLmZ2MigpOyAvLyAjNAogICAgfQp9OwpvYmouZigpOwo=


     // this는 Window가 됩니다 ----------------------
     console.log(this);

     // this는 Window가 됩니다 ----------------------
     let ff = function () {
     console.log(this);
     }
     ff();

     // this는 Window가 됩니다 ----------------------
     let ff = function () {
     let ff2 = function () {
     console.log(this);
     }
     ff2();
     }
     ff();

     // this는 obj가 될거예요 ----------------------
     let obj = {
     name: 'park',
     ff: function () {
     console.log(this);
     }
     };
     obj.ff();

     // this는 Window가 됩니다 ----------------------
     let obj = {
     name: 'park',
     ff: () => {
     console.log(this);
     }
     };
     obj.ff();

     // this는 Window가 됩니다 ----------------------
     let obj = {
     name: 'park',
     ff: function () {
     let f2 = function () {
     console.log(this);
     };
     f2();
     }
     };
     obj.ff();

     // this는 obj가 될거예요 ----------------------
     let obj = {
     name: 'park',
     ff: function () {
     let f2 = () => {
     console.log(this);
     };
     f2();
     }
     };
     obj.ff();

     // #1에서는 this는 Window, #2에서는 this는 obj.a.a.a.a 가 됩니다 ----------------------
     let ff = function () {
     console.log(this);
     };
     let obj = { a: { a: { a: { a: { fv: ff } } } } };
     ff(); // #1
     obj.a.a.a.a.fv(); // #2

     // #1에서는 this는 Window, #2에서는 this는 Window 가 됩니다 ----------------------
     let ff = () => {
     console.log(this);
     };
     let obj = { a: { a: { a: { a: { fv: ff } } } } };
     ff(); // #1
     obj.a.a.a.a.fv(); // #2

     // #1에서는 this는 Window, #2에서는 this는 obj.a.a.a.a 가 됩니다 ----------------------
     let obj = {
     f: function () {
     let ff = function () {
     console.log(this);
     };
     let obj = { a: { a: { a: { a: { fv: ff } } } } };
     ff(); // #1
     obj.a.a.a.a.fv(); // #2
     }
     };
     obj.f();

     // #1에서는 this는 obj, #2에서는 this는 obj 가 됩니다 ----------------------
     let obj = {
     f: function () {
     let ff = () => {
     console.log(this);
     };
     let obj = { a: { a: { a: { a: { fv: ff } } } } };
     ff(); // #1
     obj.a.a.a.a.fv(); // #2
     }
     };
     obj.f();

     // this는 각각 다음과 같다 ----------------------
     // #1: Window
     // #2: obj
     // #3: obj1.a.a.a.a
     // #4: obj
     let obj = {
     f: function () {
     let ff1 = function () {
     console.log(this);
     };
     let ff2 = () => {
     console.log(this);
     };
     let obj1 = { a: { a: { a: { a: { fv1: ff1 } } } } };
     let obj2 = { a: { a: { a: { a: { fv2: ff2 } } } } };
     ff1(); // #1
     ff2(); // #2
     obj1.a.a.a.a.fv1(); // #3
     obj2.a.a.a.a.fv2(); // #4
     }
     };
     obj.f();