JavaScript 기능 바인딩(thisExplained)

객체와 함께 .call()을 사용하여 바인딩의 예 1:

// hereby var deliberately emphasizes Global scope which we are currently in :
// type window.dog.type yourself to see what's being logged
var dog = {
    type: "dog"
};

var cat = {
    type: "cat",
    explains: function () {
        /* hereby this.type thinks as if "window.type", where as... 
            ...window has no of such method . Well it thinks wrong way */
        return "I am not a" + this.type; 
    }
}
cat.explains.call(dog); // "cat explains to the dog" returns "I am not a dog"

클래스와 함께 .call()을 사용하여 바인딩의 예 2:
ES5 클래스를 사용하는 경우 확장성 동작으로 .call() 메서드가 사용됩니다.

// This is powered by MDN (2 ed.)

// Parent class blueprint
function Product(name, price) {
  this.name = name;
  this.price = price;
}

// Child class blueprint that extends Parent through keyword "this" :
function Food(name, price) {
Product.call(this, name, price); // hereby keyword "this" states : Food extends Product
this.category = 'food'; // a class of Food self property
}

console.log(new Food('cheese', 5).name); // expected output : "cheese"
console.log(new Food('cheese', 5).price); // expected output : 5
console.log(new Food('cheese', 5).category); // "food"

객체와 함께 .bind()를 사용하여 바인딩의 예 1:
이것을 주의 깊게 공부하면 .bind()의 요점을 전체적으로 알 수 있을 것입니다!

/*var*/this.x = 9; // hereby 'this' refers to global 'window' object in a browser
const module = {
  x: 81,
  getX: function() { return this.x; }
};

module.getX(); //  returns 81
// Even if we invoke method binding inner "this" through module as one entity
let retrieveXrightNow = module.getX(); // ^retrieveXrightNow is one entity!
console.log(retrieveXrightNow); // it works : returns 81

/* However, reference of retrieveX for a later invocation of module.getX would...
    ...not work if retrieveX() later in the future, unless the case of...
    ...when it does search prop / method within window object and does find one
    ...as an example of such case shown below in the code :
*/

let retrieveX = module.getX; // ^retrieveX is no more of one entity!
retrieveX(); /* expected output : undefined ; fortunately it returned 9 ;
because we declared this.x = 9 GLOBALLY (see at the very top of the code)

If declared within const module = { x : 9, ...} , it would return undefined

NOTICE! : In JavaScript, keyword THIS is bound during function invocation ! It
may not be comprehended in first place, but when it did you're the boss!

IN CASE OF : const module = { x : 9, ...} SOLUTION is to bind it's LOCAL SCOPE
It's like to say "Forget Global scope, let's do some own (local scope) business"

Solution to the issue shown below :
*/

const bRetrieveX = module.getX.bind(module); // by this we do state :
/* "Please, do attach "this" keyword of local scope specifically of module & ...
      ...say to window object 'Hey, Window, mind your business, okay?!'
*/

bRetrieveX(); // returns 81

다시 캡

위의 코드 조각을 철저히 조사했다면 아마도 매우 중요한 사실을 알아차렸을 것입니다. 우리가 대괄호() 없이 첨부한 변수의 참조로 function을 호출하려고 할 때마다 실제로 참조로 메서드 객체의 "this"가 손실되었습니다. 특정 개체의 메서드 내에 있는 로컬 범위입니다. 이로써 객체는 함수 객체, 즉 클래스가 될 수 있고 클래스 함수, 즉 메소드가 될 수 있습니다. 예상되는 동작이 동일할 것이기 때문에 문제가 되지 않습니다. 아직 이해하기 어렵다면 *하나의 엔티티를 통한 * 참조로 생각하십시오.

let retrieveXrightNow = module.getX()
즉, 제자리에서 참조를 호출하거나 *하나의 엔티티를 통하지 않고 * 예를 들어

let retrieveX = module.getX;
즉, 제자리에 있지 않은(나중에) 참조(변수) 호출로, 참조에 키워드 "this"가 더 이상 첨부되지 않은 경우, 즉 잠시 동안 어딘가에서 "this"를 잃어버렸습니다.

클래스와 함께 .bind()를 사용하여 바인딩하는 예 2:
Independent-classes-binding


오타가 발견되거나 제안 사항이 있으면 아래의 의견 섹션에 남겨주세요. 감사합니다. 다음 편에서 뵙겠습니다!