🚀 JavaScript Challenge 🚀

자바스크립트 첼린지 노션 학습노트 바로 가기 >>

안녕하세요 ! 챌린지라는 단어를 들으면 뭔가 설레지 않나요? 💪🏻 챌린지는 어려운 사업이나 기론 경신 따위에 맞섬을 비유적으로 이르는 말이라고 합니다 :)

저희 스터디는 끊임없이 도전하며 서로의 성장을 도모합니다.저희는 서로 배운 내용을 공유하며, 부족한 부분을 채워주며 함께 성장하는 스터디 입니다.

반갑습니다 🙌🏻

🌟 스터디 진행 회차 및 일자 🌟

[JavaScript Challenge] 6회차(2021.07.24) 토요일

스터디 원 한분이 더 이상 참여를 못하게 되었습니다 !

✏️ 스터디 주요 내용 ✏️

📚 학습 노트

📚 학습 진도

최재영 19장 - 객체 지향 프로그래밍

조항주 19장 - 프로토타입의 생성 시점

김수진 19장 - 오버라이딩과 프로퍼티 섀도잉

노가혜 19장 - 정적 프로퍼티 / 메서드

🙋🏻 스터디에서 나왔던 질문 🙋🏻‍♀️

Q1. 프로토타입 교체는 어떻게 이루어지는 건가요?

Q2. Create.new에 관하여

🧑🏻‍💻 질문에 대한 답변 👩🏻‍💻

Q1. 프로토타입 교체는 어떻게 이루어지는 건가요?

김수진 님의 답변

✅

생성자 함수의 prototpye 프로퍼티를 통해 프로토타입을 교체 할 경우 constructor의 링크가 깨지며 새로운 프로토타입으로 교체가 되어버린다. 이 때 constructor는 프로토타입 체인에 의하여 Object.prototype의 constructor의 값을 가리키게된다. 그렇기에 constructor의 링크를 깨뜨리지 않기 위해서는 아래 코드처럼 입력을 해야한다

const Person = (function () {
	function Person(name) {
	this.name = name;
}

// ① 생성자 함수의 prototype 프로퍼티를 통해 프로토타입을 교체
Person.prototpye = {
	
	// constructor 연결
	constructor: Person,
	sayHello() {
		console.log(`Hello! I'm ${this.name}`);
	}
};
	return Person;
}());

const person1 = new Person('kim');

console.log(person1.constructor);  // Person
console.log(person1.constructor ===  Object);  // false

Create.new에 관하여

최재영 님의 답변

Object.create = 정적 메서드 ???????

// Object.create = 정적 메서드
const obj = Object.create({ name: 'Lee' });
console.log(obj); // {}

//  Object.prototype.hasOwnProperty = 프로토타입 메서드
console.log(obj.hasOwnProperty('name')); // false

✅

console.log(obj) 시에 빈 칸이 나오는 이유

Object.create 를 사용하여 프로퍼티를 추가 할 경우에 새로운 프로토타입에 프로퍼티를 추가하는 것이므로 obj 객체 내에는 아무런 프로퍼티가 생기지 않음

만약 빈칸이 아닌 프로퍼티를 추가하고 싶다면 아래와 같이 객체내에 직접적으로 추가해야함.

const obj = Object.create({ ProtoName: 'Lee' });
obj.Objname='Lee'
console.log(obj); // {name: "Lee"}
console.log(obj.hasOwnProperty('Objname')); // true

Protoname 의 프로퍼티가 들어간 객체는 현재 Objname의 프로토타입인 것을 알 수 있음.

console.log(obj.hasOwnProperty('name')) 가 false가 나오는 이유

가혜님의 설명 참조

Object.prototype.hasOwnProperty 메서드

→ 이름에서 알 수 있듯이 객체 자신에 해당 프로퍼티가 있는지 확인할 수 있는 메서드

const person = {
  name: 'Lee',
  address: 'Seoul',
};

console.log(person.hasOwnProperty('name')); // true
console.log(person.hasOwnProperty('address')); // true
console.log(person.hasOwnProperty('age')); // false

// toString는 person 객체 자신에는 없으므로 false가 출력이 된다.
console.log(person.hasOwnProperty('toString')); // false

결국 기존 name은 객채 자신에 해당 프로퍼티가 존재하는 것이 아닌 프로토타입에 존재했기에 false가 출력된 것임.

🧑🏻‍💻 다음번 스터디 주제 👩🏻‍💻

새로운 인원 충원과 함께

스터디 방향에 대하여 다시 한번 의논해 볼 생각입니다 ㅎㅎ

오늘도 다들 학습하시느라 고생 많으셨습니다.