[모던 자바스크립트 Deep Dive] 19. 프로토타입

프로토 타입

 

19. 객체지향 프로그래밍

• 실체는 특징이나 성질을 나타내는 속성을 가지고 있고, 이를 통해 인식, 구별할 수 있다
• 다양한 속성중에서 프로그램에 필요한 속성만 간추려 표현하는 것을 추상화라 한다

// 이름과 주소 속성을 갖는 객체

const person = {
    name: 'Lee',
    address : 'Seoul'
};

console.log(person);
 // {name: "Lee" , address: "Seoul"}

 

• 속성을 통해 여러 개의 값을 하나의 단위로 구성한 복합적인 자료구조를 객체라 하며 객체 지향 프로그래밍은 독립적인 객체의 집합으로 프로그래밍을 표현하려는 프로그래밍 패러다임이다
• 객체의 상태를 나타내는 데이터와 상태 데이터를 조작할 수 있는 동작을 하나의 논리적인 단위로 묶어 생각한다. = 상태 데이터와 동작을 하나의 논리적인 단위로 묶은 복합적인 자료구조라고 할 수 있다.

const circle = {
    radius : 5, 
    getDIameter(){
        return 2 * this.radius;
    },

    //원의 둘레 
    getPermeter(){
        return 2 * MathPI + this.radius;
    },
    // 원의 널이
    getArea()
    {
        return Math.PI * this.radius ** 2;
    }
}

console.log(circle);

console.log(circle.getDIameter());
console.log(circle.getPermeter());
console.log(circle.getArea());

19.2 상속과 프로토타입

• 상속은 객체지향 프로그래미의 핵심 개념으로 어떤 객체의 프로퍼티 또는 메서드를 다른 객체가 상속받아 그대로 사용할 수 있는 것을 말한다

• 상속을 통해 불필요한 중복을 제거, 자바스크립트는 프로토타입을 기반으로 상속을 구현한다.

// 생성자 함수
function Circle(radius) {
    this.radius = radius;
}

//circle 생성자 함수가 생성한 모든 인스턴스가 getarea 메서드를 
//공유해서 사용할 수 있도록 프로토타입에 추가한다
//프로토타입은 circle 생성자 함수의 prototype 프로퍼티에 바인딩되어 있다

Circle.prototype.getArea = function(){
    return Math.PI * this.radius ** 2;
};

//인스턴스 생성
const circle1 = new Circle(1);
const circle2 = new Circle(2);

//circle 생성자 함수가 생성한 모든 인스턴스는 부모 객체의 역할을 하는 
//프로토타입 Cicle.prototype으로부터 getArea 메서드를 상속 받는다.
// 즉 Circle 생성자 함수가 생성하는 모든 인스턴스는 하나의 getArea 메서드를 공유한다
console.log(circle1.getArea === circle2.getArea); //true

console.log(circle1.getArea());
console.log(circle2.getArea());

9.12 정적 프로퍼티/메서드

• 정적 프로퍼티/메서드는 생성자 함수로 인스턴스를 생성하지 않아도 참조/ 호출할 수 있는 프로퍼티/메서드를 말한다

// 생성자 함수

function Person(name){
    this.name = name;
}

// 프로토타입
Person.prototype.sayHello = function(){
    console.log(`Hi! MY name is ${this.name}`);
}

// 정적 프로토타입
Person.static.Prop = 'static prop';

//정적 메서드

Person.staticMethod = function(){
    console.log('staticMethod');
};

const me = new Person('Lee');

// 생성자 함수에 추가한 정적 프로퍼티/메서드는 생성자 함수로 참조/호출된다.
Person.staticMethod();

me.staticMethod() //error

• 생성자 함수가 생성한 인스턴스는 자신의 프로토타입 체인에 속한 객체의 프로퍼티/메서드에 접근할 수 있다
• 하지만 정적 프로퍼티/메서드는 인스턴스의 프로토타입 체인에 속한 객체의 프로퍼티/메서드가 아니므로 인스턴스로 접근할 수 없다.

function foo(){}

// 프로토타입 메서드
// this를 참조하지 않는 프로토 타입 메서든 정적 메서드로 변경하여도 동일한 효과를 얻을 수 없다

foo.prototype.x = function(){
    console.log('x');
};

const foo = new foo();
// 프로토타입 메서드를 호출하려면 인스턴스를 생성해야 한댜.

foo.x(); //x

// 정적 메서드
foo.x = function(){
    console.log('x');
};

//정적 메서드는 인스턴스를 생성하지 않아도 호출할 수 있다.
foo.x() ;

• 프로토타입 프로퍼티/메서드를 표기할 때 prototype을 #으로 표기하는 경우도 있다

 

19.13 프로퍼티 존재 확인

in 연산자 

• 객체 내에 특정 프로퍼티가 존재하는지 여부를 확인한다. in 연산자의 사용법은 다음과 같다
• key in object
• key: 프로퍼티 키를 나타내는 문자열
• object :  객체로 평가되는 표현식

const person = {
    name : 'Lee',
    address : 'Seoul'
};

//person 객체에 name 프로퍼티가 존재한다
console.log('name' in person); //true
//oerson 객체에 address 프로퍼티가 존재한다
console.log('address' in person); //true
//person 객체에 age 프로퍼티가 존재하지 않는다
console.log('age' in person); // false

• Reflect.has 메서드는 in 연산자와 동일하게 동작한다
• Object.prototype.hasOwnProperty 메서드를 사용해도 객체에 특정 프로퍼티가 존재하는지 확인할 수 있다
• 프로퍼티 키가 객체 고유희 프로퍼티 키인 경우에만 true 아니면 false를 반환한다

19.14 프로퍼티 열거

for..in 문

• for (변수선언문 in 객체) {...}
• for..in 문은 객체의 프로퍼티 개수만큼 순회하며 for..in 문의 변수 선언문에서 선언한 변수에 프로퍼티키를 할당한다
• 상속받은 프로토 타입의 프로퍼티까지 열거한다.

const person = {
    name : 'Lee',
    address : 'Seoul'
};

for(const key in person){
    console.log(key + ":" + person[key]);
}

• for..in 문은 객체의 프로토 타입 체인 상에 존재하는 모든 프로토타입의 프로퍼티 중에서 프로퍼티 어트리뷰트[[Enumerable]]의 값이 true인 프로퍼티를 순회하며 열거한다.
• for..in 문은 프로퍼티 키가 심벌인 프로퍼티는 열거하지 않는다.
• Object.keys 메서드는 객체 자신의 열거 가능한 프로퍼티 키를 배열로 반환한다.
• Object.values 메서드는 객체 자신의 열거 가능한 프로퍼티 값을 배열로 반환한다.
• Object.entries 메서드는 객체 자신의 열거 가능한 프로퍼티 값의 쌍의 배열을 배열에 담하 반환한다.