S2) Unit 2. [JS] νλ‘ν νμ
π JSλ νλ‘ν νμ κΈ°λ°μ μΈμ΄μ΄λ€.
π£ νλ‘ν νμ
βοΈ μνμ΄λΌλ λ» (κ°μ²΄μ μν, μ¦ κ°μ²΄μ λΆλͺ¨)
βοΈ κ°μ²΄λ νλ‘νΌν°λ₯Ό κ°μ§ μ μλλ°, νλ‘ν νμ
μ΄λΌλ νλ‘νΌν°λ κ°μ²΄κ° μμ±λ λ νλ‘ν νμ
μ μ μ₯λ μμ±λ€μ΄ κ·Έ κ°μ²΄μ μ°κ²°λλ€.
βοΈ λͺ¨λ κ°μ²΄λ νλ‘ν νμ
μ μ κ·Όν μ μλ€.
π£ νλ‘ν νμ κ³Ό ν΄λμ€
class Human {
constructor(name, age) {
this.name = name;
this.age = age;
}
sleep() {
console.log(`${this.name}μ μ μ λ€μμ΅λλ€`);
}
}
let kimcoding = new Human('κΉμ½λ©', 30);
// μ€μ΅ν΄λ³΄μΈμ
Human.prototype.constructor === Human; // true
Human.prototype === kimcoding.__proto__; // true
Human.prototype.sleep === kimcoding.sleep; // true
β° Human ν΄λμ€μ μμ±μ ν¨μλ Humanμ΄λ€
β° Human ν΄λμ€μ νλ‘ν νμ
μ Human ν΄λμ€μ μΈμ€ν΄μ€μΈ kimcodingμ __proto__ μ΄λ€.
β __proto__
μλ‘μ΄ κ°μ²΄λ₯Ό μμ±ν λ κ°μ²΄μ νλ‘νΌν°μ ν¨κ» __proto__ νλ‘νΌν°κ° κ°μ΄ μμ±λλ€.
__proto__λ kimcodingμ΄λΌλ κ°μ²΄λ₯Ό μμ±ν Human κ°μ²΄μ prototype κ°μ²΄λ₯Ό κ°λ¦¬ν¨λ€.
β° Human ν΄λμ€μ sleep λ©μλλ νλ‘ν νμ
μ μμΌλ©°,
Human ν΄λμ€μ μΈμ€ν΄μ€μΈ kimcodingμμ kimcoding.sleepμΌλ‘ μ¬μ©ν μ μλ€.
βοΈ Human ν΄λμ€μ μΈμ€ν΄μ€, νλ‘ν νμ
μ κ΄κ³

βοΈ Array ν΄λμ€μ μΈμ€ν΄μ€, νλ‘ν νμ
μ κ΄κ³


βοΈ .prototypeμ 'μλ'λ‘, .__proto__λ 'μ'λ‘ λΌκ³ μκ°νμ.
π£ νλ‘ν νμ 체μΈ
βοΈ JSμμ μμμ ꡬνν λ νλ‘ν νμ 체μΈμ μ¬μ©νλ€.
// Human ν΄λμ€
let kimcoding = new Human('κΉμ½λ©', 30);
// μμ±
kimcoding.age;
kimcoding.gender;
// λ©μλ
kimcoding.eat();
kimcoding.sleep();
// Student ν΄λμ€
let parkhacker = new Student('λ°ν΄μ»€', 22);
// μμ±
parkhacker.grade;
// λ©μλ
parkhacker.learn();
β° Student ν΄λμ€λ Human ν΄λμ€ + μΆκ°μ μΈ νΉμ§
β° λΆλͺ¨ ν΄λμ€(Human) / μμ ν΄λμ€(Student) => μ΄λ κ² λ¬Όλ €λ°λ κ³Όμ μ΄ μμ
β° JSμμλ extendsμ super ν€μλλ₯Ό ν΅ν΄ μμμ ꡬνν μ μλ€.
// Person ν΄λμ€
class Person {
constructor(first, last, age, gender, interests) {
this.name = {
first,
last
};
this.age = age;
this.gender = gender;
this.interests = interests;
}
greeting() {
console.log(`Hi! I'm ${this.name.first}`);
};
farewell() {
console.log(`${this.name.first} has left the building. Bye for now!`);
};
}
// Teacher ν΄λμ€
class Teacher extends Person {
constructor(first, last, age, gender, interests, subject, grade) {
super(first, last, age, gender, interests);
// subject and grade are specific to Teacher
this.subject = subject;
this.grade = grade;
}
}
β° super() : μμ ν΄λμ€μ μμ±μλ₯Ό νΈμΆνμ¬ super()μ λ§€κ°λ³μλ₯Ό ν΅ν΄ μμ ν΄λμ€μ λ©€λ²λ₯Ό μμλ°μ μ μλ μ½λ
β° Teacherμ μΈμ€ν΄μ€λ₯Ό μμ±νλ©΄ μλνλλ‘ Teacherμ Person μ μͺ½μ λ©μλμ μμ±μ μ¬μ©ν μ μλ€.
βοΈ λ¬Έμ
let div = document.createElement('div');
div.__proto__.__proto__ // HTMLElement
div.__proto__.__proto__.__proto__// Element
βοΈ λ¬Έμ
class Human {
constructor(name, age) {
this.name = name;
this.age = age;
}
sleep() {
console.log(`${this.name}μ μ μ λ€μμ΅λλ€`);
}
}
let kimcoding = new Human('κΉμ½λ©', 30);
β° Humanμ μ΅μμ ν΄λμ€λ‘μ¨ λΆλͺ¨ ν΄λμ€κ° μλ€. (β)
-> μ΅μμ ν΄λμ€λ Objectλ‘, Humanμ λΆλͺ¨ ν΄λμ€λ Object μ΄λ€.
βοΈ λ¬Έμ
let div = document.createElement('div');
document.body.append(div);
div.textContent = 'μ½λμ€ν
μ΄μΈ μμλ λͺ°μ
μ μ¦κ±°μμ λλ μ μμ΅λλ€.';
div.addEventListener('click', () => console.log('λͺ°μ
μ νλ©΄ λλΌμ΄ μΌμ΄ μκΉλλ€.'));
β° EventTargetμ prototypeμ addEventListener λ©μλκ° μλ€.
divλ HTMLDivElementμ μΈμ€ν΄μ€μ΄κ³ EventTargetμ μμλ°μκΈ° λλ¬Έμ addEventListenerλ₯Ό μ¬μ©ν μ μλ€.
λ³΄ν΅ ν΄λμ€μ μΈμ€ν΄μ€λ new ν€μλλ‘ μμ±νμ§λ§, DOMμμλ createElementλ₯Ό μ¬μ©νλ€.
βοΈ λ¬Έμ
class Human {
constructor(name, age){
this.name = name;
this.age = age;
}
sleep(){ return `${this.name}μ΄(κ°) μ μ μ‘λλ€.`}
}
class Student extends Human{
constructor(name, age, grade){
super(name, age);
this.grade = grade;
}
study(num){
this.grade = this.grade + num;
return `${this.name}μ μ±μ μ΄ ${num}λ§νΌ μ¬λΌ ${this.grade}μ΄ λμμ΅λλ€.`
}
}
class ForeignStudent extends Student{
constructor(name, age, grade, country){
super(name, age, grade);
this.country = country;
}
speak(){
return `${this.country} μΈμ΄λ‘ μμ
μ μ§νν©λλ€.`
}
}
let americanStudent = new ForeignStudent('jake', 23, 80, 'λ―Έκ΅');
β° ForeignStudentμ λΆλͺ¨ ν΄λμ€λ Student, Human λ κ°μ΄λ€.