[JavaScript] 프로토 타입

자바 스크립트에서 자료를 기본 자료형과 객체 자료형으로 구분한다.

• 기본 자료형
  • 숫자
  • 문자열
  • 불
• 객체 자료형
  • 함수
  • 배열
  • 이외 전부

 

객체 자료형

속성과 메소드를 가지면 객체이다.

배열도 객체이다. 배열에 속성을 지정한 후 확인 해보자.

// 배열 선언
const a = []

// a에 속성 sample을 10으로 초기화
a.sample = 10

// a의 속성 sample 출력
console.log(a.sample)

배열 a의 타입? object

 

함수도 객체이다. 함수에 속성을 지정한 후 확인 해보자.

// 함수 f 선언
function f() { }

// f에 속성 지정
f.sample = 10

// f 속성 출력
console.log(f.sample)

 

기본 자료형

객체가 아닌 것을 기본 자료형이라고 부른다.

객체가 아니므로 속성을 가질 수 없다. 숫자에 속성을 지정해보자.

const c = 777

c.sample = 10

console.log(c.sample)

c.sample에서 속성이 추가 된것 같지만 안된다.

문자열과 불 자료형에도 속성을 추가해봐도 마찬가지이다.

 

기본 자료형을 객체로 생성

기본 자료형 숫자, 문자열, 불을 객체로 생성 가능하다.

const 이름 = new 객체자료형()

/**** EXAMPLE ****/
new Number(10)
new String('test')
new Boolean(true)

이렇게 생성된 객체는 속성과 메소드를 가질 수 있다.

 

const n = new Number(777)
n.sample = 10

console.log(n.sample)
console.log(n)
console.log(n.valueOf())

 

 

 

문자열의 length 속성도 사용할 수 있는데 문자열이 기본자료형일까?

이것은 일시적 승급으로 기본 자료형의 속성과 메소드를 호출할 때 일시적으로 승급시키기 때문.

기본 자료형의 일시적 승급

승급은 일시적이라 기본 자료형에 a.sample=10으로 하여 추가된 것처럼 보이지만 다시

a.sample을 호출하면 이미 추가했던 속성을 사라졌기에 출력이 안되는 것 입니다.

const a = 777
a.sample=10

console.log(a.sample)

 

프로토타입으로 속성, 메소드 추가

일시적 승급이 아닌 숫자 객체 전체에 어떤 속성과 메소드를 추가할 수 있다.

어떤 객체의 prototype 속성을 사용하여 객체 전용 옷(틀)을 바꿀 수 있다.

객체자료형.prototype.메소드이름 = function() {
 ...
}

 

예를 들어 숫자형에 sample 속성을 추가해보자.

Number.prototype.sample = 10

const i = 777

console.log(i.sample)

 

프로토타입에 메소드를 추가하여 활용해보자.

자바 스크립트에 제곱 연산자(**)가 있어 2 ** 3 = 8로 제곱이 가능하다.

이를 활용하여 숫자 자료형에 n제곱하는 메소드를 추가해본다.

Number.prototype.power = function (n=2) {
    return this.valueOf() ** n
}

const a = 2
console.log(a.power(2))
console.log(a.power(3))
console.log(a.power(10))

 

 

배열과 스트링에 indexOf() 메소드를 사용하여 위치를 구할 수 있다.

존재한다면 그 시작 인덱스를 반환하고 존재하지 않는다면 -1을 반환한다.

이것을 이용하여 문자열, 배열에 해당 값이 있는지 없는지 true, false로 반환하는 contain 메소드를 만든다.

String.prototype.contain = function(data) {
    return this.indexOf(data) >= 0
}

Array.prototype.contain = function(data) {
    return this.indexOf(data) >= 0
}

const a = '안녕하세요'
console.log( a.contain('세') )
console.log( a.contain('새') )

const arr = [1, 2, 3, 4, 5]
console.log( arr.contain(1) )
console.log( arr.contain(6) )