매일 한 번 씩 쌓 아서 잃어버린다 (Wed, 5 May 2016)

상투적인 폐쇄:
책 에서 주 는 기본 개념 은 '폐쇄 는 다른 함수 역할 영역 에 접근 할 수 있 는 변 수 를 말 하 는 함수' 입 니 다. 이렇게 보면 모든 function 이 폐쇄 되 었 습 니까?(사실은 그런 것 같다)
선의 로 가득 찬 패키지 ppt...: 
https://app.box.com/shared/elkumrpfng
미 칠 정도 로 명확 하 게 설명 한 글 을 발견 했다.
http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html
완 선생님 이 낸 사고 문 제 를 풀 어 보 겠 습 니 다. (책 에서 가방 을 닫 고 이 두 가지 예 를 들 었 습 니 다)

<span style="font-size:18px;">　　var name = "The Window";
　　var object = {
　　　　name : "My Object",
　　　　getNameFunc : function(){
　　　　　　return function(){
　　　　　　　　return this.name;
　　　　　　};
　　　　}
　　};
　　alert(object.getNameFunc()());</span>

정 답 은 The Window 입 니 다. 즉, alert 에서 getNameFunc 를 실행 할 때 this 는 전체 국면 을 가리 키 고 전체 name 은 The Window 입 니 다.
전역 에서 'use strict' 를 사용 하면 error 가 발생 합 니 다.
그럼 어떻게 하면 My Object 를 알 릴 수 있 을까요?나 는 단지 가방 을 닫 지 않 아 도 되 는 방법 만 생각 했다.

<span style="font-size:18px;">　　var name = "The Window";
　　var object = {
　　　　name : "My Object",
　　　　getNameFunc : 
　　　　　　function(){
　　　　　　　　return this.name;
　　　　　　}
　　};
　　alert(object.getNameFunc.call(object));</span>

사실 이렇게 하 는 것 은 폐쇄 와 는 상 관 없 는 일이 다. 
두 번 째 문제:

<span style="font-size:18px;">　　var name = "The Window";
　　var object = {
　　　　name : "My Object",
　　　　getNameFunc : function(){
　　　　　　var that = this;
　　　　　　return function(){
　　　　　　　　return that.name;
　　　　　　};
　　　　}
　　};
　　alert(object.getNameFunc()());</span>

이번 에는 My Object 를 정확하게 출력 할 수 있 습 니 다. 이번 에는 var 를 이용 하여 object 를 가리 키 는 this 를 저 장 했 기 때 문 입 니 다. 이것 은 바로 글 에서 말 한 것 이 아 닙 니 다. 패 킷 을 닫 으 면 이 변수의 값 을 메모리 에 저장 합 니 다. (다른 패 킷 의 특성 은 외부 에서 함수 내부 의 변 수 를 읽 을 수 있 습 니 다)  또 다른 개념 에 대한 이해 가 유용 한 문제:
http://web.jobbole.com/84723/

<span style="font-size:18px;">//    </span>

<span style="font-size:18px;">for (var i = 0; i < 5; i++) {
  var btn = document.createElement('button');
  btn.appendChild(document.createTextNode('Button ' + i));
  btn.addEventListener('click', function(){ console.log(i); });
  document.body.appendChild(btn);
}</span>

문 제 는 이 5 개의 button 을 누 르 면 무슨 일이 일어 나 는 지 하 는 것 입 니 다. 현재 이 코드 의 상황 은 출력 이 모두 4 이기 때 문 입 니 다. 콜 백 이때 안에 있 는 i 가 4 이기 때 문 입 니 다.매번 순환 할 때마다 이 i 를 저장 하려 면 패 키 지 를 닫 아야 합 니 다.

for (var i = 0; i < 5; i++) {
  (function () {
    var haha = i;
    var btn = document.createElement('button');
    btn.appendChild(document.createTextNode('Button ' + i));
    btn.addEventListener('click', function(){     console.log(haha); });
    document.body.appendChild(btn);
  })();
}

for (var i = 0; i < 5; i++) {
  (function (i) {
    var btn = document.createElement('button');
    btn.appendChild(document.createTextNode('Button ' + i));
    btn.addEventListener('click', function(){     console.log(i); });
    document.body.appendChild(btn);
  })(i);
}

첫 번 째 방법 은 쓰 는 것 이 첫 번 째 방법 보다 편 합 니까? 앞에서 변수 가 저장 된다 는 것 을 배 웠 기 때문에 매개 변수 도 저장 되 는 것 같 습 니까??
ES6 는 뭐 가 달라 요?
작년 말 에 야 입 행 했 기 때문에 그 때 는 ES6 시대 에 접어 들 었 기 때문에 ES6 에 대해 전혀 민감 하지 않 았 습 니 다. 이번 에는 작은 정 리 를 하 겠 습 니 다.
http://www.mamicode.com/info-detail-952851.html
Arrow Function: () = > {} 무슨 말 을 해 야 할 지...
클래스 지원:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes
http://book.mixu.net/node/ch6.html
let const:
특별한 var 를 사용 한 후 특정 범위 에서 만 사용 할 수 있 습 니 다. const 는 상수 를 정의 합 니 다.
Promise:
http://caniuse.com/  ---> check we can use the API with specific browser
https://www.youtube.com/watch?v=g90irqWEqd8
결국 Promise 는 주로 세 가지 상태 가 있 습 니 다. pending, fufilled and rejected, pending 은 fufilled or rejected 로 변 할 수 있 습 니 다.
var promise = foo(){}
promise.then(function () {});
promise.catch(function() {});
0r --> 
promise.then(function (){}).catch(function (err) {});
체인 으로 실행 시 킬 수도 있 습 니 다.
promise.then(function () { return foo(1)}).then(function(){return foo(2)}).then(function () {}).catch (function(err){..});
Error handling is pretty convenient.
Promise.all([
  foo(1),
  foo(2),
  foo(3)
 ]).then(function (values) {
  var a = values[0];
  var b = values[1];  // 하지만 앞 뒤 는 장담 할 수 없다!
})

<span style="font-size:18px;">var promise = new Promise (function (resolve, reject) { 
  resolve('resolved solution');
})
promise.then(function(result){
  console.log('Can I get the solution?', result);
}).catch(function (err) {
  console.error('ERR', err);
})</span>

상기 코드 에서 resolve 와 reject 는 좋아 하 는 워드 로 바 꿀 수 있 지만 가 독성 을 위해 resolve 와 reject 를 사용 하 는 것 이 좋 습 니 다.
또 곤란 한 문제 가 있 습 니 다. 이렇게 보면...
promise 와 setTimeout 의 집행 메커니즘 은 어떤 차이 가 있 습 니까?
http://www.zhihu.com/question/36972010
여 기 를 알 고 싶다 면 이벤트 루프 를 알 아야 합 니 다.
http://www.ruanyifeng.com/blog/2014/10/event-loop.html
좀 심오 하 다. 내 가 알 아 볼 수 있 는 부분 을 정리 하 자.
우선 코드 는 이 렇 습 니 다.

<span style="font-size:18px;">setTimeout(function(){console.log(4)},0);
new Promise(function(resolve){
    console.log(1)
    for( var i=0 ; i<10000 ; i++ ){
        i==9999 && resolve()
    }
    console.log(2)
}).then(function(){
    console.log(5)
});
console.log(3);</span>

결 과 는 1, 2, 3, 5, 4 가 비동기 로 실행 되 더 라 도 두 가지 작업 분류 가 존재 합 니 다. macro task 와 micro task 입 니 다. 끊 을 때 자바 script 은 작업 을 각각 이 두 task queues 에 넣 습 니 다. 실행 과정 은 다음 과 같 습 니 다. 먼저 macro task 에서 첫 번 째 작업 을 꺼 낸 다음 micro task 의 모든 작업 을 수행 하고 macro task 에서 현재 의 첫 번 째 작업 을 수행 한 다음 에 수행 합 니 다.모든 micro task 의 작업 이 반복 되 었 습 니 다.
macro task: script 의 전체 코드, setInterval, setTimeout, setImmediate, I / O, UI rendering
micro task: process.nextTick, Promises, Object.observe, MutationObserver.
여기 서 주의해 야 할 것 은 script 이 비동기 에 놓 여 있 는 것 이 이상 하 게 보이 지만 동기 화 되 어 실행 되 어야 하지 않 기 때 문 입 니 다. 그러나 script 을 많은 작은 조각 으로 나 누 면 그것 도 '비동기' 입 니 다. 단지 하나의 블록 안의 script 이 동기 화 되 어 실 행 됩 니 다.
질문
http://blog.csdn.net/xifeijian/article/details/10813339
IE 의 html 다운로드 와 렌 더 링 은 동시에 진행 되 며 위 에서 아래로 이 루어 집 니 다. 의미 해석 적 인 태그 삽입 파일 (js css) 을 만 났 을 때 새로운 connections 를 열 어 다운로드 하고 다운로드 가 끝 난 후에 야 해석 합 니 다. (다운 로드 를 막 는 이 유 는 JS 에서 DOM 구 조 를 바 꿀 수 있 기 때 문 입 니 다. 이 경우 DOM 트 리 를 재 구성 해 야 합 니 다)
더 빨리 불 러 오기 위해 inline javascript 및 inline css 의 수 를 줄 이 고 불필요 한 comments 빈 칸 같은 것 을 줄 이기 위해 js css 파일 을 최대한 합 쳐 localStorage, sessionStorage 를 이용 하여 데 이 터 를 캐 시 할 수 있 습 니 다.
질문
this 는 호출 함수 의 대상 을 가리 키 며, 이 함수 가 특정한 대상 으로 호출 되면 이 대상 을 가리 키 며, 구조 함수 가 호출 되면 new 에서 나 온 이 대상 을 가리 키 고, apply / call 은 매개 변수 역할 영역 (없 으 면 전역 을 가리 키 는 것) 을 가리킨다.

<span style="font-size:18px;">var length = 10;
function fn() {
  console.log(this.length);
}

var obj = {
  length: 5,
  method: function(fn) {
    fn();
    arguments[0]();
  }
};

obj.method(fn, 1); </span>

출력 은 10 과 2 입 니 다. 분석 원인 은 fn 은 window 에서 밝 혀 졌 기 때문에 obj. method 가 바 뀌 었 을 때 도 window. fn () 이 호출 되 었 고, arguments [0] () 에 대해 서 는 arguments 자체 가 array 이기 때문에 이 를 이용 하여 fn 을 바 꿀 때 this 는 이 object (또는 array) 를 가리 키 기 때문에 결 과 는 2, 즉 이 array 의 길 이 는 2 입 니 다.