lass
18528 단어 JavaScript 객체지향JavaScript 객체지향
constroctor vs class
- constroctor function
- 객체를 만든다.
- 객체의 초기상태를 세팅한다.
-constroctor function은 사용될 때
new 키워드를 붙이면 객체가 리턴된다.
-객체가 리턴되기 전에 객체의 속성이 기본적으로 세팅된다.
-그렇기에 new 키워드가 붙으면 Person 함수는 일반적인 함수가 아닌 생성자가 된다.
class
- 클래스란 객체를 만드는 공장이다.
- 자바스크립트의 클래스에서 생성자 함수를 구현하는 방법은 다음과 같다.
-객체가 생성될 때 객체의 초기상태를 지정하기 위한 객체가 만들어지기 직전에 실행되어지도록 약속된 함수가 바로 constructor(){}이다.
- class를 통해서 객체를 생성할 때 모든 객체가 공유하는 공통(prototype)의 객체를 생성하는 방법은 다음과 같다.
-class 내부에 함수명(){}을 만들어주면 같은 class가 공유하고 있는 객체가 만들어진다.
특정 객체 다르게 동작하는 메소드를 만드는 방법은 생성자함수에서와 동일하다.
<script>
class Person{
constructor(name, first, second){
this.name = name;
this.first = first;
this.second = second;
this.third = third;
}
sum() {
return 'prototype :' + (this.first+this.second+this.third);
}
}
const k = new Person('kim',10, 20, 30);
k.sum = function(){
return 'this :' + (this.first+this.second+this.third);
}
const m = new Person('MIN',10, 10, 10);
console.log('k', k);
console.log('kim.sum()', k.sum())
</script>
inheritance, 상속
상속이란 기존의 부모 class의 기능요소를 자식 class가 이어받아 공유하는 것을 의미한다.
-자식 class는 부모의 기능요소 뿐만 아니라 새로운 기능을 추가하여 사용할 수 도 있다.
- extends 키워드를 사용하여 기존에 가지고 있는 부모 class의 기능 요소들을 그대로 자식 class에 로딩, 즉 상속받을 수 있다.
-상속을 사용하면 중복되는 코드를 제거하기에 코드의 양을 줄일 수 있다.
-중복된 코드 수정시 그 코드를 상속받고 있는 모든 클래스에서 동시에 변경이 일어나기에 유지보수 편의성을 도모할 수 있다.
<script>
class Person{
constructor(name, first, second){
this.name = name;
this.first = first;
this.second = second;
this.third = third;
}
sum() {
return 'prototype :' + (this.first+this.second+this.third);
}
}
class PersonPlus extends Person{
avg() {
return (this.first+this.second+this.third)/2;
}
}
const k = new PersonPlus('kim',10, 20, 30);
console.log('k.sum()', k.sum());
console.log('k.avg()', k.avg());
</script>
super
- 상속받은 자녀 class의 생성자에 property를 추가하고 싶을때 부모 class에서 상속받은 부분을 super()를 사용하여 추가하고 싶은 프로퍼티를 추가한다.
- super()를 통해 부모 class의 constructor를 호출하여 부모 클래스 초기 셋팅값을 호출 할 수 있다.
- super.메소드 명()을 통해 부모 class의 메소드를 호출하여 메소드에 해당 하는 리턴 값을 반환해준다.
-부모 class에서 기능을 추가하고 싶을 때 필요한 코드를 자식 class에 중복 작성하는 것을 막아준다.
-자식 class에서 부모 class의 속성 값에 접근할 수 있다.
<script>
class Person{
constructor(name, first, second, third){
this.name = name;
this.first = first;
this.second = second;
this.third = third;
}
sum() {
return this.first+this.second+this.third;
}
}
class PersonPlus extends Person{
constructor(name, first, second, third, forth){
super(name, first, second, third);
this.forth = forth;
}
sum() {
return super.sum()+this.forth;
}
avg() {
return (this.first+this.second+this.third+this.forth)/4;
}
}
const k = new PersonPlus('kim',10, 20, 30, 40);
console.log('k.sum()', k.sum());
console.log('k.avg()', k.avg());
</script>
Author And Source
이 문제에 관하여(lass), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@minj9_6/JavaScript-객체-지향-class
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
- constroctor function
- 객체를 만든다.
- 객체의 초기상태를 세팅한다.
-constroctor function은 사용될 때
new 키워드를 붙이면 객체가 리턴된다.
-객체가 리턴되기 전에 객체의 속성이 기본적으로 세팅된다.
-그렇기에 new 키워드가 붙으면 Person 함수는 일반적인 함수가 아닌 생성자가 된다.
- 클래스란 객체를 만드는 공장이다.
- 자바스크립트의 클래스에서 생성자 함수를 구현하는 방법은 다음과 같다.
-객체가 생성될 때 객체의 초기상태를 지정하기 위한 객체가 만들어지기 직전에 실행되어지도록 약속된 함수가 바로 constructor(){}이다.
- class를 통해서 객체를 생성할 때 모든 객체가 공유하는 공통(prototype)의 객체를 생성하는 방법은 다음과 같다.
-class 내부에 함수명(){}을 만들어주면 같은 class가 공유하고 있는 객체가 만들어진다.
특정 객체 다르게 동작하는 메소드를 만드는 방법은 생성자함수에서와 동일하다.
<script> class Person{ constructor(name, first, second){ this.name = name; this.first = first; this.second = second; this.third = third; } sum() { return 'prototype :' + (this.first+this.second+this.third); } } const k = new Person('kim',10, 20, 30); k.sum = function(){ return 'this :' + (this.first+this.second+this.third); } const m = new Person('MIN',10, 10, 10); console.log('k', k); console.log('kim.sum()', k.sum()) </script>
inheritance, 상속
상속이란 기존의 부모 class의 기능요소를 자식 class가 이어받아 공유하는 것을 의미한다.
-자식 class는 부모의 기능요소 뿐만 아니라 새로운 기능을 추가하여 사용할 수 도 있다.
- extends 키워드를 사용하여 기존에 가지고 있는 부모 class의 기능 요소들을 그대로 자식 class에 로딩, 즉 상속받을 수 있다.
-상속을 사용하면 중복되는 코드를 제거하기에 코드의 양을 줄일 수 있다.
-중복된 코드 수정시 그 코드를 상속받고 있는 모든 클래스에서 동시에 변경이 일어나기에 유지보수 편의성을 도모할 수 있다.
<script>
class Person{
constructor(name, first, second){
this.name = name;
this.first = first;
this.second = second;
this.third = third;
}
sum() {
return 'prototype :' + (this.first+this.second+this.third);
}
}
class PersonPlus extends Person{
avg() {
return (this.first+this.second+this.third)/2;
}
}
const k = new PersonPlus('kim',10, 20, 30);
console.log('k.sum()', k.sum());
console.log('k.avg()', k.avg());
</script>
super
- 상속받은 자녀 class의 생성자에 property를 추가하고 싶을때 부모 class에서 상속받은 부분을 super()를 사용하여 추가하고 싶은 프로퍼티를 추가한다.
- super()를 통해 부모 class의 constructor를 호출하여 부모 클래스 초기 셋팅값을 호출 할 수 있다.
- super.메소드 명()을 통해 부모 class의 메소드를 호출하여 메소드에 해당 하는 리턴 값을 반환해준다.
-부모 class에서 기능을 추가하고 싶을 때 필요한 코드를 자식 class에 중복 작성하는 것을 막아준다.
-자식 class에서 부모 class의 속성 값에 접근할 수 있다.
<script>
class Person{
constructor(name, first, second, third){
this.name = name;
this.first = first;
this.second = second;
this.third = third;
}
sum() {
return this.first+this.second+this.third;
}
}
class PersonPlus extends Person{
constructor(name, first, second, third, forth){
super(name, first, second, third);
this.forth = forth;
}
sum() {
return super.sum()+this.forth;
}
avg() {
return (this.first+this.second+this.third+this.forth)/4;
}
}
const k = new PersonPlus('kim',10, 20, 30, 40);
console.log('k.sum()', k.sum());
console.log('k.avg()', k.avg());
</script>
Author And Source
이 문제에 관하여(lass), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@minj9_6/JavaScript-객체-지향-class
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
상속이란 기존의 부모 class의 기능요소를 자식 class가 이어받아 공유하는 것을 의미한다.
-자식 class는 부모의 기능요소 뿐만 아니라 새로운 기능을 추가하여 사용할 수 도 있다.- extends 키워드를 사용하여 기존에 가지고 있는 부모 class의 기능 요소들을 그대로 자식 class에 로딩, 즉 상속받을 수 있다.
-상속을 사용하면 중복되는 코드를 제거하기에 코드의 양을 줄일 수 있다.
-중복된 코드 수정시 그 코드를 상속받고 있는 모든 클래스에서 동시에 변경이 일어나기에 유지보수 편의성을 도모할 수 있다.
<script>
class Person{
constructor(name, first, second){
this.name = name;
this.first = first;
this.second = second;
this.third = third;
}
sum() {
return 'prototype :' + (this.first+this.second+this.third);
}
}
class PersonPlus extends Person{
avg() {
return (this.first+this.second+this.third)/2;
}
}
const k = new PersonPlus('kim',10, 20, 30);
console.log('k.sum()', k.sum());
console.log('k.avg()', k.avg());
</script>
- 상속받은 자녀 class의 생성자에 property를 추가하고 싶을때 부모 class에서 상속받은 부분을 super()를 사용하여 추가하고 싶은 프로퍼티를 추가한다.
- super()를 통해 부모 class의 constructor를 호출하여 부모 클래스 초기 셋팅값을 호출 할 수 있다.
- super.메소드 명()을 통해 부모 class의 메소드를 호출하여 메소드에 해당 하는 리턴 값을 반환해준다.
-부모 class에서 기능을 추가하고 싶을 때 필요한 코드를 자식 class에 중복 작성하는 것을 막아준다.
-자식 class에서 부모 class의 속성 값에 접근할 수 있다.<script> class Person{ constructor(name, first, second, third){ this.name = name; this.first = first; this.second = second; this.third = third; } sum() { return this.first+this.second+this.third; } } class PersonPlus extends Person{ constructor(name, first, second, third, forth){ super(name, first, second, third); this.forth = forth; } sum() { return super.sum()+this.forth; } avg() { return (this.first+this.second+this.third+this.forth)/4; } } const k = new PersonPlus('kim',10, 20, 30, 40); console.log('k.sum()', k.sum()); console.log('k.avg()', k.avg()); </script>
Author And Source
이 문제에 관하여(lass), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@minj9_6/JavaScript-객체-지향-class저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)