너 는 아마 모 를 것 이다.

다양한 책 과 글 에 등장 하 는 JS 를 배 웠 던 기 교 를 기록 해 공유 하고 찾 아 볼 수 있 도록 하 는 한편 이런 기 교 를 창조 하고 공유 하 는 선배 와 황소 들 에 게 도 감 사 드 립 니 다.
1. obj 의 속성 을 배열 로 옮 겨 다 니 기

　　var a=[];
　　for(a[a.length] in obj);
　　return a;

언뜻 보기 에는 어 리 석 을 지 모 르 지만 자세히 분석 해 보면 이해 하기 어렵 지 않다.흔히 볼 수 있 는 용법 은 for (var key in obj) 입 니 다. 여기 key 는 처음에 undefined 였 고 a [a. length] 전체 도 undefined 였 기 때문에 양 자 는 등가 입 니 다.for 순환 에서 obj 의 속성 은 키 에 게 순서대로 값 을 부여 합 니 다. 마찬가지 로 a [a. length] 에 도 순서대로 값 을 부여 합 니 다. 여기 length 는 계속 변 하고 있 습 니 다. 그러면 교묘 하 게 배열 의 모든 요소 에 값 을 부여 합 니 다.
2. 반복 문자열 (예: abc = > abcabc)

     function repeat(target,n){
          return (new Array(n+1).join(target));
     }

개량 버 전:

     function repeat(target,n){
          return Array.prototype.join.call(
          {length:n+1},target);//       length     ，            ，          ，           length     
     }

새 배열 이 아 닌 length 속성 을 가 진 대상 으로 대체 한 다음 배열 의 join 방법 을 호출 하여 성능 이 크게 향상 되 었 습 니 다.
재 개선:

     var repeat=(function(){
          var join=Array.prototype.join,obj={};
          return function(target,n){
               obj.length=n+1;
               return join.call(obj,target);
          }
     })();

패 킷 을 닫 고 대상 과 join 방법 을 캐 시 합 니 다. 매번 대상 을 새로 만 들 거나 방법 을 찾 지 않 아 도 됩 니 다.
3. for 순환 에서 두 번 째 항목 이 false 일 때 순환 이 종 료 됩 니 다. 여기 에는 반드시 비교 가 존재 하지 않 습 니 다. 직접 할당 할 수 있 습 니 다. 만약 에 undefined 와 같은 값 을 할당 할 때 bool 값 으로 전환 하 는 것 도 가짜 이기 때문에 종 료 됩 니 다. 예 를 들 어 배열 을 옮 겨 다 니 며 쓸 수 있 습 니 다.

    for(var i=arr.length,element;element=arr[—-i];){…}

여기, 두 번 째 항목 은 arr [- i] 이지 arr [i -] 가 아 닙 니 다. 후자 라면 undefined 로 올 라 오 면 순환 체 나 for (var i = 0, element; element = arr [i +] 를 실행 하지 않 습 니 다.) {...}
4. NaN 은 JS 에서 유일 하 게 자신의 값 과 같 지 않 기 때문에 하나의 변수 가 정말 NaN: a 인지 아 닌 지 를 판단 할 수 있 습 니 다! =a
5. "<", "+" 등 연산 자 는 기호 양쪽 의 표현 식 에 value Of 를 강제로 실행 한 다음 에 비교 하기 때문에 양쪽 이 함수 나 대상 이 고 이 대상 의 value Of 방법 을 다시 쓰 면 자동 으로 양쪽 방법 을 실행 합 니 다.예:

    var a={valueOf:function(){console.log(“aaa”);}},b={valueOf:function(){console.log(“bbb”);}};
    a<b;//   ：aaa;bbb;false;

6. JS 는 자동 으로 번 호 를 삽입 하 는 능력 을 가지 지만 자동 으로 번 호 를 삽입 하 는 것 은 만능 이 아니 라 세 가지 규칙 이 있다.
1) "}" 표시 하기 전에 하나 이상 의 줄 을 바 꾼 후에 만 프로그램 입력 의 끝 이 삽 입 됩 니 다.
2) 분 호 는 다음 입력 표시 만 해석 할 수 없 을 때 삽입 합 니 다.
     이 점 은 매우 중요 하 다. 예 를 들 면:
     　　a=b
     　　(f());
     a = b 이후 에 자동 으로 분 호 를 삽입 하지 않 습 니 다. a = b (f () 는 해석 할 수 있 기 때문에 '(', ',' + ',' - ',' / '시작 할 때 이전 줄 이 자동 으로 삽입 되 지 않 을 수 있 으 므 로 주의해 야 합 니 다.
해석 오류 가 발생 하지 않 음 에 도 불구 하고 JS 는 점 수 를 강제로 삽입 하 는 경우 도 있 습 니 다. 이것 이 바로 JS 문법 제한 생 성 식 입 니 다. 두 글자 사이 에 줄 을 바 꾸 는 것 을 허용 하지 않 습 니 다. 가장 위험한 것 은 return 문장 입 니 다. 예 를 들 어
　　　　return 
　　　　{};
강제 삽입 되 어
　　　　return;
　　　　{};
유사 한 것 은 다음 과 같다.
throw 구문,
태그 가 표 시 된 break 살 아 있 는 continue 문 구 를 표시 합 니 다.
뒷 자리 자동 증가 또는 자동 감소 연산 자
3) 분 호 는 for 순환 빈 문장의 머리 에 구분자 로 자동 으로 삽입 되 지 않 습 니 다.
따라서 가장 좋 은 방법 은 자신의 js 파일 의 처음부터 방어 적 으로 삽입 하 는 것 이다. 이렇게 하면 js 파일 을 합병 할 때 문제 가 되 지 않 을 것 이다.
7. 폐쇄. 폐쇄 를 이해 하려 면 세 가지 기본 적 인 사실 을 배 워 야 한다.
(1) JS 는 현재 함수 에서 예상 치 못 하 게 정 의 된 변 수 를 참조 할 수 있 습 니 다.
(2) 외부 함수 가 되 돌 아 왔 더 라 도 현재 함 수 는 외부 함수 가 정의 하 는 변 수 를 참조 할 수 있 습 니 다. 이것 은 JS 의 함수 값 이 호출 할 때 실행 하 는 코드 보다 더 많은 정 보 를 포함 하기 때 문 입 니 다.
(3) 패 킷 을 닫 으 면 외부 변수의 값 을 업데이트 할 수 있 습 니 다. 패 킷 을 닫 으 면 값 복사 본 이 아 닌 외부 변수의 참조 가 저장 되 어 있 기 때 문 입 니 다. 예 를 들 어:

function box(){
     var val=undefined;
     return {
          set:function(x){val=x;},
          get:function(){return val;}
     };
}
var b=box();
b.get();//“undefined”
b.set(5);
b.get();//5

이 점 은 매우 중요 합 니 다. 예 를 들 어 함수 의 for 순환 체 내 에서 패 킷 을 되 돌려 주거 나 패 킷 을 닫 고 for 순환 을 하 는 카운터 값 이 있 으 면 이 패 킷 은 영원히 for 순환 이 끝 날 때 i 의 최종 값 입 니 다. 패 킷 은 그 당시 의 값 복사 본 이 아 닌 참조 로 저장 되 어 있 기 때 문 입 니 다.
8. JS 는 블록 급 역할 영역 이 없 기 때문에 일반적인 상황 에서 함수 내부 의 모든 변 수 는 함수 역할 영역 에 연결 되 어 있 습 니 다. 즉, 모두 함수 가 처음부터 설명 한 것 과 같 습 니 다. 하나의 예 외 는 try / catch 중의 변 수 는 블록 급 이 고 try / catch 블록 에 만 속 합 니 다.
9. 알다 시 피 함수 내부 에서 함 수 를 설명 하 는 것 은 가능 하지만 함수 내의 부분 블록 에서 설명 하면 문제 가 발생 할 수 있 습 니 다.

function f(){return “global”;}
function test(x){
     function f(){return “local”}
     var result=[];
     if(x){
          result.push(f());
     }
     result.push(f());
     return result;
}
test(true);//[“local”,”local”]
test(false);//[“local”]

함 수 를 if 블록 에 설명 합 니 다:

function f(){return “global”;}
function test(x){
     var result=[];
     if(x){
          function f(){return “local”}
          result.push(f());
     }
     result.push(f());
     return result;
} 
test(true);//?
test(false);//?

결 과 는 어 떨 까요? 이론 적 으로 JS 는 블록 급 역할 영역 이 없 기 때문에 f () 의 역할 영역 은 전체 test 함수 입 니 다. 따라서 합 리 적 으로 추측 하면 지난번 출력 과 같 고 모두 'local' 이 어야 합 니 다. 그러나 모든 JS 실행 환경 이 이렇게 하 는 것 이 아 닙 니 다. 어떤 것 은 f 를 포함 한 코드 블록 을 실행 하여 조건 부 로 함수 f 를 연결 하 는 지 여부 입 니 다.(바 인 딩 은 이 변 수 를 가장 가 까 운 역할 영역 에 연결 하 는 것 을 의미 하 며, 할당 은 코드 가 실제 할당 단계 로 실 행 될 때 발생 합 니 다).
따라서 가장 좋 은 방법 은 내장 함 수 를 설명 하려 면 부 함수 의 가장 바깥쪽 에서 설명 하거나 함 수 를 설명 하지 않 고 var 성명 과 함수 표현 식 을 사용 하 는 것 입 니 다.

function f(){return “global”;}
function test(x){
     var result=[];
     if(x){
          var g=function(){return “local”}
          result.push(g());
     }
     result.push(f());
     return result;
}  

10. js 로 사전 을 만 들 때 대상 을 이용 하 는 방식 (JS 대상 의 핵심 은 문자열 속성 이름과 속성 값 의 맵 표 이기 때 문)문 제 는 원형 오염 입 니 다. 사전 속성 치 를 얻 을 때 hasOwnProperty 를 사용 하 는 것 이 좋 기 때 문 입 니 다. for in 을 사용 하면 대상 자체 뿐만 아니 라 원형 도 옮 겨 다 닐 수 있 습 니 다. 따라서 다른 곳 에서 Object 의 원형 을 오염 시 키 면 for in 은 예상 치 못 한 결 과 를 얻 을 수 있 습 니 다. 이때 hasOwnProperty 로 대상 자체 가원형 오염 을 피하 기 위 한 속성 이 있 는 지 여 부 는 알 수 없 지만, 더 극단 적 인 경 우 는 hasOwnProperty 라 는 원형 방법 마저 오 염 될 수 있 습 니 다. 원형 오염 을 피 하 는 방법 은 사전 대상 을 만 들 때 Object. create (null) 를 사용 하 는 것 입 니 다.완전 빈 대상 을 만 들 려 면 이 대상 은 원형 이 없습니다. 이 방법 은 ES5 입 니 다. 이 방법 이 없 을 때 사전 류 를 만 든 다음 에 사전 류 에 배열 로 질서 있 는 집합 을 저장 하고 스스로 이 집합 을 유지 하 는 것 이 좋 습 니 다.
11. JS 의 클래스 배열 대상 은 배열 의 대부분 원형 방법, 예 를 들 어 map 등 을 사용 할 수 있 습 니 다. 클래스 배열 대상 은 두 가지 조건 을 만족 시 키 는 대상 을 말 합 니 다. 하 나 는 합 리 적 인 범위 내 length 속성 을 가 진 것 이 고 다른 하 나 는 length 속성 이 이 대상 의 최대 색인 보다 크 며 색인 은 합 리 적 인 범위 의 인증서 이 고 그의 문자열 은 대상 의 key 를 나타 내 지만 배열 의 원형 측 입 니 다.법 contact 는 클래스 배열 대상 에 의 해 호출 될 수 없 기 때문에 먼저 []. slice. call 로 클래스 배열 대상 을 진정한 배열 로 바 꿔 야 합 니 다. 예 를 들 어 []. slice. call (arguments).
12. 모든 것 을 계승 해 야 하 는 것 이 아니 라 계승 도 완벽 한 것 이 아니다. 가끔 은 그 가 해결 할 수 있 는 것 보다 더 많은 문 제 를 창조 할 수 있다. 특히 차원 관계 가 뚜렷 하지 않 을 때 구조 유형 (오리 유형 이 라 고도 부 르 는데 오리 처럼 보이 고 수영 이 오리 처럼 울 리 면 오리 처럼 보인다) 을 많이 사용 해 야 한다.구조 유형 으로 유연 한 대상 인 터 페 이 스 를 디자인 할 때 클래스 공장 을 만들어 서 클래스 의 인 스 턴 스 를 되 돌려 주지 않 고 대상 에 게 직접 돌아 가 고 대상 은 기대 하 는 방법 과 속성 을 가진다. 예 를 들 어:

SomeObj.someWidget=function(opts){
     return {
          a:blabla,
          b:function(){...},
          c:blabla
     }
}