JavaScript에서 Object 및 this

 

JS 객체 형식

 

예시)

const 객체명 = {
	프로퍼티 : ‘값’,
}

 

자바 객체의 특징

 

1. 함수의 프로퍼티

     - 선언된 객체의 내부 프로퍼티는 확정된 틀이 아니며 추후 프로퍼티와 값이 추가될 수도 있다.

 

 

예시)

const obj = {
  name : 'a',
  age : 10,
}

obj.id = 1;
obj['gender'] = 'male';
console.log(obj)
/*
{
  "name": "a",
  "age": 10,
  "id": 1,
  "gender": "male"
}
*/

delete obj.gender;
console.log(obj)
/*
{
  "name": "a",
  "age": 10,
  "id": 1
}
*/

 

 

 

 

2. 함수를 통한 생성

 

    - 함수를 정의 하고 함수를 실행하면서 객체를 만들어 변수에 넣을 수 있다.

    - in 을 통해 프로퍼티의 존재 여부를 확인 할 수 있다.

 

 

예시)

function makeObject(name, age){
  return{
    name:name,
    age:age,
    id: 1
  }
}
const obj = makeObject('a',10);
console.log(obj)
/*
{
  "name": "a",
  "age": 10,
  "id": 1
}
*/

console.log("age" in obj);		//true
console.log("gender" in obj);	//false

 

 

 

3. 객체가 가르키는 프로퍼티

 

    - 객체의 프로퍼티를 바꾸면 변수의 프로퍼티를 바꾸는게 아니라 객체 자체의 프로퍼티 값이 변경된다.

    - this가 가지고 있는 값은 유지된다.

 

 

예시)

let obj = {
  name: 'A',
  printName: function(){
    console.log(obj.name)	// 모든 obj 객체의 name 값을 의미
  }
};
console.log(obj.name)	//"A"

let obj2 = obj;
obj2.name = 'B'

console.log(obj.name)	//"B"

//obj2의 이름을 바꾸면 obj의 이름도 바뀐다. 모두 하나의 객체를 참조하고 있다.

let obj = {
  name: 'A',
  printName: function(){
    console.log(obj.name)	// 모든 obj 객체의 name 값을 의미
  }
};
obj.printName()		//"A"

let obj2 = obj; 
obj.name = 'B'

obj.printName()		//"B"
obj2.printName()	//"B"

//obj2의 이름을 바꾸면 obj의 이름도 바뀐다. 모두 하나의 객체를 참조하고 있다. 22

let obj = {
  name: 'A',
  printName: function(){
    console.log(obj.name)
  }
};

let obj2 = obj;
obj = null;
obj2.printName()	//nullPoint 애러 발생

 

 

 

 

this

   

- this는 변수에 할당된 자기 자신을 의미한다. 따라서 객체의 프로퍼티 값을 바꾸어도 this를 통해 변수의 값에 접근할 수 있다.

 

 

예시)

let obj = {
  name: 'A',
  printName: function(){
    console.log(this.name)	// =>자기의 name값을 가르킨다
  }
};
let obj2 = obj;
obj = null;
obj2.printName()	// "A"

 

 

 

 

화살표 함수에서의 This

 

    - 화살표 함수 안의 this는 그 함수가 속해 있는 스코프의 상위 스코프의 전역 객체를 가르킨다. 

 

 

예시)

let obj = {
  name: 'A',
  printName: () =>{
    console.log(this.name)
  }
};

obj.printName() //화살표 함수 사용시 this는 상위 스코프의 전역 객체 반환 => 윈도우 객체

 

const cat = {
  name: 'A',
  foo1: function() {
    const foo2 = function() {
      console.log(this.name);
    }
    foo2();
  }
};

cat.foo1();	// undefined

const cat = {
  name: 'A',
  foo1: function() {
    const foo2 = () => {
      console.log(this.name);
    }
    foo2();
  }
};

cat.foo1();	// A