자바스크립트에서 이 키워드

소개 :-

자바스크립트에서 가장 혼란스러운 주제 중 하나
따라서 개체에 액세스하기 위해 메서드에서 이 키워드를 사용할 수 있습니다.
다른 프로그래밍 언어인 javascript와 달리 이 키워드는 다르게 동작합니다. 객체의 메서드가 아니더라도 모든 함수에서 사용할 수 있습니다.

이 키워드

이 키워드의 사용

const user = {
  name: 'hero',
  age: 21,
  data() {
    console.log('user name', this.name)
    console.log("user age", this.age)
  }
}
user.data()
// user name hero
// user age 21

looks easy right

javascript에서 this의 값은 사용되는 함수나 범위를 나타내지 않습니다.
함수의 호출 컨텍스트와 호출 위치에 따라 값을 참조합니다.

바인딩은 'this' 키워드를 이해하는 데 중요합니다.

기본 바인딩:

암시적 바인딩

명시적 바인딩

새 연산자 메서드

기본 바인딩

const myFunction = function() {
   console.log(this);
}

myFunction();    // Window

창 컨텍스트에서 function()을 호출하면 창 개체를 참조합니다.

var myFunction = function() {
   console.log(this.a);
}
var a = 200
myFunction();    // 200

위의 함수에서 this는 전역 컨텍스트를 참조하고 전역 컨텍스트에서 호스팅하기 때문에 var를 사용하는 경우에만 작동하는 200을 반환합니다.

암시적 바인딩

function foo(){
    console.log(this.a);
}

var obj = {
    a:2,
    foo:foo
};

obj.foo();  // 2 

보시다시피 obj.foo()는 객체 obj를 참조하고 2를 반환합니다.

function foo(){
    console.log(this.a);
}

var obj = {
    a:2,
    foo:foo
};

var fun = obj.foo; 
fun() //undefined

obj.foo를 var에 할당하면 함수 자체를 참조합니다.

명시적 바인딩

특정 개체를 사용하여 함수를 호출하려는 경우 명시적 바인딩을 사용합니다.

호출, 바인드 및 적용을 사용할 수 있습니다.

const obj = {
 name:'hero',
  age:21
}

function foo (){
console.log('user name', this.name)
    console.log("user age", this.age)
}

foo.call(obj)
// user name hero
// user age 21

use를 호출하여 이를 위해 사용해야 하는 객체를 함수에 명시적으로 알려줍니다.

적용 방법은 호출과 동일하게 작동하지만 호출과 적용의 유일한 차이점은 배열로 전달되는 적용 함수 인수에 있습니다.function.call(obj, arg1, arg2)function.apply(obj, [arg1], [arg2])
바인드 사용 원래 기능으로 작동하지만 이 미리 정의된 새 기능을 만듭니다.

function foo(){
    console.log(this.a);
}

var obj = {
    a:2,
    foo:foo
};

var fun = foo.bind(obj); 
fun() //2

새로운 연산자 방법

new 연산자를 사용하면 사용자 정의 개체 유형 또는 생성자 함수가 있는 내장 개체 유형 중 하나의 인스턴스를 만들 수 있습니다.
const newObj = new Car('toyota','nissan','honda')

비어 있는 일반 JavaScript 개체를 만듭니다.

새로운 빈 객체가 생성되고 이 키워드로 참조됩니다.

속성 및 메서드는 this에서 참조하는 개체에 추가됩니다.

function Car(carOne, carTwo, carThree) {
  this.carOne = carOne;
  this.carTwo = carTwo;
  this.carThree = carThree;
}

const newObj = new Car('toyota','nissan','honda')

console.log(newObj.carTwo);  //nissan

new 연산자는 명시적 바인딩 및 암시적 바인딩보다 우선 순위가 가장 높습니다. 가장 낮은 우선 순위에는 기본 바인딩이 있습니다.

🥶이 화살표 기능

const arrowFun = ()=> console.log('this will not bind')


네 😂
화살표 함수에는 자체 바인딩이 없기 때문입니다. 화살표 함수는 이 인수 메서드를 사용할 수 없습니다.

const obj = {
  name: 'harshit'
}
const fun = () => {
  console.log(this.name)
}

fun.call(obj) // <empty string>

화살표 기능은 new.target에 액세스할 수 없습니다.
화살표 함수는 일반적으로 범위 설정에 의존하는 호출, 적용 및 바인딩 메서드에 적합하지 않습니다.

읽어 주셔서 감사합니다