クラスとプロトタイプ&プロトタイプチェーン

プロトタイプ

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.prototype.sleep === kimcoding.__proto__.sleep;//true

インスタンス作成時steve.proto; 顔

class Human {
    constructor(name, age){
        this.name = name; 
        this.age = age;
    }
    sleep(){ return `${this.name}이(가) 잠을 잡니다.`}
}
// undefined

const steve = new Human('Steve', 20);
// undefined

steve
// Human {name: 'Steve', age: 20}age: 20name: "Steve"[[Prototype]]: Objectconstructor: class Humansleep: ƒ sleep()[[Prototype]]: Object

steve.__proto__ === Human.prototype;
// true
// steve.__proto__의 주소가 Human.prototype의 주소와 같다.

Human.prototype.sleep
// ƒ sleep(){ return `${this.name}이(가) 잠을 잡니다.`}

steve.__proto__.sleep
// ƒ sleep(){ return `${this.name}이(가) 잠을 잡니다.`}

steve.__proto__.sleep()
// 'undefined이(가) 잠을 잡니다.'

steve.sleep()
// 'Steve이(가) 잠을 잡니다.'

Human
// class Human {
//     constructor(name, age){
//         this.name = name; 
//         this.age = age;
//     }
//     sleep(){ return `${this.name}이(가) 잠을 잡니다.`}
// }

console.dir(Human)
// class Humanlength: 2name: "Human"prototype: {constructor: ƒ, sleep: ƒ}arguments: (...)caller: (...)[[FunctionLocation]]: VM97:2[[Prototype]]: ƒ ()[[Scopes]]: Scopes[2]

class blahblah { sleep() { console.log('meh')}}
// undefined

blahblah
// class blahblah { sleep() { console.log('meh')}}

console.dir(blahblah)
// class blahblahlength: 0name: "blahblah"prototype: {constructor: ƒ, sleep: ƒ}arguments: (...)caller: (...)[[FunctionLocation]]: VM1154:1[[Prototype]]: ƒ ()[[Scopes]]: Scopes[2]

steve.__proto__ === Human.prototype;
// true

Human.prototype
// {constructor: ƒ, sleep: ƒ}

Human.prototype.constructor === Human
// true

Human.prototype.constructor === Human;
Human.prototype === steve.__proto__;
Human.prototype.sleep === steve.sleep;

Array.prototype.constructor === Array;
Array.prototype === arr.__proto__;
Array.prototype.push === arr.push;

プロトタイプチェーン