boseok-note
  • README
  • javascript
    • 함수형 자바스크립트
    • core
      • 이벤트루프 (Event Loop)
      • boxing, unboxing
      • prototype
      • 실행컨텍스트
      • hoisting
      • 클로져(Closure)
      • arguments
      • Scope - 스코프 - 유효범위
    • api
      • Promise
      • Fetch API
      • worker-api
      • Web API
    • lib
      • rxjs
        • rxjs
    • 호스트객체?
    • es6
      • var-let-const
      • template-literals
      • async-await
    • tip
      • array-like
      • Object literal, new Object
    • dom-api
      • HTML Element get Text
      • get-size
      • scrollToBottom
    • for in, for of 차이
    • storage
    • Constructor (생성자)
    • Javascript
    • module
  • front-end
    • vuejs
      • vue-rx
      • README
        • 1-start
        • 2-basic-component
        • 3-add-component
        • 4-advanced-component
        • 5-dynamic-methods-event
        • 6-internal-process
      • next-tick
      • compare-react
      • v-model-with-props
      • v-for
      • vuejs
      • vuex
    • browser
      • dom
      • cssom
      • reflow, repaint
      • 렌더링 트리(Rendering Tree)
      • web-standard
    • css
      • text-ellipse
      • white-space
      • css layout
    • Pre-render
    • react-native
      • react-native
    • 최적화 관련
    • reactjs
      • performance
      • reactjs
    • CSR, SSR
  • server-side
    • letsencrypt
    • auto-deploy
    • nlb
    • Certbot, aws https setting with wildcard
    • mysql
    • node.js
      • npm
        • npm install
      • node-dynamodb
      • node에서 간편하게 letsencrypt를 사용하여 https 구현하는 방법
    • Docker
    • nginx
    • Amazon Web Service
    • nginx https 설정
  • design-pattern
    • observer
    • flux
    • README
  • coop
    • git
      • gitignore
      • remote
      • ssh key 사용하기
      • password
      • credential
      • git
  • cs
    • port
    • data-structure
      • tree
      • binary-tree
    • network
      • home-router
      • tcp-udp
      • http
    • process
  • etc
    • sync-async
    • seo
      • seo
      • SEO Check Point
    • rest
    • unity
      • methods
Powered by GitBook
On this page
  1. javascript

Constructor (생성자)

function Boseok(age) {
    this.age = age;
}

그냥 함수로 호출하는것과, new 연산자로 객체를 생성하는것에 무슨 차이가 있는지 볼까여?

const boseok = Boseok(123);
console.log(boseok.age); //error

당연히 예상처럼 함수에 리턴하는게 없으므로 boseok객체는 undefined입니다.

그래서 age를 참조할수없는 에러를 뿜어냅니다.

하지만 new 연산자를 사용하면 다르게 작동합니다.

const boseok = new Boseok(123);
console.log(boseok.age); //123

new 연산자를 사용하면 함수를 생성자로 호출합니다. 명시적인 return 구문이 없다면, this가 가리키는 객체를 반환합니다.

new Boseok()은 Boseok.prototype을 상속받은 new 연산자를 사용하여 Boseok 객체의 인스턴스를 생성합니다.

그래서 또 다른 방법으로 인스턴스를 생성하는 방법은 아래와 같습니다.

Object.create(Boseok.prototype)

생성자에 객체를 만들어서 명시적으로 return하면 new 연산자에 관계없이 동작하는 생성자를 만들 수 있습니다.

new 키워드가 빠졌을때 발생하는 this 참조 에러를 예방할 수 있습니다.

팩토리를 사용했을때는 위처럼 장점도 있지만, 단점도 존재합니다.

prototype으로 메소드를 공유하지 않으므로 메모리를 좀 더 사용한다.
팩토리를 상속하려면 모든 메소드를 복사하거나 객체의 prototype에 객체를 할당해 주어야 한다.
new 키워드를 누락시켜서 prototype chain을 끊어버리는 것은 아무래도 언어의 의도에 어긋난다.
PreviousstorageNextJavascript

Last updated 6 years ago