this와 함수 호출
- this가 함수단에서 호출했을 때는 window에 저장된다.
- 클래스에서 사용될때는 객체단에서 사용(소속)~
this가 여러군데에서 사용된다! 잘 알고 있어야 한다.
객체 자기자신을 가리킨다 = 주소를 들고있따.
일반 객체의 메서드에서 this는 메서드를 호출한 객체가 된다. 하지만 this의 속성은 메서드를 호출할 때뿐 아니라 일반함수를 호출할 때도 만들어지며, 이벤트 리스너가 호출될 때에도 this의 속성이 만들어진다. 문제는 this 속성에 저장되어 있는 값이 동일한 값이 아니라는 것이다.
-> 다양한 경우에 this에 어떤 값이 들어가는지 판단해서 사용할 줄 알아야 한다.
1) 일반함수에서 this : 전역객체인 window가 this를 저장한다.
var data=10;
function outer(){
this.data=20;
data=30;
document.write(data); //출력 30
document.write(this.data); //출력 30
document.write(window.data); //출력 30
}
outer();2) 일반 중첩 함수에서 this : 전역객체인 window가 저장
3) 이벤트 리스너 this : 이벤트리스너에서 this는 이벤트를 발생시킨 객체가 된다!
4) 메서드에서 this : 메서드에 this는 객체 자기 자신이 저장된다.
5) 메서드 내부의 중첩함수에서의 this : 객체가 아닌 window가 된다.
this의 상황에 따른 값 정리!
- 함수호출()과 new 함수호출()
//user.userName은 신은혁이 나오겟죠
함수단위 코딩과 클래스단위 코딩
- 함수단위 코딩 : 함수단위로 만들어진 코드들도 클래스와 만든 것 처럼 동일한 효과를 지닐 때가 있다.하지만, 함수형태로 만들어진 것은 우선 모든 기능이 함수내에 존재한다는 것이다. 언뜻 보면 클래스처럼 보이긴하나 this도 없고 소문자로 시작한다. 결정적인 것은 new를 사용하지 않고 단ㄴ순히 함수호출이 이뤄진다.
이것의 단점은 호출할때마다 내부에 선언된 중첩함수가 만들어지며(메모리 많이 사용) 외부에서 내부속성과 함수를 접근할 수 없다는 것이다!
함수로 만들어졌을때 내부 중첩함수는 외부에서 접근할 수 없지만 아래의 방식(return문으로 기능 리턴)으로 접근가능하다. 이 방법은 실무에서도 많이 사용하니 알아두자.
//리턴문을 이용해서 접근은 가능하다~알아두기
- 클래스단위 코딩 : 프로토타입 방식의 클래스로 코딩을 하게 되면 언급했듯이 여러 개의 인스턴스를 만들어서 메서드를 공유함으로써 함수단위의 단점을 없앨 수가 있다.아울러 인스턴스 변수로 안에 있는 프로퍼티와 메서드에 인스턴스 변수를 통해서 쉽게 접근도 할 수가 있다. 하여, 클래스단위 코딩이 훨씬 더 유용하다.
이것을 new가 해줌!
프로퍼티 접근, 메서드 접근이 클래스 단위 코드가 훨씬 쉬움 / 메모리 절약
인스턴스 프로퍼티와 메서드 / 클래스 프로퍼티, 클래스 메서드
지금껏 우리는 new를 이용해서 인스턴스를 만들고 사용~ (new를 사용하여 메모리에 할당하여 사용) 이것들은 모두 인스턴스 프로퍼티와 메서드이다. 다시말해 지금껏 사용했던 클래스에 프로퍼티와 메서드는 독립적으로 실행하는 거이 아니라 반드시 인스턴스 생성 후 사용할 수 있는 프로터피와 메서드이고 이것을 인스턴스 프로퍼티와 메서드라 부른다.
- 클래스 프로퍼티와 메서드
인스턴스를 생성하지 않고도 사용할 수 있는 프로퍼티와 메서드가 있따!! 이것을 클래스 프로퍼티와 메서드라고 부른다.
function 클래스이름(){
…..
}
클래스이름.프로퍼티=값;
클래스이름.메서드이름=function(){};여기서 클래스 이름은 인스턴스가 아니라 클래스 이름 자체이다. 클래스 이름에 프로퍼티와 메서드를 만드는 것이다. 이 클래스 프로퍼티와 메서드의 사용ㅇ 목적은 주로 도움을 주는 유틸리티성 기능이나 또는 실행하더라도 내부 데이터에 영향을 주지 않고 독립적을 ㅗ실행되는 기능이나 정보들을 담을 때 사용한다.
이미 자바스크립트에서 만들어둔 코어 라이브러리~ 실행하면 메모리 맨 위로 올라감. 그래서 따로 new로 만들지 않고 바로 접근해서 사용한다는 것~
//오른쪽 Math~가 좋은 예시 (굳이 new를 사용하지 않고~)
위와 같이 만든 것이 바로 그 실체인 것이다. 탭메뉴를 실행하는데 전혀 영향을 주지 않는 것이다. 아울러 Math클래스처럼 랜덤 숫자를 만들어주고 또 Math.max()와 같이 두 수중 큰 값을 쉽게 구할 수 있게끔 자바스크립트 코어 라이브러리에서 제공을 해주는 유틸리티 기능을 제공해준다는 것이다.
직접 만들수도 있지만 (위의 그림 왼쪽 코드) 굳이 만들지 않고 코어 라이브러리에서 제공하는 기능을 클래스 프로퍼티,메서드로 사용하면 좋다~ 이걸 구분만 하면 된다~
위와 같이 클래스 프로퍼티, 클래스 메서드와 인스턴스 프로퍼티, 인스턴스 메서드는 실무에서 같이 혼용이 되어 사용되어지니 둘 다 잘 알고 있도록 하자.
보통 프로퍼티,메서드를 지칭하면 인스턴스 프로퍼티 메서드임을 알고 있으면 된다. (new를 사용하면)
패키지
쉽게 말해 클래스를 묶을 떄 사용하는 기술이다. 큰 프로젝트를 하게 되면 클래스 역시 수십 수백개가 만들어진다. 또한 협업을 통해 이뤄지기 때문에 여러 개발자들이 모여 하므로 쉽게 클래스를 찾아야 한다. 이때 바로 패키지를 사용하는 것이다.
//이 패키지들이 더더욱 커지면 라이브러리가 되는 것~
