javascript03
- 1. 발표자 : zero86 Javascript study 프로토타입, 이벤트(비동기/콜백)
- 3. Javascript 프로토타입 정의 - JS는 prototype 기반 언어라고 설명을 하였다. 그러면, 프로토타입은 무엇을 의미하는가? - JS는 class 라는 개념은 없다. 그래서 기존의 객체를 복사해서 새로운 객체를 생성하는 프로토타입 기반 의 언어이다. -> 객체 원형인 프로토타입을 이용하여 새로운 객체를 생성한다. - 프로토타입(prototype)은 보통 prototype object + prototype link 를 같이 의미한다. 01 - Javascript 프로토타입
- 4. 01 - Javascript 프로토타입 function Person() { this.name = '사람이름!'; } var person = new Person(); console.dir(Person); console.dir(person); - prototype : constructor / __proto__ 2가지 속성을 가진다. Person.prototype 의 속성은 자기 자신을 가리키는 것과 같다. prototype이 원형이라는 뜻이니, 결국 자기자신의 원형을 가리키는 속성이 prototype 이다. - JS에서 모든 객체는 자신을 생성한 생성자 함수의 prototype 속성이 가리키는 prototype object 를 자신의 원형(부모) 객체로 설정하는 prototype link 로 연결한다. Person 의 prototype 과 person(인스턴스) __proto__ 가 같은 prototype object 를 가리키고 있다. __proto__ 속성은 표준 스펙이 아니기 때문에 개발시 사용하지 않도록 하며, ECMAScript 2015 를 사용 가능한 환경에서는 Object.getPrototypeOf 로 prototype object 를 참조가능.
- 5. 01 - Javascript 프로토타입 function Person() { this.name = '사람이름!'; } var person = new Person(); console.dir(Person); console.dir(person); - 그러면, Person 의 바깥쪽에 __proto__ 는 뭐지? 옆에 예시를 보면, f() 라고 해서 함수를 가리키고 있다. 즉 이 함수는 생성 자 함수이기 때문에, 함수를 상속받고 있다는 의미이다. 우리가 만든 함수 는 부모함수를 상위로 가지고 있는 것이다.
- 6. 01 - Javascript 프로토타입 위 그림으로 프로토타입에 대해서, 이해를 해봅시다.
- 7. 01 - Javascript 프로토타입 Javascript 메서드 상속 function Person(name) { this.name = name; } var 보훈 = new Person('보훈'); var 세영 = new Person('세영'); console.log(세영.name); // 세영 보훈.sleep = function () { console.log('보훈이는 잠을 잡니다.'); } 세영.sleep = function () { console.log('세영이는 잠을 잡니다.'); } function Person(name) { this.name = name; } Person.prototype.sleep = function () { console.log(this.name + '는 잠을 잡니다.'); } var 보훈 = new Person('보훈'); var 세영 = new Person('세영'); console.log(세영.name); // 세영 /* 보훈.sleep = function () { console.log('보훈이는 잠을 잡니다.'); } 세영.sleep = function () { console.log('세영이는 잠을 잡니다.'); } */ 보훈.sleep(); 세영.sleep(); function Person(name) { this.name = name; } Person.prototype.sleep = function () { console.log(this.name + '는 잠을 잡니다.'); } Person.prototype.name = '나는 자유인!'; var 보훈 = new Person('보훈'); console.log(보훈.name); // 보훈 console.log(보훈.__proto__.name); // 나는 자유인! this 바인딩을 생각하면 쉽게 이 해가 된다. (결론은 prototype 도 하나의 object)
- 8. Javascript 프로토타입 체이닝 String() 생성자 함수 Object() 생성자 함수 __proto__(프로토타입 링크) 로 자신의 프로토타입 객체의 속성을 차례대로 검색하는 것을 프로토타입 체이닝이라고 한다. toString() 메서드를 호출할 경우, “abc”.toString() 메서드가 없다. 그렇다면 “abc”의 프로토타입 링크 를 따라 그것의 부모역할을 하는 Object.prototype 프로토타입 객체내에서 toString()가 있는지 검색한 다. 01 - Javascript 프로토타입
- 9. Javascript 프로토타입 체이닝 프로토타입 체닝의 종점 - JS에서 Object.prototype 객체는 프로토타입 체이닝의 종점 - 객체 리터럴 또는 생성자 함수를 이용한 방식이나 결국엔 Object.prototype 에서 체이닝이 끝난다. -> 모든 JS 객체는 Object.prototype 객체가 가진 프로퍼티와 메서드에 접근하고, 공유가 가능. 모든 JS 객체에서 참조가 가능하기 때문에 좋기는 하나, 만약 어떤 경우에만 사용하고 싶어도 전부 적용이 되는 문제가 발생한다. (배열에서만 사용하는 메서드를 정의하고 싶지만, Object.prototype에 넣으면 배열 이 아닌 다른거에서 사용하면? 에러가 나겠지요?) 그래서, 어쩔수 없이 객체같은 경우 객체 생성자 함수에 메서드를 정의 01 - Javascript 프로토타입
- 10. Javascript 프로토타입은 다른 객체로 변경이 가능 01 - Javascript 프로토타입 JS 에서는 클래스를 기반으로 하는 전통적인 상속을 지원하지는 않음. 하지만, 프로토타입을 이용하여 상속을 구현해 낼 수 있다. 오른쪽의 코드는 간단한 상속을 구현한 코드 다. 여기서 조금 더 발전시켜서 부모와 자식이 서로 독립적일 필요가 있다. function Person(name, age) { this.name = name || '즐이름'; this.age = age || '즐나이'; } function 보훈(name, age, position) { this.age = age || '즐보훈나이'; this.position = position || '즐보훈직책'; } Person.prototype.getName = function() { console.log(this.name); } Person.prototype.getAge = function() { console.log(this.age); } // 상속 구현 // 1. prototype 변경 보훈.prototype = new Person(); // 2. 상속받는 생성자 자기로 지정 보훈.prototype.constructor = 보훈; 보훈.prototype.getPosition = function() { console.log(this.position); } var p1 = new 보훈(); p1.getPosition(); // 즐보훈직책
- 11. 01 - Javascript 프로토타입 function Person(name, age) { this.name = name || '즐이름'; this.age = age || '즐나이'; } function 보훈(name, age, position) { this.age = age || '즐보훈나이'; } Person.prototype.getName = function() { console.log(this.name); } Person.prototype.getAge = function() { console.log(this.age); } function Bridge() {}; // 중간 다리 역할! Bridge.prototype = Person.prototype; 보훈.prototype = new Bridge(); 보훈.prototype.constructor = 보훈; var p2 = new 보훈(); console.dir(p2); p2.getName(); //undefined function Person(name, age) { this.name = name || '즐이름'; this.age = age || '즐나이'; } function 보훈(name, age, position) { this.age = age || '즐보훈나이'; } Person.prototype.getName = function() { console.log(this.name); } Person.prototype.getAge = function() { console.log(this.age); } // 상속 구현 // 1. prototype 변경 보훈.prototype = new Person(); // Person 인스턴스 생성 // 2. 상속받는 생성자 자기로 지정 보훈.prototype.constructor = 보훈; var p1 = new 보훈(); console.dir(p1) // 난 undefined가 나오길바래. 현재는 프로타타입 체이닝으로 즐이름 가 출력 p1.getName();
- 12. 01 - Javascript 프로토타입 var inherit = function( Parent, Child ){ var F = function(){}; F.prototype = Parent.prototype; Child.prototype = new F(); Child.prototype.constructor = Child; Child.super = Parent.prototype; }; 위 코드는 상속관계를 클로저를 활용하여 최적화 한거다. function Person(name, age) { this.name = name || '즐이름'; this.age = age || '즐나이'; } function 보훈(name, age, position) { this.age = age || '즐보훈나이'; } Person.prototype.getName = function() { console.log(this.name); } Person.prototype.getAge = function() { console.log(this.age); } // 상속 구현 // 1. prototype 변경 보훈.prototype = new Person(); // 2. 상속받는 생성자 자기로 지정 보훈.prototype.constructor = 보훈; var p1 = new 보훈(); console.dir(p1) // 난 undefined가 나오길바래. 현재는 프로타타입 체이닝으로 즐이름 가 출력 p1.getName(); // 그러면, 속성 말고 메서드만 내려받는 무언가를 두면? function Student() {}; // 빈 함수(중간역할) Student.prototype = Person.prototype; 보훈.prototype = new Student(); 보훈.prototype.constructor = 보훈; var p2 = new 보훈(); console.dir(p2) p2.getName();
- 13. Javascript 이벤트 정의 - event 는 어떤 사건을 의미. - 브라우저에서의 이벤트란, 웹 페이지가 로드가 되었을 때 또는 버튼을 클릭했을 때, 드래그를 했을 때 등 을 의미한다. 보통 통상적으로 이벤트를 감지하면 누군가 이를 감지해야 한다. -> 이것을 event handler 라 하며, 이벤트 에 대응하는 처리를 기술한다. 02 - Javascript 이벤트(비동기/콜백) <!DOCTYPE html> <html> <body> <button class="myButton">Click me!</button> <script> document.querySelector('.myButton') .addEventListener('click', function () { alert('Clicked!'); }); </script> </body> </html> 왼쪽 예제코드에서 event handler 함수가 등록되어 있는 것을 볼 수 있다. 일반적으로, 이벤트는 함수에 연결되며 그 함수는 이벤트가 발생하기 전까지 실행되지 않다가 이벤트가 발생하면 실행이 되는 흐름이다.
- 14. Javascript 이벤트 종류 02 - Javascript 이벤트(비동기/콜백) blur 포커스를 다른곳으로 옮길 경우 click 링크나 폼의 구성원을 클릭할 때 change 선택값을 바꿀 경우 focus 포커스가 위치할 경우 mouseover 마우스가 올라올 경우 mouseout 마우스가 떠날 경우 mousedown 마우스를 누를 경우 mousemove 마우스를 움직일 경우 mouseup 마우스를 눌렀다 놓을 경우 select 입력양식의 하나가 선택될 때 submit 폼을 전송하는 경우 load 페이지,윈도우가 브라우져로 읽혀질 때 unload 현재의 브라우저,윈도우를 떠날 때 error 문서나 이미지에서 에러를 만났을 때 reset 리셋 버튼이 눌렸을 때 dbclick 더블클릭시 dragdrop 마우스 누르고 움직일 경우 keydown 키 입력시 keypress 키 누를 때 keyup 키를 누르고 놓았을 때 move 윈도우나 프레임을 움직일 때 resize 윈도우나 프레임 사이즈를 움직일 때 window.onresize 속성을 사용하거나, window.addEventListener('resize', ...)를 사용하여, 이벤트 핸들러에 resize 이벤트를 등록할 수 있습니다.
- 15. ? JavaScript 는 싱글쓰레드 아닙니까? 싱글쓰레드 라는 이야기는 곧 한 작업에 무조건 한 작업만 처리가 가능하다는 이야기인데 어떻게 이벤트를 처리해요? 이벤트 처리하면서 blocking 되어서 사용경험이 나빠 지는거 아닐까요? 02 - Javascript 이벤트(비동기/콜백) 그래서 JS에서는 동시성을 위해, event loop 라는 녀석이 존재합니다. Call Stack : JS 에서 사용하는 스택. 실행컨텍스트가 생성될때마다 쌓 이고 실행이 완료되면 없어지고를 반복. JS에서는 단 하나의 call stack 만 존재하기 때문에 해당 task가 종료되기전까지 다른 어떤 task는 수 행이 불가능하다. Heap : 동적으로 생성된 객체(인스턴스)는 힙에 할당된다. Web API : 개발자가 접근할 수 없는 쓰레드이며 호출만 가능한 명령어 들 모음 Task Queue(callback Queue) : 런타임환경에서 처리해야하는 Task들 을 임시저장한다. Call Stack이 비어졌을 때 대기열에 들어온 순서대로 수행. Event Loop : 콜스택과 콜백큐를 감시. 콜스택이 비었으면 이벤트루프 는 콜백큐에서 첫번째 Task를 가져다가 실행. 이러한 반복을 Tick(틱)이 라고 부른다.
- 16. Javascript 비동기/콜백 하나의 쓰레드 === 하나의 스택 === 한번에 하나의 작업 JS에서는 한번에 하나의 작업밖에 진행을 하지 못한다. 이러한 이유로 JS에서 비동기 처리를 선택한 이유 입니다. 02 - Javascript 이벤트(비동기/콜백) 동기식 처리 모델(Synchronous processing model) 동기식 처리 모델(Synchronous processing model)은 직렬적으로 태스크(task)를 수행한다. 즉, 태스크는 순차적으로 실행되며 어떤 작업이 수행 중이면 다음 작업은 대기하게 된다. 예를 들어 서버에서 데이터를 가져와서 화면에 표시하는 작업을 수행할 때, 서버에 데이터를 요청하고 데이터가 응답될 때까지 이 후 태스크들은 블로킹(blocking, 작업 중단)된다.
- 17. Javascript 비동기/콜백 하나의 쓰레드 === 하나의 스택 === 한번에 하나의 작업 JS에서는 한번에 하나의 작업밖에 진행을 하지 못한다. 이러한 이유로 JS에서 비동기 처리를 선택한 이유 입니다. 02 - Javascript 이벤트(비동기/콜백) 비동기식 처리 모델 (Asynchronous processing model 또는 Non-Blocking processing model) 비동기식 처리 모델(Asynchronous processing model 또는 Non- Blocking processing model)은 병렬적으로 태스크를 수행한다. 즉, 태스크가 종료되지 않은 상태라 하더라도 대기하지 않고 다음 태스크를 실행한다. 자바스크립트의 대부분의 DOM 이벤트와 Timer 함수(setTimeout, setInterval), Ajax 요청은 비동기식 처리 모델로 동작한다.
- 18. Javascript 비동기/콜백 예제로 살펴보는 콜백함수 및 비동기 처리 callback function ?| - 다른 함수의 인자로써 이용되는 함수. - 어떤 이벤트에 의해 호출되어지는 함수. 02 - Javascript 이벤트(비동기/콜백) function callback() { console.log('Hi'); } setTimeout(callback, 0); console.log('Hello'); for(let i = 5; i>0; i--) { setTimeout(function(){ console.log(i); }, i * 1000); } • setTimeout에 0ms를 주었으니 바로 실행되는 것이 아니다. setTimeout은 호출 스택에서 실행된 후 Web API의 Timer API를 호출한다. Web API에 의해 setTimeout의 콜백함수는 이벤트 큐에 enqueue 된다. 즉 0초 뒤에 callback 함수를 실행해라! 가 아니라 0초 뒤에 callback 함수를 콜백큐에 넣어라 라는 의미이다. • console.log(‘Hello') 가 호출 스택에 쌓이고 Hello가 실행된 후 호출 스택이 비었을 때 Hi가 콘솔창에 나타나게 되는것이다. setTimeout의 delay를 0으로 주더라도 0초 보다 더 걸리는 이유는 콜 스택에서 모든 프레임이 실행될 때까지 기다려야하기 때문이다. setTimeout은 자바스크립트 내부에서 제공하는 것이 아닌 외부에서 제공하는 Web API이다. 마찬가지로 어떤 버튼이 있다고 하고, 해당 버튼에 click 이벤트 리스너를 붙여놨다고 해보자. 버튼이 클릭되면 event Handler가 외부 API인 DOM API에 의해 이벤트 큐에 evnetHandler가 추가된 후, 호출 스택이 비었을 때 실행된다.