본문 바로가기

자바스크립트/객체

 (10)
객체 지향 프로그래밍의 4가지 특징 객체 지향의 개념을 설명할 때는 보통 아래의 4가지 특징을 설명한다. Encapsulation 객체 지향 프로그래밍을 하면 비슷한 변수와 함수를 한 곳에 모아 놓는다. 예를 들어 버튼을 만드는 객체를 정의할 때 버튼의 글자를 표시해주기 위한 변수와 버튼을 클릭했을 때 어떤 이벤트가 발생하게 하는 함수 등이 필요하다. 이 둘을 하나의 객체에 넣어준다. 객체 안에 변수와 메소드를 넣고 외부에서 접근을 못하게 막을 수도 있다. 이 두 가지 특성을 두고 객체 지향 프로그래밍은 Encapsulation(캡슐화)이라는 특징을 갖는다고 한다. Abstraction 리모콘 안의 장치는 복잡하지만 사용하는 버튼은 얼마 되지 않는다. 전원 버튼, 채널이나 볼륨을 조절하는 버튼 등이 있을 뿐이다. 리모콘 사용자는 밖에 나와..
자바스크립트의 this 마스터 하기 자바스크립트에서 this가 가리키는 객체는 상황에 따라 조금씩 다르기 때문에 확실히 정리하지 않으면 디버깅의 늪에서 헤어나올 수 없다. 1. 함수와 메소드 자바스크립트에서 function은 함수와 메소드로 구분한다. 어떤 객체에도 포함되지 않은 function을 함수라 하고 전역 객체가 아닌 객체에 포함된 function을 메소드라 한다. 함수 안에서의 this는 전역 객체(window)를 가리키고 function func() { console.log(this); } func(); // this = window 메소드 안에서의 this는 부모 객체를 가리킨다. var obj = { method() { console.log(this); } } obj.method(); // this = obj; 다음과 같은..
자바스크립트 객체의 속성을 확인하는 팁 객체에 뭐가 들어 있는지를 손쉽게 확인하려면 크롬의 개발자 도구 콘솔을 쓰면 된다. 그러나 이런 툴을 쓸 수 없을 때에는 다음과 같은 방법을 써보자. const obj = { value: 1, func: function() { } }; // obj에서 함수가 아닌 속성을 조회하고 싶을 때 for(let key in obj) { if(typeof obj[key] !== 'function') { console.log(key, obj[key]); } } // obj의 속성을 배열로 가져오고 싶을 때 const keys = Object.keys(obj); console.log(keys); // obj에 value 속성이 있는지 확인하고 싶을 때 if('value' in obj) { console.log('obj..
자바스크립트 new를 이용한 객체 생성 과정 Cons() { this.value = 'value'; } var c = new Cons(); 1. new는 빈객체를 만든다. { } 2. this는 이 객체를 가리키게 된다. 3. Cons 함수가 실행된 다음에 자동으로 this가 return 된다. 그리하여 c는 this를 참조하게 되고 c.value로 생성된 객체의 'value' 값을 불러올 수 있다.
자바스크립트 함수 내부의 변수는 private이다? private 구현하는 법 아래의 함수에 접근하는 방법은 function func() { var value = 'private'; } func()로 호출하는 방법 뿐이다. new 연산자를 붙여 객체를 생성할 수도 있다. const obj = new func(); 그러나 내부의 value에는 접근할 수 없다. func()로 호출하면 내부 컨텍스트에서만 실행되고 말 뿐이고 new func()로 obj에 객체로 담는다고 해도 func() 실행시 value는 'private' 값을 담고 더 이상 쓰이지 못하기 때문에 바로 가비지 컬렉터로 간다? (이거는 확신하지 못하겠다.) 다만 value를 클로저에서 가져다 쓴다면 남겨둘 수 있다. (클로저란 이미 생명 주기가 끝난 외부 함수의 변수를 참조하는 함수다.) 때문에 함수 내부의 변수는 pr..
클래스 사용법과 2가지 상속 (class, pseudoclassical) 기본 규칙 class는 사실 함수와 같다. 그러나 class 선언은 함수 선언과 달리 호이스팅이 일어나지 않는다. 때문에 선언되기 전에 사용하면 오류가 발생한다. 또 엄격 모드에서만 사용할 수 있다. class의 내부에 선언한 함수 앞에 static을 붙이면 인스턴스를 생성하지 않고도 사용할 수 있다. 대신 인스턴스를 통해서 사용할 수는 없다. class Book { static nextPage() { } } Book.nextPage(); // 가능 const book = new Book(); book.nextPage(); // 불가능 인스턴스의 속성은 일반 객체와 달리 클래스 메소드 안에 정의돼야 한다. 상속 클래스를 이용한 상속은 다음과 같다. class Human { constructor(name)..
프로토타입 체인 예제 위 예제에서의 p.number는 링크된 Cons.prototype.number를 호출하지만 아래 예제에서는 p.number에 10을 넣은 순간부터 p.number를 호출 했을 때 프로토타입 체인에 의해 밑에서부터 number 변수를 찾으면 p에 이미 number 변수를 찾을 수 있기 때문에 10이 호출된다.
객체지향 프로그래밍이란? 자바스크립트에서 객체를 생성하는 4가지 방법, 프로토타입은 무엇이고 왜 사용해야하는가? 객체지향 프로그래밍이란? 철학적인 개념과 닮아 있어 어렵게 느껴지는 것 같다. 객체를 쉽게 말하자면 세상 곳곳에 있는 사물이라고 비유할 수 있다. 예를 들어 책에는 책만의 네모진 형태가 있고, 종이로 돼 있고, 겉 표지가 있고, 한 장씩 넘길 때마다 새로운 내용이 나오는 등의 공통된 속성이 있다. 여기에 세부적으로 크기는 어떤지, 종이 재질은 어떤지, 디자인은 어떤지, 내용은 어떻느냐에 따라서 개별 책들이 정의된다. 프로그래밍에서도 공통으로 묶을 수 있는 요소들이 존재하고 개별 사물들이 그러하듯 이 공통된 요소들에 저마다의 다른점들을 붙여 다양한 것들을 만들 수 있다. 책을 정의할 수 있는 공통된 요소들과 각 책을 구분할 수 있게 해주는 요소들이 합쳐져 개별 책이 되는 것이다. 전자는 모든 책에 적용되는..

티스토리툴바