15강 class
- 코딩애플 내용 정리 자바스크립트 객체라고 생각하면 됨
-
object(객체)를 만드는 기계, 복사기계라고 생각하면 됨
-
비슷한 object를 많이 만들어야 할 때 class 사용
[object(객체)에 데이터를 추가하는 법]
function 기계(){
this.role = “consume”;
this.name = “snowball”;
}
얘는 중괄호 안에 this가 존재하는 이상 함수가 아니다.
클래스 역할을 대신할 수 있다.
construnctor라고도 함.
여기에서 THIS는 기계로부터 새로 생성되는 object(객체)들 = 인스턴스!
따라서 this.role = ‘consume’은 새로 생성되는 object에 {role:’consume’}을 추가해주세요 라는 말이다.
그 다음에
new 기계() 라고 선언하면 이 자리에는 object 데이터가 남게 됨
var nn = new 기계();
===
var nn = {
role : ‘consume’,
name: ‘snowball’
}
과 같음.
4줄짜리를 1줄로 줄여쓸 수 있다는 게 장점 var nn = new 기계();
var aa = new 기계();
하면 또 (객체 데이터가 똑같이 들어가 있는)객체가 생성되는 거임 = 인스턴스
객체를 100개 만들고 싶을 때 쓰면 된다
근데 지금 객체 값이 똑같잖아 이러면 안됨, 기계 업그레이드를 해야함
function 기계(인수){
this.role = 인수;
this.name = “snowball”;
}
var nn = new 기계(’consume’);
기계란 함수를 인수 자리에 consume 넣어서 실행시켜 주세요
var aa = new 기계(’sell’)
ES6문법으로 바꾸면
class Machine { //클래스 작성할 때 첫글자 대문자
constructor(인수){
this.role = 인수;
this.name = “snowball”;
}
}
new Machine(); // 선언하면 오브젝트 자료가 생성됨
var n = new Machine() 이렇게 변수에 담아서 쓰면 됨
n을 출력하면
{role : ‘consume’,
name : ‘snowball’}
클래스 Machine을 부모라고 생각하고 var n을 자식으로 생각하면
클래스가 자식n에게 유전자 role과 name을 물려줬다 .
Machine을 출력하면
class Machine{
constructor(e){
this.role = e;
this.name = ‘snowball’
}
}
이 나오는데
Machine과 함께 생성되는 비밀공간이 있다.
Machine.prototype
프로토타입을 써서 자식 object에게 데이터를 물려줄 수 있다
Machine.prototype : Machine 클래스의 유전자
프로토타입도 객체 자료 형태이기 때문에
Machine.prototype.age = ‘18’
이런식으로 기계 유전자에 새로운 데이터를 추가할 수 있다.
n을 출력하면 여전히
{
role : ‘consume’,
name:’snowball’
}
이 나오지만
n.age를 출력하면 ‘18’이 나옴
부모 유전자에 기록이 되어 있기 때문에..
클래스에 직접 추가하면 자식이 직접 가짐
프로토타입(유전자)에 추가를 하면 자식이 직접 가지지는 않지만 끌어다 쓸 수 있게됨
n.age로
자식이 부모유전자를 가지고 올 수 있는 이유!
프로토타입 체인
직접 자료를 가지고 있으면 그거 출력
없으면 부모유전자 뒤집
또 없으면 부모의 부모유전자까지 뒤짐
부모 없을 때까지 계속함
ex(
var 어레이 = [4, 2, 1];
어레이.sort();
정렬됨
이렇게 변수에 붙일 수 있는 기본 내장 함수 = 메서드
var 어레이 = new Array(4,2,1)
이렇게도 쓸 수가 있는데
new 키워드는 오른쪽에 기계로부터 자식을 뽑아준다 = 뽑은 자식이 인스턴스
Array라는 기계가 있는데 거기에서 자식을 만들어서 어레이라는 변수에 담은 거
*new Object() 객체 자료형 자식을 만드는 기계
어레이.sort()
어레이.length()
어레이.filter()
어레이.map()
부모유전자에 들어있으니까 가져다 쓸 수 있는 거임
Array라는 부모는 프로토타입에 sort함수와 length 함수를 가지고 있으니까
Array.prototype
쳐보면 유전자로 뭘 가지고 있는지 나옴
기계의 프로토타입에 정의된 함수
내가 프로토타입에 함수를 넣을 수도 있다
Machine.prototype.age = ‘18’ 이것처럼
Array.prototype.원소삭제하는함수 = function(){
console.log('ddd')
}
똑같이 함수 이름 쓰고 선언하면 됨
어레이.함수();
실행하면 콘솔 찍힘
-
- 유데미 내용 정리 class Person { name = ‘max’ // 프로퍼티 call = () ⇒ {,,,} //메서드 } 프로퍼티는 클래스에 정의한 변수 메서드는 클래스에 정의된 함수 const myPerson = new Person() new 키워드로 Person 클래스의 자식(인스턴스)을 만들 수 있음 myPerson.call() console.log(myPerson.name) constructor 함수 : 생성자 함수 클래스는 생성자함수를 만드는 편한 방법이다. 클래스로 자바스크립트 객체를 생성할 수 있다 constructor는 클래스의 객체를 생성할 때마다 실행된다 class Person { constructor(){ this.name = ‘max’ } printMyName() { console.log(this.name) } } const person = new Person(); //클래스 Person 기계에서 자식 객체를 만들어서 const person에 저장 person.printMyName(); 또 다른 클래스를 만들어서 상속받기 class Human { constructor(){ this.gender = ‘female’ } printGender(){ console.log(this.gender) } } 휴먼 클래스를 추가해주고 class Person { 을 class Person extends Human { 으로 바꿔주면 Person 클래스에서도 Human에서 정의한 프로퍼티, 메서드를 사용할 수 있다 person.printMyName(): person.printGender(); 이때 중요한 점 서브 클래스인 Person 클래스에서 생성자함수 안에 super 생성자 먼저 호출하기!! class Person extends Human { constructor(){ super(); // 상위클래스인 Human 클래스의 생성자함수 constructor를 실행시키는 것 this.name = ‘max’ this.gender = ’male’; // 이렇게 상위클래스의 프로퍼티를 다시 정의할 수 있음 } printMyName() { console.log(this.name) } } 프로퍼티는 클래스나 객체에 추가되는 변수 메소드는 클래스나 객체에 추가되는 함수 기존 구문을 es7으로 바꾸기 constructor(){ 생성자 함수 설정 this.myproperty = ‘value’ //프로퍼티와 값 설정 } mypoperty = ‘value’ 클래스에 바로 프로퍼티를 할당하는 방법 constructor 호출할 필요 x myMethod(){} myMethod = () ⇒ {} 이렇게 하면 this키워드를 사용하지 않아도 됨 class Human { gender = ‘female’ printGender = () ⇒ { console.log(this.gender) } } class Person extends Human { [name](http://this.name) = ‘max’ gender = ’male’; printMyName = () ⇒ { console.log(this.name) } } const person = new Person(); person.printMyName(): person.printGender(); 이렇게 사용하기!
