함수 표현식

함수 성명(함수 성명 승급 포함)

함수 표현식(익명 방식)

var a = function (){
  console.log(arguments.callee);
  console.log(arguments.callee.name);
};
var a2=a;
a2();// (a) a

var b = function fn(){
  console.log(arguments.callee);
  console.log(arguments.callee.name);
};
var b2=b;
b2();// fn fn

function c(){
  console.log(arguments.callee);
  console.log(arguments.callee.name);
};
var c2=c;
c2();// c c

비익명 자행 함수에서 함수 변수는 읽기 전용 상태로 수정할 수 없습니다.

var b = 10;
(function b() {
  b = 20;
  console.log(b);//function b
})()
console.log(b);//10

차례로 돌아가다

arguments를 여러 번 사용합니다.callee 자신을 호출

가방을 닫다

작용역 체인은 본질적으로 변수 대상을 가리키는 바늘 목록으로 변수 대상만 인용하지만 실제적으로 포함하지 않는다.

함수에서 변수에 접근할 때마다 작용역 체인에서 해당하는 이름의 변수를 검색합니다.일반적으로 함수가 실행되면 국부 활동 대상은 삭제되고 메모리에는 전역 역할 영역(전역 실행 환경의 변수 대상)만 저장됩니다.그러나 폐쇄 외부 함수는 실행이 끝난 후에도 활동 대상이 삭제되지 않습니다. 익명 함수의 역할 체인이 여전히 이 활동 대상을 인용하고 있기 때문입니다.다시 말하면 함수가 되돌아오면 실행 환경의 작용역 체인은 삭제되지만 활동 대상은 메모리에 남아 있다.익명 함수가 제거될 때까지 활성 개체가 제거됩니다

메모리 유출

저버전 IE는 서로 다른 쓰레기 수집 메커니즘을 사용하기 때문에

function assignHandler(){
  var element = document.getElementById("someElement");
  element.onclick = function(){
   alert(element.id);
  };
}

상기 코드는element 요소 이벤트 처리 프로그램으로서의 패키지를 만들었고, 이 패키지는 순환 인용을 만들었다.익명 함수는 assignHandler () 의 활동 대상에 대한 인용을 저장하기 때문에 element의 인용 수를 줄일 수 없습니다.익명 함수가 존재하기만 하면,element의 인용 수는 적어도 1이기 때문에, 이 함수가 차지하는 메모리는 영원히 회수되지 않습니다.그러나 이 문제는 코드를 약간 고쳐서 해결할 수 있다. 아래와 같다.

function assignHandler(){
  var element = document.getElementById("someElement");
  var id = element.id;
  element.onclick = function(){
    alert(id);
  };
  element = null;
}

위의 코드에서 엘리먼트를 통해.id의 복사본은 변수에 저장되며, 패키지에서 이 변수를 인용하면 순환 인용이 사라집니다.그러나 이 정도만으로는 메모리 유출 문제를 해결할 수 없다.기억해야 합니다: 패키지를 닫으면 함수를 포함하는 모든 활동 대상을 인용하고 요소는 포함됩니다.패키지를 닫고 element를 직접 인용하지 않아도 함수를 포함하는 활동 대상에 인용이 저장됩니다.따라서 요소 변수를null로 설정할 필요가 있습니다.이렇게 하면 DOM 객체에 대한 참조를 해제하고 참조 수를 원활하게 줄여 사용된 메모리를 정상적으로 회수할 수 있습니다.

익명 패키지

함수를 직접 실행할 수 있고 () 사이에 블록 레벨 역할 영역이 생성됨

function outputNumbers(count){
  (function () {
    for (var i=0; i < count; i++){
      alert(i);
    }
  })();
  alert(i); // ！
}

익명 함수를 가리키는 인용이 없기 때문에 클러치가 차지하는 메모리 문제를 줄일 수 있다.함수가 실행되기만 하면 즉시 그 작용역 체인을 없앨 수 있다.

익명 패키지는 ()를 채택하여function을 문장 블록에서 표현식으로 바꾸었다.같은 이치로 eval(json)은 해석할 수 없으며 eval('('+myJson+')

을 사용해야 한다
개인 변수
공공 인터페이스: 개인 변수에 접근하는 경로
함수 이벤트 호출

returnfalse와 fn()

onclick='return fn()' ;

function fn(){
    return false;
}

BOM

전역 변수를 버리면 윈도우 대상의 속성이 됩니다. 전역 변수를 정의하는 것은 윈도우 대상에서 속성을 직접 정의하는 것과 약간의 차이가 있습니다.

전역 변수는 delete 조작부호를 통해 삭제할 수 없으며, 윈도우 대상에 직접 정의된 속성은 할 수 있습니다.

성명되지 않은 변수에 접근하면 오류가 발생하지만, 윈도우 대상을 조회하면 성명되지 않은 변수가 존재하는지 알 수 있습니다.

DOM

DOM 작업의 성능 최적화

순환 중복dom 작업은 메모리를 너무 많이 차지할 수 있습니다

for (var i=0, len=values.length; i < len; i++){
  ul.innerHTML += "
" + values[i] + "
"; // ！！
}

다음과 같이 DOM 작업을 줄일 수 있습니다

var itemsHtml = "";
for (var i=0, len=values.length; i < len; i++){
  itemsHtml += "
" + values[i] + "
";
}
ul.innerHTML = itemsHtml;

양식 작업

var form = document.getElementById("myForm");
// 
form.submit();

submit () 방법을 호출하는 형식으로 폼을 제출할 때submit 이벤트를 터치하지 않기 때문에 이 방법을 호출하기 전에 폼 데이터를 검증하는 것을 기억하십시오.

seal 및 freeze

Object.isFrozen() 및 Object.isSealed() 판단에 사용
Object.seal Object.seal()과Object.freeze()는 약간 다르다.Object.seal() 기존 속성을 설정할 수 있지만 새 속성을 추가할 수 없으며 기존 속성을 삭제할 수 없습니다.
Object.freeze

Object.freeze()는 객체를 매개변수로 받아들여 불변으로 만들고 반환합니다.이것은 우리가 대상의 모든 속성을 추가하거나 삭제하거나 변경할 수 없다는 것을 의미한다.

const과Object.freeze()는 다르다. const는 변수의 재분배를 방지하고 Object.freeze()는 얕은 동결로 대상이 불가변성을 가지게 하며 그 원형을 다시 지정할 수 없다.

대상이 동결되면 다시 동결할 방법이 없고 같은 속성을 가진 새로운 대상을 복제하여 목적을 달성할 수 있다.

var obj = { name: "hello", deepObj: { name: "deep" } };
var freezeObj = Object.freeze(obj);
obj.name = "world";
obj.deepObj = {};
obj.deepObj.age = 18;
console.log(obj, freezeObj, obj == freezeObj);

Object.assign({}, obj);

깊이 동결하다
중첩된 속성이 있는 대상을 완전히 동결하려면 자신의 라이브러리를 작성하거나 기존 라이브러리를 사용하여 Deepfreeze나 immutable-js, 또는

//  .
function deepFreeze(obj) {

  //  obj 
  var propNames = Object.getOwnPropertyNames(obj);

  //  
  propNames.forEach(function(name) {
    var prop = obj[name];

    //  prop ， 
    if (typeof prop == 'object' && prop !== null)
      deepFreeze(prop);
  });

  //  (no-op if already frozen)
  return Object.freeze(obj);
}

Vue 최적화

일반적인 JavaScript 객체를 Vue 인스턴스에 전송하는 data 옵션을 사용하면 Vue는 이 객체의 모든 속성을 훑어보고 Object를 사용합니다.defineProperty는 이 속성들을 모두 getter/setter로 전환합니다. 이 getter/setter는 사용자에게 보이지 않지만 내부에서 Vue 추적에 의존하게 하고 속성이 접근하고 수정될 때 변화를 알립니다.그러나 Vue는 Object.freeze()처럼 설정할 수 없는 대상의 속성으로 설정되었을 때 대상에 settergetter 등 데이터 납치 방법을 추가하지 않기 때문에observer의 비용을 줄였다.