Javascript:"THIS"바인딩에 대한 기본 이해

Javascript 이 키워드는 항상 개발자에게 문제의 원인이었으며 이 값이 해결되는 방법에 대해 혼란스러워합니다.

이러한 개발자 중 하나라면 걱정하지 마세요. 이 문서를 통해 이 메커니즘이 어떻게 작동하는지 쉽게 이해할 수 있습니다.

이 바인딩은 네 가지 주요 규칙(예, 이 모든 골칫거리는 네 가지 규칙에 관한 것입니다)과 어휘 this(화살표 기능)를 따릅니다.

기본 바인딩

암시적 바인딩

명시적 바인딩

새로운 바인딩

Lexical this (자체 규칙이 있음)

이 4가지 규칙이 무엇인지 자세히 알아보자

1. 암시적 바인딩

객체 속성 내부의 함수가 주어지면 암시적 바인딩은 호출될 때 함수에 대한 this가 객체 자체라고 말합니다.

function write(){
console.log(this.a)
}
var obj={
a:2,
write:write
}
obj.write()//2

즉, obj.write()에서 암시적으로 this = obj, 따라서 this.a == obj.a라고 말합니다.

2. 명시적 바인딩

이것은 apply() , call() 및 bind() 함수를 통해 특정 값을 취하도록 "강제"합니다. 그들은 이 값으로 사용할 객체를 첫 번째 매개변수로 취하고 함수 인수를 나타내는 두 번째 매개변수를 취합니다.

function write() {
  console.log(this.name);
}
write.call({ name: "HSSAN" }); // HSSAN 

이 예에서 this = {name:"HSSAN"}이므로 this.name == "HSSAN"

3. 새로운 바인딩

내 기사에서 새 키워드가 내부적으로 작동하는 방식에 대해 논의했습니다. 간단히 말해서 객체를 생성하고 이것은 새로 생성된 객체에 바인딩된 다음 반환됩니다.

function write(a){
this.a=a
 }
var writing=new write("hello");

console.log(writing.a);//hello

4. 기본 바인딩

이전 규칙이 모두 적용되지 않는 경우 전역 개체에 바인딩됩니다. 엄격 모드에서는 undefined에 바인딩됩니다.

어휘 이것(화살표 기능)

Arrow 함수는 이 바인딩을 처리하는 방법에 대해 다른 접근 방식을 사용합니다. 화살표 함수에서 이것은 어휘 범위에 의해 결정됩니다. 즉, 함수가 선언된 위치에 따라 이 바인딩이 결정됩니다(상속 범위를 둘러싸는).

this.name = "HSSAN";
this.skills = ["shoot"];
var player = {
  name: "Kane",
  skills: ["dribble", "pass", "shoot"],
  showSkills: () => { // this here is lexically inherited from player
    this.skills.forEach((skill) => {
      console.log(`${this.name} can ${skill}`);
    });
  },
};
player.showSkills(); //HSSAN can shoot

showSkills는 화살표 함수이므로 둘러싸는 범위에서 이것을 상속합니다. 이 경우 범위를 둘러싸는 것은 전역 객체를 범위로 갖는 플레이어 객체입니다. 따라서 우리 함수는 이 바인딩에 대한 전역 개체를 상속합니다.

하나 이상의 자격이 있을 때 규칙을 적용하는 순서는 무엇입니까?

어떤 규칙이 다른 규칙보다 우선하는지 구체적인 예를 들어 보여드리겠습니다.

명시적 VS 암시적

var player={ 
       name:"Kane", 
       skills:["dribble","pass","shoot"],
       showSkills:function(){
         this.skills.forEach((skill)=>{
           console.log(`${this.name} can ${skill}`)
})
}
}
var func=player.showSkills.bind({name:"bale",skills:["shoot"]})
func()//bale can shoot

func()는 'bale can shoot'를 반환하므로 플레이어 바인딩은 무시(암시적 바인딩)되어 명시적 바인딩 대신 사용됩니다(예제에서는 bind를 사용했지만 호출 또는 적용으로도 대체될 수 있음).

With this simple example, we can say explicit binding has more precedence than implicit binding.

새로운 VS 암시적

function getName(name)
{
this.x=name
}
const obj={name:getName}
const obj1 = new obj.name("Hssan");
console.log(obj.x)//undefined 
console.log(obj1.x)//hssan 

obj.x에는 정의되지 않은 값이 있습니다. 즉, obj 객체에서 x 속성이 생성되지 않고 대신 x 속성(obj1 객체)으로 새 객체가 생성됩니다. new 키워드를 제거하면 obj.x="hssan"이 반대가 되고 obj1이 정의되지 않습니다.

Accordingly, new binding has more precedence than implicit binding.

새로운 VS 명시적

function getName(name){
this.name=name}
var obj={} 
var func=getName.bind(obj); 
func("Hssan");
console.log(obj.name); //Hssan 

const n=new getName("Bale"); 
console.log(n.name); //Bale
console.log(obj.name); //Hssan 

이 데모에서 func는 obj에 대해 하드 바인딩되어 있으므로 obj.name에는 "hssan"값이 있고 new getName("Bale")은 obj 값을 변경하지 않고 대신 속성 name="Bale"을 사용하여 새 객체를 생성하고 반환합니다. .

new has the ability to override hard-bound since it returns the new created object (n). For that reason, new Binding has more precedence than explicit binding.

결론:

우리는 이것이 바인딩되는 값을 알기 위해 적용된 다른 규칙을 함께 보았습니다.
이제 우선 순위를 요약해 보겠습니다.


1) 함수가 new 로 호출되었습니까? 그렇다면 이것은 함수에 의해 생성된 객체입니다.


2) 호출, 적용 또는 바인딩으로 함수가 호출됩니까? 이것은 인수에 전달된 객체를 나타냅니다.


3) 함수가 컨텍스트 객체(객체 소유자)로 호출되었습니까? 이것은 컨텍스트 객체를 참조합니다.

이 빠른 기사가 자바스크립트에서 이 바인딩을 더 명확하게 만들고 더 이상 악몽이 아니기를 바랍니다.