1. class 상속

클래스를 생성할 때 다른 클래스를 상속 받을 수 있는데, 새로 만들어지는 클래스가 자식 클래스, 상속하는 클래스가 부모 클래스가 된다. 자바스크립트에서 상속은 extends를 쓴다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

class Person{
	constructor(name, first, second){
    this.name = name;
    this.first = first;
    this.second = second;
    }
    
    sum(){
    	return this.first + this.second
        }
}

class PersonPlus extends Person{
	avg(){
    	return (this.first + this.second)/2;
        }
}

var kim = new PersonPlus('kim',10,20);
console.log("kim.sum()",kim.sum()); //kim.sum() 30
console.log("kim.avg()",kim.avg());  //kim.avg() 15

자바스크립트는 객체지향 스크립트 언어이다.

객체지향을 내 기준에서 간단하게 설명하면 자주 사용하는 걸 구조화해놓는 것이다.

그러면 필요할 때마다 만들지 않아도 되고 이미 만들어진 걸 가져다 쓰기만 하면 된다.

여기서 미리 만들어 놓는다는 개념이 자바스크립트에서는 함수,클래스가 된다.

1. 실행 컨텍스트

특정 프로그램(크롬,엑셀…)을 실행하면 프로세스도 같이 실행되듯이 코드를 실행하면 실행 컨텍스트도 같이 실행된다. 코드 진행과 컨텍스트는 불가분의 관계이며, 컨텍스트에는드 실행 순서 등 실행에 필요한 메타 정보를 담고 있다.

컨텍스트 단위는 전역 코드에 대한 컨텍스트, 함수에 대한 컨텍스트, eval() 함수로 실행되는 코드로 나뉜다.

여기서는 전역 코드에 대한 컨텍스트, 함수에 대한 컨텍스트로 살펴 보겠다.

1. 클로저 이해

클로저는 함수 안에 있는 함수이다. 함수 안에 있어서 외부 함수, 내부 함수(클로저)라고 구분해서 부른다. 클로저의 특징은 외부 함수의 변수를 참조한다는 점이다. 예제를 한 번 살펴보자.

1
2
3
4
5
6
7
8
9

function outerFunc(){
	var x = 10;
    var innerFunc = function() {console.log(x);}
    return innerFunc;
    
var inner = outerFunc();
inner()
//result
//10