[네번째] JavaScript - Basic / 객체 지향 언어

객체 지향 언어로서의 자바스크립트

객체지향

생성자와 new

this

상속

prototype

표준 내장 객체의 확장

배열의 확장

Object

데이터 타입

0. 객체지향

객체란 서로 연관된 변수와 함수를 그룹핑한 container 이다.

객체 내 변수를 프로퍼티/

객체 내 함수를 메소드/  라고 부른다.

객체 지향의 핵심은 객체라는 단단한 테두리 안에 서로 연관된 메소드와 변수를 모아서

정리하는 것이다.

1. 생성자와 new

생성자는 객체를 만드는 역할의 함수다.

자바스크립트에서 함수는 재사용 가능한 로직의 묶음이 아니라 객체를 만드는 창조자라고 할 수 있다.

함수를 호출할 때 new를 붙이면 새로운 객체를 만든 후에 이를 리턴한다.

일반적인 객체지향 언어에서 생성자는 클래스의 소속이다.

하지만 자바스크립트에서 객체를 만드는 주체는 함수다.

함수에 new를 붙이는 것을 통해서 객체를 만들 수 있다는 점은

자바스크립트에서 함수의 위상을 암시하는 단서이면서

자바스크립트가 추구하는 자유로움을 보여주는 사례이다.

ch) 함수에 new를 붙이게 되면 그 리턴값은 객체가 된다.

2. this(Very Important)

this는 함수 내에서 함수 호출 맥락을 의미한다.

맥락이라는 것은 상황에 따라서 달라진다는 의미인데

즉 함수를 어떻게 호출하느냐에 따라서 this가 가리키는 대상이 달라진다는 뜻이다.

함수와 객체의 관계가 느슨한 자바스크립트에서 this는 이 둘을 연결시켜주는 실질적인

연결점의 역할을 한다.

-> 메소드가 소속되어 있는 객체를 가리킨다.

함수의 경우엔 소속되어 있는 객체가 전역객체이므로 window를 가리킨다.

a.func()의 경우엔 메소드가 소속된 개체 a를 가리킨다.

3. 상속

상속이라는 기술이 나타나게 된 기원으로 부터 개념을 이해하면 될 것같다.

상속이라는 것은 근본적으로 한 번 만들어 놓은 기능을 다시 구현하지 않겠다는 의지의 표현이다.

즉, 코드를 다시 재사용 할 수 있게 하는 것이다.

만약 A라는 기능을 만들었는데 거기에 B라는 기능을 추가하고 싶다면

A를 복사해서 거기에 B기능을 추가해 넣으면 될 것이다.

하지만 여기서 작은 문제가 발생한다.

A코드가 중복되게 나타나서 코드 자체의 용량이 증가하게 되고

나중에 A코드를 수정해야할 일이 생길 경우

복사한 만큼 여러 군데를 수정해줘야 한다는 것이다.

유지보수가 헬이 되는 것이다.

그래서 똑똑한 사람들은 방법을 생각해냈다.

코드 복사를 언어 레벨에서 지원하자고.

컴퓨터에게 원본파일이 있는 곳을 알려주고,

실제 실행될 때 원본 코드를 복사해와서 내가 추가 구현한 B기능 위에

복사해 넣도록 한 것이다.

4. prototype

생성자 Sub를 통해서 만들어진 객체 o가 Ultra의 프로퍼티 ultraProp에 접근 가능한 것은

prototype 체인으로 Sub와 Ultra가 연결되어 있기 때문이다.

내부적으로는 아래와 같은 일이 일어난다.

객체 o에서 ultraProp를 찾는다.

없다면 Sub.prototype.ultraProp를 찾는다.

없다면 Super.prototype.ultraProp를 찾는다.

없다면 Ultra.prototype.ultraProp를 찾는다.

prototype는 객체와 객체를 연결하는 체인의 역할을 하는 것이다.

이러한 관계를 prototype chain이라고 한다.

5. 표준 내장 객체의 확장

Standard Built in Object

자바스크립트 개발자에게 제공되는 미리 만들어진 객체.

자바스크립트의 내장객체는 그렇게 많지 않다.

Object

Function

Array

String

Boolean

Number

Math

Date

RegExp

언어 자체가 제공하는 API - Core Engine

자바스크립트가 작동하는 호스트환경에 따라서 더 많아질 수 있다.

표준내장객체 <> 사용자 정의 객체

이 둘을 하이브리드 한...

즉 표준 내장 객체에 우리가 원하는 기능을 추가한다.

배열의 확장 1.

var arr = new Array('seoul','newyork','ladarkh','pusan','Tsukuba');

  function getRandomValueFromArray(arr){

      var index = Math.floor(arr.length*Math.random());

      return arr[index];

    }

    console.log(getRandomValueFromArray(arr));

배열의 확장 2.

(프로토타입을 통해서 모든 배열에 적용할 수 있는 메소드를 만든다.)

공통적으로 사용해야할 로직은 프로토타입을 통해서 내장객체를 확장할 수 있다.

Array.prototype.random = function(){

      var index = Math.floor(this.length*Math.random());

      return this[index];

    }

    var arr = new Array('seoul','newyork','ladarkh','pusan','Tsukuba');

    console.log(arr.random());

6. Object란?

Object란 객체는 가장 기본적인 형태를 가지고 있는 객체이다.

배열 같은 Container라고 할 수 있다.

모든 객체가 갖고 있는  Property

모든 객체의 부모

모든 객체들의 원형이 된다.

모든 객체들의 prototype이 된다.

모든 객체가 사용할 수 있는 기능이다.

모든 객체가 공통적으로 사용할 수 있는 기능을 추가할 때 사용한다.

object.method

object.prototype.method

이 둘의 차이

1번의 object 는 생성자 함수

2번의 object 는 메소드가 프로토타입 소속/

어떠한 객체를 생성하고 ...

모든 객체에 영향을 주기 때문에 신중해야한다.

7. 데이터 타입

- 원시 데이터 타입(기본 데이터 타입)(primitive type)

: 숫자 / 문자열 / 불리언 / null / undefined

: 객체가 아닌 것들.

- 객체 데이터 타입(참조 데이터 타입)

문자열을 객체처럼 사용한다?

자바스크립트에서 문자열이 원시 데이터 타입이 맞긴 한데

그 문자열을 제어하기 위해서 (작업을 하기 위해서)

문자열이 마치 객체인 것처럼 작동해야지만 제어할 수 있다.

객체지향프로그래밍이란 통일성을 유지

그래서 임시로 문자열을 객체로 만들어주는 것이다.

str = new String('coding') 의 구문을 첫번째와 두번째 사이에 작업을 내부적으로 수행하게 된다.

문자열을 객체처럼 사용하면 자바스크립트 내부에서 문자열을 임시로 객체로 바꾼다.

이 임시로 만들어지는 객체를 wrapper object 라고 한다.(래퍼객체)

-> 원시데이터 타입을 감싸준다.

JavaScript Core 부분 끝//

(생활코딩 이고잉님 감사합니다^^)

-..-