document인 html을 JavaScript가 이해할 수 있게, 컨트롤할 수 있게 object(객체)로 만들어 모델링 해주는 것
브라우저에 기본적으로 내장되어 있는 객체 즉, API다.
API = Application Programming Interface
여기서 interface 란 말 자체가 프로그램 간의 소통, interact를 도와주는 의미가 묻어있다고 생각하면 쉽다.
html 문서를 javascript와 상호작용하게끔 object 객체로 파싱하여 dom을 생성하는 것
this 객체
// 예약어에 가깝고, data type이 object이다
this = 이것, 여기.. => 뜻 그대로 사용하는 위치에 따라서 결과물이 달라진다.
console.log(this) 출력해보면,
브라우저가 가지고 있는 객체를 다 보여준다.
DOM 객체 -> this (window)
console.log(this === window) // true 가 나온다.
사실 아직 이 this 개념이 모호해서,,, 차차 하다보면 깨닫겠지..
call site 내가 실행하는 코드 내에서만 작동한다
this.name ="yjlee"
console.log(this)
function lyj(){
console.log(this.name)
}
lyj()
function lyjkr(){
this.name = "yjlee2"
} // 코드블럭 안에 있어서 window가 this.name 값이 다시 할당된 걸 못봄
console.log(this) // name 그대로 yjlee 유지
console.log(lyjkr) // name yjlee2 로 업데이트됨
new 라는 키워드가 함수를 객체로 만들어준다.
let u = new lyjkr()
console.log(u)
콘솔 결과, 함수가 object 형태 {key : value} 로 출력되는 걸 확인할 수 있다.
위의 간단한 예시에서처럼,
name처럼 안쪽의 key는 같지만 value값이 계속 달라진다고 가정했을 때,
일일이 바꿔주니까 귀찮으니, 틀에 맞춰서 찍어낼 수 있도록 만들어준다. 그래서,
=> class / object 개념이 등장한다.
class 나 function으로 서로 연관 있는 데이터를 한데 묶어놓는 개념이다.
class에는 속성 field 와 행동 method가 있다.
class = template 같은 것 / 붕어빵 만들 수 있는 틀 같은 존재 / 딱 한번만 선언
object = class라는 틀을 이용해서 새로운 instance를 생성하면 object가 되는 것 / 여러번 생성 가능
tip!
class는 정의만 한 거라, 데이터가 들어있지 않다.
따라서, 실제 메모리에 올라가진 않지만, 실제로 데이터를 넣으면 그때서야 object도 메모리에 올라가게 된다.
1. function 으로 class를 만들어보자.
// block10이라는 class 형태를 만들어줌
function block10(hash,height){
this.hash = hash;
this.timestamp = 1641519318
this.height = height
this.Difficulty = 4
this.Nonce =4006
}
let p = new block10('00001',0); // new 라는 키워드로 새로운 객체를 할당하고, 다른 value 넣기 가능
let o = new block10('00002',1);
let i = new block10('00003',2);
console.log(p)
console.log(o)
console.log(i)
2. class로 class를 만들어보자.
point1. function 대신 class라는 키워드를 이용하자 point2. function( ) 은 매개변수를 전달할수 있지만 class는 그런 게 없으므로 constructor (생성자)를 이용하자 * constructor 생성자 : 우리가 나중에 오브젝트를 만들 때 필요한 데이터를 전달해주는 역할!!
point3. 속성을 넣는 field section과 행동을 나타내는 method section을 따로 구분함
class Person{
constructor(name,age){
// 인자로 전달받은 데이터를 이 class에 존재하는 2가지 field에 전달된 데이터를 할당해줌
this.name = name;
this.age = age;
}
speak(){
console.log(`${this.name}:hello!`)
} // 이 class에 있는 this.name을 호출하면서 인사하는 class
}
const lyj = new Person('leeyj',30); // 새로운 object 만들 땐 new 라는 keyword 쓰기
console.log(lyj.name);
console.log(lyj.age);
lyj.speak();
출력
class는 상속과 다형성을 지녔다고 한다.
즉, 한 클래스를 여러개로 복사해서 쓸 수 있단 의미인데,
상속은 부모 class를 물려받는다는 얘기는 오케이. 근데 다형성이 무슨 말인가 해서 알아보니, 필요한 함수만 재정의해서 쓰는 경우를 말한다고 한다. 같은 종이여도 암수가 다른 것처럼 말이다.
- 상속 : 만들 class명 extends 부모 class명
- 다형성 : 부모와 중복되는 method를 쓰고 싶다면, super.부모 method를 적어주고, 그 이후에 내가 넣고 싶은 필요한 부분만 재정의해준다. (overriding!!)
class Shape {
constructor(width,heigth,color){
this.width = width;
this.height = height;
this.color = color;
}
draw(){
console.log(`drawing ${this.color} color of`);
}
getArea(){
return this.width * this.height;
}
}
// 상속
class Rectangle extends Shape {}
// extends 키워드를 이용하며 shape이란 class를 연장한다. 동일한 것 재사용 가능
// 다형성
class triangle extends Shape {
draw(){
super.draw(); // super라는 키워드로 부모 method 호출 가능
console.log('newly added')
}
getArea(){
return (this.width*this.height)/2;
} // 필요한 함수만 재정의해서 쓸 수 있다 => overriding
결과물
const rectangle = new Rectangle(20,20,'blue')
rectangle.draw() // drawing blue color of
console.log(rectangle.getArea()) // 400
const triangle = new Triangle(20,20,'red')
triangle.draw() // drawing red color of (부모 shape에서 가져옴)
// newly added (새로 추가된 shape)
console.log(triangle.getArea()) // 200
