Js 문법 객체

egoing님 강의록!

window가 생략된 것이다 !

객체에 있는게 값->속성, 함수->메소드

​

egoing님 강의

자바에는 클래스 안에 생성자가 속해있다.

허나 JS 에서는 ES5 기준 생성자가 없기에, 생성자가 어느 누군가에 속해 있지 않다. (클래스를 선언하지 않아도 된다.) 그냥 new를 통해 선언하면 객체가 된다.. 함수에 new를 붙이면 그 리턴값은 객체가 된다.

 

 

var doPrint = () => {
    console.log(`hi`);
    return 200;
}

var a0 = doPrint;
a0; // 함수에 대한 정보
a0(); // hi출력, 200리턴

var a1 = doPrint();
a1; // 200
a1(); // Uncaught TypeError: a1 is not a function

/* 객체 생성자로 넘겨줄 때에는 아래와 같이 해야 돼 
Uncaught TypeError: doPrint is not a constructor
에러 남.. */

function doPrint() {
    console.log(`hi`);
    return 200;
}
var a2 = new doPrint(); // hi

 

new를 붙이면 함수가 객체가 된다!

...

공부하는 도중..

생성자/new 강의에서 5:50 경에.. js에는 클래스가 존재하지 않는다는 언급이 있었는데..

ES6에서는 클래스 개념을 지원한다.

egoing님의 강의가 14년도라는 것을 깨달았다. ES5일 때 만들어진 강의..

​

​

강의록 따라가는 중 발견한 주의할 점

 

var o = {
    'func' : console.log('hello')
}
// hello
o.func(); // Uncaught TypeError: o.func is not a function

 

위와 같은 경우, 객체를 선언 시 함수의 호출이 일어나 버린다.. 아직은 호출되면 안되기 때문에

아래와 같이 함수를 감싸주어야 한다.

 

var o = {
    'func' : () => console.log('hello')
}
o.func(); // hello

 

위와 같이 함수를 감싸면 미리 호출되어, 해당 속성의 값을 사용할 수 없는 문제를 막을 수 있다.

​

​

** window는 웹브라우저(클라이언트)의 전역객체이다. (서버측에서는 global)

 

 

ArrowFunction과 함수선언식은 다른 것인가..

밑에 참고!!

 

https://pro-self-studier.tistory.com/17

* arrow function은 함수선언(function declaration)과 완벽히 같지는 않다

 

결론 : 화살표 함수는 자신만의.. 실행컨텍스트(? this)를 만들지 않기 때문에, 위와 같은 현상이 일어나는 것.

또한 생성자도 지원되지 않는 것 같다.

+ this는 현재 실행되고 있는 함수/메소드의 객체를 가리킨다.

 

 

this는 현재 이 동작(함수)이 실행되고 있는 객체를 가리킨다.

this.. 넘모 어렵다.. 어려우면 이정도로 알자.

 

** good 설명 : https://blog.naver.com/coocly/221498998895

Chapter 04 자바스크립트 this 바인딩

 

 

Prototype

 

prototype : 나는 이것을.. 객체의 공통 속성 정도로 생각한다.

이 속성이 있어야 객체나 상속 개념을 구현할 수 있는 것으로 보인다.

​

생코 prototype 하는 도중...

https://youtu.be/673mZ8rE9UY

3분에서 잘 되지 않는다...

​

 

​

prototype의 응용

생활코딩

위 예제를 아래와 같이 작성할 수 있다.

생활코딩

JS에서 제공하는 기본 API를 prototype을 이용해서 사용자가 직접 확장해 나갈 수 있다..

​

---

많이 왔다 !!! 아자아자~!

 

 

참고하면 좋을 것들!

 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference

JavaScript reference

 

** ES5 vs ES6

 

ECMA Script.. ES.. 정리와 버전별 특징

 

 

JAVASCRIPT ES7 ~ ES10 추가된 기능

 

this | PoiemaWeb