자바스크립트 기초 강좌(객체 메소드)

히대·2023년 12월 21일

Javascript

목록 보기
10/28


자바스크립트 기숸을 제아페

method : 객체 프로퍼티로 할당 된 함수

const superman = {
	name: 'clark',
    age: 33,
    fly:function(){
    	console.log('날아갑니다.')
    }
}

↓ 단축 구문 작성 

const superman = {
	name: 'clark',
    age: 33,
    fly(){
    	console.log('날아갑니다.')
    }
}

superman.fly(); -> 날아갑니다.
const user = {
	name:'mike',
    sayHello:function(){
    	console.log(`Hello, I'm ${this.name}`)
    }
}

user.sayHello(); -> Hello, I'm mike

예제

let boy = {
	name: 'mike',
    sayHello,
}

let girl = {
	name: 'jane',
    sayHello,
}

sayHello:function(){
	console.log(`Hello, I'm ${this.name}`);
}

boy.sayHello(); -> I'm mike
girl.sayHello(); -> I'm jane

화살표 함수는 this를 가지지 않음

화살표 함수는 일반 함수와는 달리 자신만의 this를 가지지 않음
화살표 함수 내부에서 this를 사용하면, 그 this는 외부에서 값을 가져 옴

let boy = {
	name: 'mike',
    sayHello:()=>{
    	console.log(this); * 전역객체
    }					 	 브라우저 환경에서 this 는 window
}							 Node js 환경에서 this 는 global

boy.sayHello();
this != boy
let boy = {
	name: 'mike',
    showName: function(){
    	console.log(boy.name) -> 'mike'
    }    
};

let man = boy;

man.name = 'tom'
console.log(boy.name) -> 'tom'

boy = null;
man.showName(); -> error 출력 * boy.name이 사라짐

↓ this로 코드 수정 후
let boy = {
	name: 'mike',
    showName: function(){
    	console.log(this.name) -> 'mike'
    }    
};

man.showName(); -> 'mike'
profile
아자아자 파이팅🔥

0개의 댓글