🎈210630 강의 정리
Reference data type
객체지향1. Object 생성기계인 constructor
객체지향2. prototype의 이해 및 특징
상속기능 ES5.ver / ES6.ver
Destructuring
import/export를 이용한 파일간 모듈식 개발
웹브라우저 동작원리 Heap, Stack, Queue
동기/비동기처리와 콜백함수
ES6 Promise
-
reference 타입은 데이터를 복사하는게 아니고 화살표를 복사하는것
파라미터는 변수생성&할당과 같음 (파라미터는 일종의 변수처럼 생성되고 사라지는 존재라고 보면 됨) -
constructor : object생성기계
this : 기계에서 새로 생성되는 object (instance)
prototype : 유전자 (기계(constructor)를 만들면 prototype이라는 공간이 자동으로 생김)
- prototype에 값을 추가하면 모든 자식들이 물려받기 가능
- prototype은 함수에만 생성되어있음
- 내 부모 유전자 (부모의 prototype)를 검사하고싶다면__proto__
-> 자식.__proto__= 부모; (부모 강제 등록 가능;근데 잘안씀)
- 상속기능을 구현하는 다른 방법 (기계프로토타입대신)
1) ES5.ver : Object.create(프로토타입으로 만들 object);
var 자식 = Object.create(부모); 로 등록
2) ES6.ver : class 키워드``` class 부모 { constructor(){ this.name = "Kim"; this.sayHi = function(){console.log('hello')} //함수 추가방법1)constructor에 추가 : 자식이 직접 함수를 가짐 } sayHi(){ //함수 추가방법2) 부모.prototype에 추가됨 console.log('hello') } } var 자식 = new 부모();
- Destructuring
- object데이터를 꺼내 변수에 담으려면 변수명을 key명과 똑같이 써야함
- 기본값지정가능
- 반대로 변수들을 object에 집어넣고 싶은 경우 : key랑 value값같으면 하나만 적으면됨 (많이 쓰임)
-> var obj = {name:name, age:age}; 이거를 var obj ={name, age}라고하면 됨 - 함수 파라미터 만들때도 Destructuring문법 사용가능
- import/export를 이용한 파일간 module식 개발 ( IE호환안됨.. )
<script type='module'> import a(가져올거/작명가능-default로export한거) from '/library.js(경로)' </script>
-> 다가져오지않고 변수.. library.js 에는 export default a(내보낼거); 설정해줘야함
-> export default는 파일당 1회사용
-> 여러 개 내보낼때는 중괄호로씀: import {가져올것들/작명불가능변수명동일해야함} from '경로' / export {내보낼것들}
Q) export default c와 export {a,b} 동시에 import 하고 싶으면?
-> import 작명,{a,b} from '/library.js(경로)' -순서조심 default변수를 맨처음 적어줘야함
Q) export로 보낸변수명이 마음 안들때
-> import {변수 as 새변수명} from '경로';
Q) 모든걸 다 import 해오는 *기호
-> import 디폴트작명c, * as 변수들명 from 경로
불러올때 c 혹은 변수들명.a /변수들명.b
- 동기/비동기처리와 콜백함수
js는 항상 동기식 처리 (synchronous) 한줄씩 차례차례실행
비동기식 처리 (asynchronous) 특수한 코드들을 발견하면 약간 대기실(Web API)에 제쳐두고 다른 코드부터실행후 준비가 되면 다시 실행
-> setTimeout addEventListener, ajax 관련함수들
Q) js를 순차적으로 실행하려면? 콜백함수를 사용해야함
콜백함수는 함수 디자인 패턴일뿐
function 첫째함수(구멍){ console.log(1); 구멍(); }
function 둘째함수(){console.log(2);}
첫째함수(둘째함수); 주의)둘째함수()일쓰면안돼
콜백함수 더 쉽게쓰기위한 Promise패턴
var promi = new Promise(); =성공/실패 판정기계
promi.then(function(){
}).then(function(){
}.catch(function(){}) 실패했을경우 실행
.finally(function(){}) 성공이나 실패나 뭔가 실행되었을때
- 성공/실패 판정 기계인 Promise 디자인하는 방법
var 프로미스 = new Promise (function(resolve,reject){
resolve(); =성공을 판정 then 실행
reject(); = 실패판정내림 catch실행
})
- promise의 3가지 상태
1) 성공하면<resolved>
2) 판정대기중이면<pending>
3) 실패하면<rejected>
*Promise는 동기를 동기로 만들어 주는 코드가 아님. 비동기적 실행과 전형 상관이 없고 코딩 이쁘게할 수 있는 일종의 디자인 패턴임
Promise는 순차적실행을 위해 콜백함수 대신 쓸 수 있는 코딩 패턴
