프로토타입/상속

1. 상속

상속은 객체 지향 프로그래밍의 핵심 개념 중 하나로, 기존 객체(부모 또는 슈퍼 클래스)의 속성과 메서드를 새로운 객체(자식 또는 서브 클래스)가 상속하고 확장하는 과정을 나타냅니다. 자바스크립트는 프로토타입 기반 언어이며, 상속은 프로토타입 체인을 통해 이루어집니다. 객체는 다른 객체의 프로토타입을 상속하며, 이를 통해 속성과 메서드를 공유합니다.

프로토타입(Prototype)은 자바스크립트 객체 지향 프로그래밍의 중요한 개념 중 하나로, 객체 간의 상속 및 속성 및 메서드 공유를 가능하게 하는 메커니즘입니다.

프로토타입(prototype)
- 모든 객체는 프로토타입이라는 객체를 가지고 있음
- 모든 객체는 프로토타입으로부터 프로퍼티와 프로퍼티 메소드를 상속받음
- 모든 객체는 최소한 하나 이상의 다른 객체로부터 상속을 받으며 상속되는 정보를 제공하는 객체를 프로토타입이라고 함

    <script>
        function Dog(color, name, age){
            this.color = color
            this.name = name
            this.age = age
        }

        const Rucy = new Dog('white', '루시', 14);
        console.log(`이름: ${Rucy.name}`);
        console.log(`색상: ${Rucy.color}`);
        console.log(`나이: ${Rucy.age}`);
        
        // Rucy에 family 프로퍼티 추가
        Rucy.family = '포메라니안';
        Rucy.getFamily = function() {
            return this.family;
        }
        console.log(`종: ${Rucy.family}`);
        console.log(`getFamily: ${Rucy.getFamily()}`);

        console.log('---------------------')

        const PPomi = new Dog('white', '뽀미', 14);
        console.log(`이름: ${PPomi.name}`);
        console.log(`색상: ${PPomi.color}`);
        console.log(`나이: ${PPomi.age}`);
        
        // console.log(`종: ${PPomi.family}`);
        // console.log(`getFamily: ${PPomi.getFamily()}`);
        // PPomi 객체에는 추가되지 않은 프로퍼티여서 
        // Uncaught TypeError: PPomi.getFamily is not a function 에러 발생.
	
    	// 프로토타입으로 프로퍼티 추가
        Dog.prototype.owner = '김사과';
        Dog.prototype.run = function(){
            return this.name + '달립니다!';
        }
		
        
        // 두 객체 모두 잘 나옴
        console.log(`소유자: ${Rucy.owner}`)
        console.log(`run: ${Rucy.run()}`)

        console.log(`소유자: ${PPomi.owner}`)
        console.log(`run: ${PPomi.run()}`)
    </script>

2. 상속 받을 수 있는 내장 객체들

(1) Math 객체

수학에서 자주 사용하는 상수와 함수들을 미리 구현한 자바스크립트 표준 내장 객체

min(): 가장 작은 수를 반환. 매개변수가 전달되지 않으면 Infinity를 반환
max(): 가장 큰 수를 반환. 매개변수가 전달되지 않으면 -Infinity를 반환
round(): 소수점 첫번째 자리에서 반올림하여 그 결과를 반환
floor(): 소수점을 버림
ceil(): 소수점을 올림
random(): 0보다 크거나 같고, 1보다 작은 무작위 소수를 반환
toFixed(n): 소수점 n번째 자리까지 남기고 반올림

        console.log(Math.min()); // Infinity

        console.log(Math.max()); //-Infinity

        console.log(Math.min(1,10,-10,1000,0,'-100')) // -100 (자동 형변환해서 비교)

        console.log(Math.min(1,10,-10,1000,0,'마이너스백')) // NaN

        console.log(Math.max(1,10,-10,1000,0,'-100')) // 1000

 

        console.log(Math.round(-10.5)) // -10

        console.log(Math.round(-10.51)) // -11

        console.log(Math.floor(-10.5)) // -11

        console.log(Math.floor(-10.51)) // -11

        console.log(Math.ceil(-10.5)) // -10

        console.log(Math.ceil(-10.51)) // -10

// 소수점 2번째 자리로 반올림하기
// toFixed
        let num1 = 5.678;
        num1 = num1.toFixed(2);
        console.log(num1)  // 5.68

// 1~9 사이 랜덤 숫자 뽑기
        const ran = Math.random();
        console.log(ran);
        ran2 = ran*10.
        console.log(Math.ceil(ran2))

(2) String 객체

const str1 = 'JavaScript';
const Str2 = new String('JavaScript')

str1 == str2;       // true
str1 === str2;      // false

- `str1`은 원시 데이터 유형(String)이고 `'JavaScript'`라는 문자열 값을 직접 나타냅니다.
- `str2`는 String 객체를 생성하는 생성자 함수 `String`을 사용하여 생성된 객체입니다. 이 객체는 `'JavaScript'`라는 문자열을 값으로 가지고 있습니다.
- `str1 == str2`: 이 비교는 값의 동등성을 검사합니다. 두 피연산자가 다른 유형이지만 JavaScript는 값을 비교할 때 자동으로 형 변환을 수행합니다. 따라서 `str2`를 원시 문자열로 형 변환하고 그 결과가 `'JavaScript'`이므로 `str1`과 값이 같다고 판단합니다. 따라서 `true`를 반환합니다.
- `str1 === str2`: 이 비교는 값의 일치를 검사하며, 데이터 유형과 값이 정확하게 일치해야 합니다. `str1`은 원시 문자열이고 `str2`는 String 객체이므로 데이터 유형이 다릅니다. 따라서 일치하지 않고 `false`를 반환합니다.

.length: 문자열의 길이를 반환하는 프로퍼티
indexOf(): 특정 문자나 문자열이 처음으로 등장하는 위치를 인덱스로 반환
charAt(): 특정 문자열에서 전달 받은 인덱스에 위치한 문자를 반환
includes(): 특정 문자열에서 전달 받은 문자열이 포함되어 있는지 여부를 반환
substring(): 전달 받은 시작 인덱스부터 종료 인덱스 직전까지 문자열을 추출
replace(): 원본 문자열의 일부를 전달 받은 문자열로 치환
split(): 구분자를 기준으로 나눈 후 나뉜 문자열을 하나의 배열에 저장
trim(): 문자열의 앞 뒤 공백을 제거
toUpperCase(): 문자열을 모두 대문자로 변환
toLowerCase(): 문자열을 모두 소문자로 변환

        const str1 = '안녕하세요. JavaScript!'

        const str2 = new String('안녕하세요. JavaScript!')

        console.log(str1.indexOf('a')); // 앞에서부터 찾는다

        console.log(str1.lastIndexOf('a')); //뒤에서부터 제일 먼저 만나는 요소의 인덱스 위치

        const str3 = '김사과,오렌지,반하나,이메론,배애리,채리';

        const students = str3.split(',');

        console.log(students);

        // ['김사과', '오렌지', '반하나', '이메론', '배애리', '채리']

(3) Date 객체

날짜, 시간 등을 쉽게 처리할 수 있는 내장 객체

- 연도(year)
2자리로 표기 할 시: 23 -> 1923년
4자리로 표기 할 시: 2023 -> 2023년

- 월(month)
✔️ 0 ~ 11로 표기함. 0 -> 1월, 11 -> 12월

new Date(): 현재 날짜 시간을 저장한 객체를 생성
    const 상수명 = new Date(); // 현재 날짜 시간
new date('날짜 문자열'): 해당 특정 날짜와 시간을 저장한 객체가 생성
    예)new Date('2023-10-19 00:00:00');  // 년, 월, 일, 시, 분, 초, 밀리초
new Date(밀리초): 1970년 1월 1일 0시 0분 0초를 기준으로 '해당 밀리초만큼 지난 날짜와 시간'을 저장한 객체가 생성
    예)new Date(24353523242);

(4) window 객체

웹 브라우저의 창이나 탭을 설정하기 위한 객체들이며, 웹 브라우저는 window 객체를 이용하여 브라우저 창을 표현할 수 있음

    window.alert()   // 사용자가 ok(확인) 버튼을 누를 때까지 대기
    window.confirm() // 사용자가 확인을 누르면 true, 취소를 누르면 false값 전달
    window.prompt()  
    // 사용자가 텍스트를 입력할 수 있는 입력창을 띄움. 입력한 텍스트 값을 전달하거나 취소하면 null값 전달.