[스터디] 객체 프로퍼티 설정 / 프로토타입 상속

학습 후 확인을 위해 문제를 만들어 보았다.

범위: 객체 프로퍼티 설정 및 프로토타입 상속

 

 

1. 다음에서 console에 출력되는 값은 무엇인가요?

let user = {
	name: "Tom",
	age: 10,
};

Object.defineProperty(user, "name", {
	writable: true,
	configurable: false,
});

user.name = "Jane"
Object.defineProperty(user, "name", {writable: false});
user.name = "James" 

console.log(user.name)

 

정답 및 해설 ▼

정답: Jane

해설:

let user = {
	name: "Tom",
	age: 10,
};

Object.defineProperty(user, "name", {
	writable: true,
	configurable: false, 
    
    /*Object.defineProperty를 통해서 프로퍼티를 수정함
    configurable 플래그가 false이므로 프로퍼티 삭제나 플래그 수정이 불가능
    (단, writable을 true -> false로 변경하는 것은 가능하다. */
    
});

user.name = "Jane" //user의 name 프로퍼티의 값을 Jane으로 변경함.
Object.defineProperty(user, "name", {writable: false}); //플래그를 수정함

user.name = "James" //writable이 false이므로 name의 value 수정 불가능해짐

console.log(user.name)

 

 

2. 다음에서 console에 출력되는 값은 무엇인가요?

let user = {
  get name() {
    return this._name;
  },
};

user.name = "Pete";
console.log(user.name)

정답 및 해설 ▼

정답: undefined

해설:

user 안에 setter가 없어서 name 값이 할당되지 않았다. 

 

 

 

3. 다음에서 console에 출력되는 값을 차례대로 적으시오.

let student = {
  school: "한국초등학교",
  study() {
    console.log("학생은 공부를 합니다.")
  },
}

let Tom = {
  name: "Tom",
  school: "한국중학교",
  __proto__: student
}

let James = {
  name: "James",
  __proto__: student
}

let test = {
  score: 10,
  __proto__: Tom
}



console.log(Tom.school)
console.log(James.school)
Tom.study();
James.study();
console.log(test.name)

정답 및 해설 ▼

정답:

한국중학교

한국초등학교

학생은 공부를 합니다.

학생은 공부를 합니다.

Tom

 

해설:

let student = {
  school: "한국초등학교",
  study() {
    console.log("학생은 공부를 합니다.")
  },
}

let Tom = {
  name: "Tom",
  school: "한국중학교",
  __proto__: student //Tom의 prototype은 student이다. (Tom은 student를 상속받는다.)
}

let James = {
  name: "James",
  __proto__: student //James의 prototype은 student이다. (James는 student를 상속받는다.)
}

let test = {
  score: 10,
  __proto__: Tom //test의 prototype은 Tom이다. (test는 Tom을 상속받는다.)
}



console.log(Tom.school) //Tom에 school이 있어서 해당 값을 출력한다.
console.log(James.school) //James에 school이 없기에 프로토타입에서 찾아서 출력한다.
Tom.study(); //Tom의 프로토타입의 study 메서드를 사용한다.
James.study(); //James의 프로토타입의 study 메서드를 사용한다.
console.log(test.name) //test의 프로토타입인 Tom의 프로퍼티에서 name 값을 찾아서 출력한다.

 

* __proto__ (던더프로토) : 현재는 사용을 권장하지 않는다. 

 그 대신 Object.create, Object.getPrototypeOf, Object.setPrototypeOf를 사용을 권장한다. 

위의 코드에서 사용한다면, 아래와 같이 사용할 수 있다.

let James = Object.create(student, {
	name: {
    	value: "James",
        writable: true,
        enumerable: true,
        configurable: true
    }
});

 

 

4. 다음 코드를 실행시 console에 출력되는 값은?

let student = {
  school: "한국초등학교",
  study() {
    console.log("학생은 공부를 합니다.")
  },
}

let Tom = {
  name: "Tom",
  school: "한국중학교",
  __proto__: student
}

Tom.study = function() {
  console.log("Tom은 공부를 좋아합니다.")
}

Tom.study();

정답 및 해설 ▼

정답: Tom은 공부를 좋아합니다.

 

해설: 

Tom 객체 자체에 study 메서드를 직접 할당하였기 때문에 프로토타입의 메서드가 아닌 객체 자체의 메서드가 실행된다.

 

 

 

5. 다음 코드를 실행시 console에 출력되는 값을 차례대로 작성하시오

let student = {
  school: "한국초등학교",
  rest() {
    this.isRest = false
  },
  study() {
    console.log(`${this.name}은 공부를 합니다.`)
  },

}

let Tom = {
  name: "Tom",
  school: "한국중학교",
  __proto__: student,
}

Tom.rest();
Tom.study();

console.log(Tom.isRest);
console.log(student.isRest);

정답 및 해설 ▼

정답: 

Tom은 공부를 합니다.

false

undefined

 

해설:

1) Tom.study(); 로 인해 Tom의 프로토타입인 student의 study 메서드가 실행되었다. 그리고 이때의 this는 프로토타입에 영향을 받지 않고,  점(.)앞에 있는 객체가 되므로 Tom이 된다.

let student = {
  school: "한국초등학교",
  rest() {
    this.isRest = false
  },
  study() {
    console.log(`${this.name}은 공부를 합니다.`)
  },

}

let Tom = {
  name: "Tom",
  school: "한국중학교",
  __proto__: student,
}

Tom.rest(); //Tom의 프로토타입인 student의 rest메서드 호출되어서 Tom.isRest = false 가 된다.
Tom.study(); //Tom의 프로토타입인 student의 study 메서드가 호출되어서 "Tom은 공부를 합니다"가 console에 출력된다.)

console.log(Tom.isRest); // Tom.rest()를 위에서 호출해서 Tom.isRest 는 false가 되었다.
console.log(student.isRest); //student에는 isRest 프로퍼티가 없어서 undefined가 출력된다.

 * this 는 프로토타입에 영향을 받지 않고, 점(.) 앞에 있는 객체가 된다. 

 

 

---

References

https://ko.javascript.info/