[TIL]21.06.14

๋ฐ•์ฃผํ™ยท2021๋…„ 6์›” 14์ผ
0

Today I Learned

๋ชฉ๋ก ๋ณด๊ธฐ
33/104

๐Ÿ‘จโ€๐Ÿ’ป ์˜ค๋Š˜ ๊ณต๋ถ€ํ•œ ๊ฒƒ

  • class, super, extend, require, module.exports, prototype, __proto__

  • 1. class

    JavaScript์—์„œ class ์„ ์–ธํ•˜๋Š” ๊ฒƒ์€ Es5์™€ Es6๋ฒ„์ „์ด ์žˆ๋‹ค.

    1)Es5

      function Computer(Modelname, brand, color){
      	this.Modelname = Modelname;
      	this.brand = brand;
      	this.color = color;
      }
      
      Computer.prototype.onPower = function(){
      	// ์ „์›์„ ํ‚ค๋Š” ์ฝ”๋“œ
      }
      Computer.prototype.offPower = function(){
      	// ์ „์›์„ ๋„๋Š” ์ฝ”๋“œ
      }
      

    2) Es6

    class Computer{
    	constructor(Modelname, brand, color){
    		this.Modelname = Modelname;
    		this.brand = brand;
    		this.color = color;
    	}
    	onPower(){
    		// ์ „์›์„ ํ‚ค๋Š” ์ฝ”๋“œ
    	}
    	offPower(){
    		// ์ „์›์„ ๋„๋Š” ์ฝ”๋“œ
    	}
    }


    2. super, extends, require, module.exports

    super๋Š” extends๋กœ ํด๋ž˜์Šค๋ฅผ ์ƒ์†๋ฐ›์€ ํ›„ ์ƒ์†๋ฐ›์€ ๋ฐ์ดํ„ฐ๋ฅผ ์“ฐ๊ธฐ์œ„ํ•ด ์‚ฌ์šฉํ•˜๋Š” ํ‚ค์›Œ๋“œ๋‹ค. ๊ทธ๋ ‡๋‹ค๋ฉด extends๋Š” ํด๋ž˜์Šค๋ฅผ ์ƒ์†ํ•ด์ฃผ๋Š” ํ‚ค์›Œ๋“œ์ผ ๊ฒƒ์ด๋‹ค.

    require์€ ์ƒ์†๋ฐ›๊ณ ์‹ถ์€ ํด๋ž˜์Šค๋ฅผ ๋ถˆ๋Ÿฌ์™€์ฃผ๋Š” ํ‚ค์›Œ๋“œ์ด๊ณ , module.exports๋Š” ํด๋ž˜์Šค๋ฅผ ๋‹ค๋ฅธ ํด๋ž˜์Šค์—์„œ ์ƒ์†๋ฐ›์„ ์ˆ˜ ์žˆ๋„๋ก exportsํ•ด์ฃผ๋Š” ๋ฉ”์†Œ๋“œ์ด๋‹ค.

    // Animals.js
    
    class Animals{
    	constructor(name, age, whatAnimalLikes){
        	this.name = name;
          	this.age = age;
          	this.whatAnimalLikes = 'feed';
        }
      	eat(){
        	console.log(`${name}๊ฐ€ ๋จน์ด๋ฅผ ๋จน์Šต๋‹ˆ๋‹ค.`);
        }
      	sleep(){
        	console.log(`${name}๊ฐ€ ์ž ์„ ์žก๋‹ˆ๋‹ค.`);
        }
      	likeAnimal(){
        	console.log(`${name}๊ฐ€ ${whatAnimalLikes}์„ ๋ฐ›๊ณ  ์ข‹์•„ํ•ฉ๋‹ˆ๋‹ค.`);
        }
    }
    
    module.exports = Animals
    
    // Cat.js
    const Animals = require('./Animals');	// ๊ฐ™์€ ํด๋”์— ์žˆ๋‹ค๋Š” ๊ฐ€์ •ํ•˜
    
    class Cat extends Animals{
    	constructor(name, age, whatAnimalLikes){
        	super(whatAnimalLikes);	// ๋ถ€๋ชจํด๋ž˜์Šค์—์„œ whatAnimalLikes ๋ฅผ ์ƒ์†๋ฐ›๋Š” ์ฝ”๋“œ
          	this.name = '๊ณ ์–‘์ด';
          	this.agre = 3;
        }
        eat(){
        	return super.eat();	// ๋ถ€๋ชจํด๋ž˜์Šค์—์„œ ๋ฉ”์†Œ๋“œ eat()์„ ์ƒ์†๋ฐ›๋Š” ์ฝ”๋“œ
        }
        likeAnimal(){
      		return console.log("๊ณ ์–‘์ด๊ฐ€ ์ข‹์•„ํ•ฉ๋‹ˆ๋‹ค.")	// ๋ถ€๋ชจํด๋ž˜์Šค์—์„œ ์ƒ์†๋ฐ›์ง€์•Š๊ณ  ๋ฉ”์†Œ๋“œ๋ฅผ ์„ ์–ธํ•œ ์ฝ”๋“œ
        }
    }



    3. prototype, __proto__

    class๋ฅผ ์„ ์–ธํ•˜๋ฉด ๊ทธ class๋Š” prototype์ด๋ผ๋Š” ๊ฐ์ฒด๋ฅผ ๊ฐ€๋ฅดํ‚ฌ ์ˆ˜ ์žˆ๋‹ค. ๋˜ํ•œ ๊ทธ prototype์ด๋ž€ ๊ฐ์ฒด๋Š” ๊ทธ prototype๋ฅผ ๊ฐ€๋ฅดํ‚ค๋Š” constructor๊ฐ€ ์žˆ๋‹ค.

    ๊ทธ๋Ÿฌํ•œ class๋ฅผ ์–ด๋– ํ•œ class๊ฐ€ ์ƒ์† ๋ฐ›๋Š”๋‹ค๋ฉด, ์ƒ์†๋ฐ›์€ class๋„ ์ƒ์†ํ•ด์ค€ class๊ฐ€ ๊ฐ€๋ฅดํ‚ค๋Š” prototype์ด๋ผ๋Š” ๊ฐ์ฒด๋ฅผ ๋˜‘๊ฐ™์ด ๊ฐ€๋ฅดํ‚ค๊ฒŒ ๋œ๋‹ค.

    ํ•˜์ง€๋งŒ ์ƒ์†๋ฐ›์€ class๋Š” prototype์ด๋ผ๋Š” ๊ฐ์ฒด๋กœ prototype์„ ๊ฐ€๋ฅดํ‚ค๋Š” ๊ฒƒ์ด ์•„๋‹Œ, __proto__๋กœ ๊ฐ€๋ฅดํ‚ค๊ฒŒ ๋œ๋‹ค. ๊ทธ๋ž˜์„œ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ƒ์†ํ•ด์ค€ ํด๋ž˜์Šค์˜ prototype๊ณผ ์ƒ์†๋ฐ›์€ ํด๋ž˜์Šค์˜ __proto__๊ฐ€ ๊ฐ™์€ prototype์„ ์ฐธ์กฐํ•˜๋Š” ์ง€ ํ™•์ธํ•ด ๋ณผ ์ˆ˜ ์žˆ๋‹ค.

    	Animals.prototype === Cat.__proto__;
    	// true

    ๊ทธ๋ ‡๋‹ค๋ฉด prototype๋ผ๋Š” ๊ฐ์ฒด๋Š” ๋ฌด์—‡์„ ๊ฐ€์ง€๊ณ  ์žˆ์„ ๊นŒ??
    ๋ถ€๋ชจํด๋ž˜์Šค์—์„œ ์„ ์–ธํ•œ ๋ฉ”์†Œ๋“œ์™€ ์•ž์„œ ์–˜๊ธฐํ•œ constructor์„ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค.

    ์ƒค๋ผ์›ƒ ํˆฌ ์ƒํ™œ์ฝ”๋”ฉ์ด๋‹ค..


    profile
    ๊ณ ํ†ต์—†๋Š” ์„ฑ์žฅ์€ ์—†๋‹ค๊ณ  ํ•  ์ˆ˜ ์žˆ๊ฒ ๋‹ค....

    0๊ฐœ์˜ ๋Œ“๊ธ€