본문 바로가기
프론트엔드/JavaScript

생성자 함수 (prototype)

by step 1 2021. 5. 27.
반응형

생성자 함수는 첫글자를 대문자로 하는 파스칼 케이스로 입력되어야한다.

prototype 속성을 이용하여 각 생성자 함수에서 공통으로 사용되어지는 함수를 생성할 수 있다.

그렇게 되면 메모리관리를 효율적으로 관리할 수 있다

 

onst happy = {
    first_name: 'Happy',
    last_name: 'oh',
    getFullName: function () {
        return `${this.first_name} ${this.last_name}`
    }
}
console.log(happy)
console.log(happy.getFullName())

const amy = {
    first_name: 'Amy',
    last_name: 'Clarke',
    getFullName: function() {
        return `${this.first_name} ${this.last_name}`
    }
}

console.log(amy)
console.log(amy.getFullName())

const neo = {
    first_name: 'Neo',
    last_name: 'Smith',
    getFullName: function() {
        return `${this.first_name} ${this.last_name}`
    }
}

console.log(neo)
console.log(neo.getFullName())

// 클래스 예제
// 파스칼 케이스를 이용하여 첫문자를 대문자로 입력
function User(first, last) {
    this.first_name = first
    this.last_name = last
}
// prototyper을 통해서 getFullName이라는 함수를 참조할 수 있도록 설정
User.prototype.getFullName = function () {
    return `${this.first_name} ${this.last_name}`
} 
//  생성자 함수
//  받는 변수들은 인스턴스라고 불린다.
const happy1 = new User('happy', 'oh')
const amy1 = new User('Amy', 'Clarke')
const neo1 = new User('Neo', 'Smith')

console.log(happy1)
console.log(happy1.getFullName())
console.log(amy1)
console.log(neo1)

반응형

'프론트엔드 > JavaScript' 카테고리의 다른 글

ES6 Class  (0) 2021.05.28
this  (0) 2021.05.28
콜백 함수  (0) 2021.05.26
타이머 함수  (0) 2021.05.26
호이스팅  (0) 2021.05.26