This 에 대한 배경지식 , binding , 전역 객체

JavaScript 의 This 에 대한 개인적 상상들은.

 

어디선가 JavaScript 의 this 는 굉장히 오묘하다고 들었다. 그래서인지 내장함수에 bind() 가 있었던 걸 기억하는데, 이를 보면 this를 binding 해줘야할 만큼 다양한 의미로 쓰이지 않을까..하는 생각을 해보았더랬다.

 

 

JavaScript의 this 는 실무자 분은 당연시 사용하는 기능이며 자바스크립트의 결함또한 포함하는 폭 넒은 기능이라고 한다.

---

binding?

 

이를 이해하기 위해서는 binding의 개념을 알아야한다. 

• 함수, 메서드를 호출한 대상에게 실제 함수를 연결해주는 것을 binding 이라고 한다.
• 함수를 호출한 대상에게 실제 함수가 존재하는 memory 주소를 연결해 주는 것이다.

코드, 코드로 이해하라고 하신다. 코드로 이해하자.

---

기억하자, 자바스크립트의 함수는 = 객체다.

 

즉 myObject 와 otherObject 에 Function 객체가 binding 되어 있다.

var myObject = {
    name: 'soomin',
    sayName: function () {
        console.log(this.name);
    }
}

var otherObject = {
    name : 'soosoo',
}

otherObject.sayName = myObject.sayName;

// 자바스크립트의 함수는 객체이므로 넘겨 받을 수 있다.

ƒ () {
        console.log(this.name);
    }
    
    
    myObject.sayName();
    otherObject.sayName();
    
    VM531:4 soomin
    VM531:4 soosoo

---

binding : 올바른 객체에 올바른 메서드를 엮는다. 

 

함수 객체에게 누가 호출 했는지를 정의한다.

---

전역 객체

 

코드 전체를 아우르는 객체 , 자바의 Obejct 클래스와 비슷한 개념일까...싶다.

 

내장함수 , 전역 변수 모두 전역객체의 속성이자 메서드다.

 

• Browser : window 객체가 전역객체
• Server Side(Node.js) : global 객체가 전역객체

 

---

• 일반함수 호출시의 this의 바인딩
• 객체 호출시의 this 바인딩
• 생성자 함수 호출시 this의 바인딩

일반 함수 호출시의 this : 전역 객체 window

function myFunc() {
console.log(`this 값 : ${this}`);
}

myFunc()
VM828:2 this 값 : [object Window]

window.myFunc()
VM828:2 this 값 : [object Window]

var name = 'soomin';

console.log(`전역변수 이름 ${name}`);
console.log(`전역객체의 속성 : ${name}`);

VM1223:3 전역변수 이름 soomin
VM1223:4 전역객체의 속성 : soomin

var name = 'soomin';
console.log(window.name);

var sayHello = function() {
    var name = 'soso';
    console.log(this.name);
}

VM1593:2 soomin

sayHello()
VM1593:6 soomin

// this 키워드는 전역객체를 부르는 것을 알 수 있다. window 객체에 선언된 프로퍼티 soomin이 찍힌다.

---

객체의 메서드에 사용된 this : 메서드를 호출한 객체

var myObj = {
    name :'soomin',
    sayName : function() {
        console.log(this.name);
    }
}

var otherObj = {
    name : 'jungjin'
}

otherObj.sayName = myObj.sayName; // 함수는 객채다.

otherObj.sayName()
VM1797:4 jungjin

myObj.sayName()
VM1797:4 soomin

---

생정자 함수에서의 this : 생성자 함수를 통하여 반환된 객체

var Person = function(name) {
    this.name = name;
}

var body = new Person('soomin');

var other = new Person('soosoo');

body
Person {name: "soomin"}
other
Person {name: "soosoo"}

---

생성자 함수와 일반 함수의 this 

 

• new 연산자로 새로운 객체를 만들때는 생성자함수
• 그대로 호출되면 일반 함수이다.

---

함수안에 내재된 함수는 무조건 전역객체에 바인딩 된다.

var value = 1;

var obj = {
    value: 100,
objMethod : function () {
        console.log(`objMethod's this: ${this}`);
        console.log(`objMethod's this.value : ${this.value}`);
        function innerMethod(){
            console.log(`innerMethod's this ${this}`);
            console.log(`innerMethod's this.value ${this.value}`);
        }
        innerMethod();
    }
};

obj.objMethod()
VM2970:6 objMethod's this: [object Object]
VM2970:7 objMethod's this.value : 100
VM2970:9 innerMethod's this [object Window]
VM2970:10 innerMethod's this.value 1

// 이너 메서드 의 This 는 무조건 전역객체이다.

---