객체 메소드

아래 내용은 eybac의 블로그를 통해 작성된 내용이다.

내용 구성

1. 객체 메소드
2. 재사용 가능한 this
3. 함수의 분리
4. new 연산자/생성자 함수

1. 객체 메소드

함수 표현식 (어떠한 왼쪽 대상에 함수를 표현해 놓았다.)

let user = {
  name:'John',
  age:30
};
user.sayHi = function(){
  alert('Hi');
};
user.sayHi();

함수 선언식 (어떠한 함수를 그냥 이렇다 선언해 놓았다.)

function sayHi(){
  alert('Hi');
};
user.sayHi = sayHi;
user.sayHi();

메소드

user = {
	sayHi : function(){
  		alert('Hi');
	}
}

or

user = {
	sayHi(){
  		alert('Hi');
	}
}

2. 재사용 가능한 this

Case 1) this를 사용할 경우

let user = {
  name : 'john',
  age:30,
  sayHi(){
    console.log(this.name);
  }
}

let admin = user;
user = null;
admin.sayHi(); //john

Case 2) this를 사용하지 않을 경우

let user = {
  name : 'john',
  age:30,
  sayHi(){
    console.log(user.name);
  }
}

let admin = user;
user = null;
admin.sayHi(); // Error : cannot read property 'name' of null

● this는 런타임/컨텍스트에 따라 달라진다.

• 장점 : 함수를 하나만 만들어 여러 객체에 재사용 (user를 admin객체에 재사용)
• 단점 : 유연함이 실수로 이어진다.

=> 어떤 객체의 메소드로 사용되냐에 따라 메소드 내부의 this가 가리키는 객체가 달라진다.

3. 함수의 분리

const person1={
  name:'윤아준',
  introduce : function(){
    return `안녕하세요, 제 이름은 ${this.name}입니다.`;
}
};

const person2={
  name:'윤아준',
  introduce(){
    return `안녕하세요, 제 이름은 ${this.name}입니다.`;
}
};

위의 내용을

function introduce(){
    return `안녕하세요, 제 이름은 ${this.name}입니다.`;
}

const person1={
  name:'윤아준',
  introduce 
};

const person2={
  name:'윤아준',
  introduce
};

이와같이 분리할 수도 있다.

new 연산자/생성자 함수(constructor function) => 재사용 할 수 있는 객체 생성코드 구현

매개변수가 존재하지 않는 함수

let user = new function(){
  this.name = 'misaka';
  this.isAdmin = false;
}

console.log(user.name)

매개변수가 존재하지 않는 함수 (자주쓰이는듯)

function User(){
  this.name = 'misaka';
  this.isAdmin = false;
}

let user = new User();

console.log(user.name);

---

매개변수가 존재하는 함수 (자주쓰이는듯)

function User(name){
  this.name = name;
  this.isAdmin = false;
}

let user = new User('misaka');

console.log(user.name);

생성자 함수로 인해 user라는 객체(Object)를 생성한다.

---

function Old(name,age){
	this.name = name;
	this.age = age;
	this.name_ip = function(){
		console.log(name);
	}
}

let name = new Old('misaka',19)
console.log(name);
name.name_ip();

생성자 함수에 함수를 넣어 사용하는 것도 가능하다.