This

이용원·2022년 11월 14일
0

JAVASCRIPT

목록 보기
13/34

This

const cat = {
    name:'Blue Streele',
    color:'grey',
    breed:'scottish fold',
    meow(){
        console.log("meow")
    }
}

cat.meow();



//meow메소드에서 name값에 접근하고 싶을 때 
//객체 이름을 직접 사용해도 되지만 this를 사용해서 접근한다.
const cat = {
    name:'Blue Streele',
    color:'grey',
    breed:'scottish fold',
    meow(){
        console.log(`${cat.name}`)  //Blue Streele
        console.log(`${this.name}`) //Blue Streele
    }
}

cat.meow();

//this는 사용된 함수으 호출 컨텍스트에 따라 값이 달라진다.
//함수를 호출하는 방법에 따라서 this 값이 달라진다.


//cat.meow메소드를 meow2변수에 할당
const meow2 = cat.meow;

meow2(); //undefined

//cat.meow와 meow2를 콘솔에 찍어보면
console.log(cat.meow) //[Function: meow]
console.log(meow2) // [Function: meow]

//호출 컨텍스트 차이 때문
//메서드에 고양이를 쓰고 함수 호출
cat.meow의 this는 cat 오브젝트를 가르키고
meow2의 this는 cat 오브젝트를 가리키지 않는다.
this를 콘솔로 찍어보면
cat.meow의 this는 cat 오브젝트를 반환해주고
meow의 this는 window객체를 반환해준다.
![](https://velog.velcdn.com/images/dyddnjs0982/post/aa9741b0-6ec9-4d3b-b5fa-cbb6ab0105e0/image.png)

meow2는 cat.meow를 할당했지만 호출할 때 일반함수임
일반함수의 this는 window객체를 가르킴


                                
                                
 

                                


0개의 댓글

관련 채용 정보