[1일1js] 자바스크립트의 상속

Lee Tae-Sung·2021년 8월 23일
0

JS

목록 보기
30/56

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Inheritance

자바스크립트의 상속

이제 OOJS에 대한 대부분의 끔찍한 세부 사항을 설명하고 이 기사에서는 "부모" 클래스에서 기능을 상속하는 "자식" 객체 클래스(생성자)를 만드는 방법을 보여줍니다.
=> ㅋㅋㅋㅋ OOJS에 대한 대부분의 끔찍한 세부 사항 ㅋㅋ
=> OOJS는 객체지향을 말함

Rhttps://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Object-oriented_JS

객체지향 프로그래밍 — 기초

객체는 당신이 모델링하고자 하고자 하는 일이나 기능 혹은 필요한 행동들을 표현하는 프로그램 코드와 그와 연관된 데이터로 구성됩니다.

=> 뭔가 진짜 멋있는 말인듯

객체는 데이터(그리고, 함수 역시)를 감싸서 ,(공식적인 표현으로는 encapsulate)

=> 캡슐화한다

객체 패키지(해당 객체를 참조하기 위한 이름. namespace 라고도 불리죠)안에 보관합니다.

=> namespace는 여러 방면에서 해당 개념에 대한 내용으로 등장한다.

객체 템플릿 정의

여기에 더불어 이 데이터를 기반으로 각 개인에 대한 간단한 소개말과 인사말을 표시할 수 있도록 할 겁니다 . 이런 과정을 추상화 — 프로그래머의 의도에 맞추어 가장 중요한 것들만을 뽑아서 복잡한 것들을 보다 단순한 모델로 변환하는 작업 - 라고 합니다.

=> 개념들에 추상화라는 개념이 등장하는데 뭔가 그림 같은데서 나오는 추상과 느낌적인거는 같은데 정확히 뭔지 몰랐다.

=> "프로그래머의 의도에 맞추어 가장 중요한 것들만을 뽑아서 복잡한 것들을 보다 단순한 모델로 변환하는 작업 " 이 개념이 가장 적절한 설명같다.

클래스로부터 객체의 인스턴스가 생성될 때는 클래스의 생성자 함수 가 호출됩니다.클래스에서 객체 인스턴스가 생성되는 일련의 과정을 인스턴스화(instantiation)라고 합니다

특별한 클래스

=> 사람을 선생님과 학생으로 구분

child 클래스 는 부모 클래스를 상속 받아서 만들어집니다.

이것은 매우 유용합니다. 이름,성별,나이 등과 같이 선생님과 학생이 공유하는 많은 공통적인 특징들을 한번만 정의해도 되기 때문이죠. 또한 서로 다른 클래스에 같은 기능을 따로 정의할 수도 있습니다. 정의된 각각의 기능은 서로 다른 namespace에 존재하기 때문입니다.

예를 들어, 학생의 인사는 "안녕, 난 [이름]이야." 와 같은 형식이 될 것입니다.
=> 아 이걸 여기선 네임스페이스

이제 자식 클래스들로부터 객체 인스턴스를 만들 수 있습니다.
=> 순간 헤깔렸는데 자식 클래스의 상속과 새로운 객체 인스턴스를 만드는 것은 다른 개념이다.

생성자로부터 새로운 객체 인스턴스가 생성되면, 객체의 핵심 기능 (프로토타입에 의해 정의됩니다. Object prototypes 글에서 자세히 다룰 것입니다.)이 프로토타입 체인에 의해 연결됩니다.

=> 프로토타입 체인에 의해 연결된다 상속되는 걸 말하는 듯

이것은 잘 작동하지만, 썩 깔끔하진 않습니다. 객체를 만들기를 원하는데, 왜 굳이 빈 객체를 만들고 내용을 채워 리턴해야 할까요? 다행스럽게도 자바스크립트는 생성자 함수의 형태로 간단한 단축 명령을 제공합니다. 하나 만들어 보도록 하죠!

=> 여기서 나오는 this가 정말 파괴적이라는 생각이 든다.
=> 근데, 이러면서 단지 this라는 단어가 여러 곳에서 다양한 역할을 하는걸 보니 불친절하다는 생각도 든다 (Vue.js에서 data를 가리키는 역할도 하기도 하는 this)

=> 일단 변수를 만들어주는 건 직관적으로 이해가 된다.
=> 왜냐허면 return 값이 없기 때문에 이 값들을 받아주는게 뭔가 필요하리라 생각된다.

=> 그런데 new는 어떤 역할을 하는거지 ???
=> 내 기억으로는 이 new는 컴퓨터한테 뭐 만들었어요!!!! 하고 알리는 역할을 한다고만 ...

=> 이제 확인 했는데 위에 obj를 이용할때도 alert안에 this를 활용함.

=> 나는 이것도 충분히 좋은 방법이라고 생각하고 있었는데

var person1 = new Person('Bob');
var person2 = new Person('Sarah');
{
  name: 'Bob',
  greeting: function() {
    alert('Hi! I\'m ' + this.name + '.');
  }
}

{
  name: 'Sarah',
  greeting: function() {
    alert('Hi! I\'m ' + this.name + '.');
  }
}

=> 결국은 이렇게 두번 작동이 되는셈이다 맘에 안든다 그런듯

=> 이를 피하기 위해, 우리는 prototype에 함수를 정의합니다(차후 학습)

=> prototype은 dna다 in my DNA!!!!!!!!
https://youtu.be/sP6y8aTE5NI

생성자 완성시키기

객체 인스턴스를 생성하는 다른 방법들

아래 공부했었던 내용

https://velog.io/@2taesung/1%EC%9D%BC1js-%EC%B4%88%EB%B3%B4%EC%9E%90%EB%A5%BC-%EC%9C%84%ED%95%9C-%EA%B0%9D%EC%B2%B4-%EC%A7%80%ED%96%A5-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8

profile
긍정적인 에너지를 가진 개발자, 이태성입니다.

0개의 댓글