[JS] 생성자 함수(Prototype), Class 상속

생성자 함수(Prototype)

- JS는 프로토타입 기반의 언어임. 프로토타입 기반 언어는 객체 원형인 프로토타입을 이용하여 새로운 객체를 만들어냄

- 프로토타입 객체를 참조하는 Prototype속성

- 객체 멤버인 proto속성이 참조하는 숨은 링크

function User(first,last){          // 생성자 함수 ; 파스칼표기법 사용
  this.firstName=first
  this.lastName=last
  // this.getFullName=function(){   // 이 식을 아래에 prototpye을 통해 생성할 수 있음
  //   return `${this.firstName} ${this.lastName}`
  // }
}
User.prototype.getFullName=function(){
  return `${this.firstName} ${this.lastName}`
}

const heropy=new User('Heropy','Park')    // heropy ; 인스턴스
const amy=new User('Amy','Clarke')
const neo=new User('Neo','Smith')
console.log(heropy.getFullName())
console.log(amy.getFullName())
console.log(neo.getFullName())

* 생성자 함수는 화살표 함수로 만들 수 없다.

* 붕어빵 찍어낼 때, 붕어빵 만드는 틀이 생성자 함수라고 보면 됨

 

this - 일반 함수 vs 화살표 함수

- 일반 함수는 호출 위치에서 따라 this 정의

- 화살표 함수는 자신이 선언된 함수 범위에서 this 정의

const heropy = {
    name: 'Heropy',
    normal: function () {
        console.log(this.name)
    },
    arrow: () => {
        name: 'aaa'
        console.log(this.name)
    }
}
heropy.normal() // Heropy 출력
heropy.arrow()  // undefined 출력

const amy = {
    name: 'Amy',
    normal: heropy.normal,
    arrow: heropy.arrow
}
amy.normal() // Heropy 출력
amy.arrow()  // undefined 출력

//------------------------------------------------------
function User(name){
    this.name=name
}
User.prototype.normal=function(){ 
    console.log(this.name)				
}
User.prototype.arrow=()=>{
    console.log(this.name)
}
const heropy=new User('Heropy')

heropy.normal()	// 일반함수임. 여기서 this는 호출 위치 즉, heropy에서 찾음 ; Heropy
heropy.arrow()	// 화살표함수임. 여기서 this는 함수 범위 즉, User.prototype.arrow=(){}에서 찾음 ; undefined
//-----------------------------------------------------
const timer={
    name:'Heropy',
    timeout:function(){
        setTimeout(()=>{
            console.log(this.name)  // 화살표 함수 사용시(현재) 'Heropy' 출력 but 일반 함수 사용 시 undefined
        },2000)
    }
}
timer.timeout()

 

 

Class 상속

extends ; 상속하기

super ; 상속하여 가져옴

class Vehicle{                          // Vehicle 클래스 생성
    constructor(name,wheel){
        this.name=name
        this.wheel=wheel
    }
}
class Bicycle extends Vehicle{          // Vehicle의 자식, Bicycle 클래스 생성
    constructor(name,wheel){
        super(name,wheel)
    }
}
class Car extends Vehicle{
    constructor(name,wheel,license){
        super(name,wheel)
        this.license=license
    }
}
const myVehicle = new Vehicle('운송수단','2')
console.log(myVehicle.name)
const a=new Car('Venche','wheel','korea')
console.log(a.name)

 

ES6 ~ class 문법

class Human {
	gender = 'Human';
    printGender = () => {
    	console.log(this.gender);
        //class 내 함수에서 class내 변수에 접근하려면 this를 써야함
    }
}
class Person extends Human{
	name = 'MAX';
    gender = 'female';
    printMyName = () => {
    	console.log(this.name);
	}
}
conse person = new Person();
person.printMyName(); // MAX
person.printGender(); // female