일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
- 함수형
- 웹팩
- relatedTarget
- 로컬터널
- webpack
- 화살표 함수
- 번들러
- debounce
- pushstate
- 이터러블
- 이벤트 루프
- 로드마크
- 실행 컨택스트
- Lexical environment
- AbortController
- JavaScript
- Call stack
- 렉시컬 환경
- 호출 스택
- 호이스팅
- localtunnel
- 자바스크립트
- 마이크로태스크
- 넘블
- fetch 취소
- 클론코딩
- 매클로태스크
- hoisting
- 비동기 작업
- 유사배열
- Today
- Total
내가 보려고 만든 개발 공부 일지
Javascript - 프로토타입? 본문
Javascript 객체
먼저, 자바스크립트에서 객체란 무엇인지부터 간략히 정리해보자.
js 에서 모든 객체는 언제나 함수에 의해 생성된다.
function Person(){} // 함수 정의
var kim = new Person() // 함수로 객체를 생성
이런식으로 말이다.
흔히 쓰는 var obj = {} 이런 코드도 함수랑 전혀 상관없어 보이지만 사실 var obj = new Object() 와 같은 코드다. (Object는 js 기본 함수)
Object 뿐 아니라 Function, Array 도 모두 마찬가지다 (new Function(), new Array())
즉, js에서는 기본타입인 number, string, boolean 과 특수값 null, undefined 빼고는 모두 객체다.
사용자가 정의한 함수도 객체, new 로 생성된 것도 객체.
Prototype
자바스크립트는 prototype 기반 언어이다. 이 prototype으로 자바의 클래스처럼 상속을 흉내낼 수 있다.
(클래스 문법이 생기긴했지만 여전히 기반은 prototype이다.)
예제)
function Person(){}
Person.prototype.eyes = 2;
Person.prototype.nose = 1;
var kim = new Person();
var ham = new Person();
kim.eyes //--> 2
ham.eyes //--> 2
ham.nose //--> 1
위 예제에서 kim 과 ham 은 둘다 eyes 와 nose를 Person 의 prototype 에서 정의해놓은 값을 그대로 쓸수 있게된다.
근데 만약 Person.prototype.eyes = 2 가 아니라
function Person(){ this.eyes = 2 } 이렇게 하면, new를 통해 객체를 만들때마다 메모리에 eyes가 할당되는데,
prototype은 eyes 값을 공유해서 쓰는것이기 때문에 메모리에 한번 할당되면 new로 객체를 계속 생성해도 메모리에 계속 할당되지 않는다.
(생성된 객체들은 모두 자신을 만든 함수의 prototype 객체의 속성을 공유해서 쓸 수있다.)
상속을 흉내낸다는게 이렇게 값을 공유해서 쓰는 방식을 두고 말하는 것이다.
'Javascript' 카테고리의 다른 글
Javascript - Prototype object (0) | 2021.07.16 |
---|---|
Javascript - in vs hasOwnProperty (0) | 2021.07.12 |
call() 과 apply() 의 this 바인딩 (0) | 2021.07.02 |
Falsy / Truthy 한 값 (0) | 2021.07.02 |
Tagged Templates (0) | 2021.07.02 |