JavaScript 탐색: SpiderMonkey의 특이한 점

우리 모두 알고 있듯이 명명된 함수 표현식의 식별자는 함수의 로컬 범위에서만 유효합니다. 하지만 이 식별자를 포함하는 로컬 범위는 어떤 모습일까요? 실제로는 매우 간단합니다. 명명된 함수 표현식이 평가되면 이름이 함수 식별자에 해당하고 값이 해당 함수에 해당하는 속성을 보유하는 것이 유일한 목적인 특수 객체가 생성됩니다. 이 개체는 현재 범위 체인 앞에 삽입됩니다. 그러면 "확장된" 범위 체인이 초기화 함수에 사용됩니다.

여기서 매우 흥미로운 점 중 하나는 ECMA-262가 이 "특수" 객체(함수 식별자를 보유함)를 정의하는 방식입니다. 표준에서는 "새 Object() 표현식을 호출하는 것처럼" 이 객체를 생성한다고 말합니다. 이 문장을 문자 그대로 이해한다면 이 개체는 전역 개체의 인스턴스여야 합니다. 그러나 문자 그대로 이를 수행하는 구현은 단 하나 뿐이며 그 구현은 SpiderMonkey입니다. 따라서 SpiderMonkey에서 Object.prototype을 확장하면 함수의 로컬 범위를 방해할 가능성이 있습니다.

Object.prototype.x = 'outer';
 
(function(){
   
  var x = 'inner';
   
  /*
    函数foo的作用域链中有一个特殊的对象——用于保存函数的标识符。这个特殊的对象实际上就是{ foo: <function object> }。
    当通过作用域链解析x时，首先解析的是foo的局部环境。如果没有找到x，则继续搜索作用域链中的下一个对象。下一个对象
    就是保存函数标识符的那个对象——{ foo: <function object> }，由于该对象继承自Object.prototype，所以在此可以找到x。
    而这个x的值也就是Object.prototype.x的值（outer）。结果，外部函数的作用域（包含x = &#39;inner&#39;的作用域）就不会被解析了。
  */
   
  (function foo(){
     
    alert(x); // 提示框中显示：outer
   
  })();
})();

그러나 이후 버전의 SpiderMonkey에서는 보안 취약점으로 간주되어 위의 동작을 변경했습니다. . 즉, "특수" 개체는 더 이상 Object.prototype을 상속하지 않습니다. 그러나 Firefox 3 이하를 사용하는 경우 이 동작을 "다시 방문"할 수 있습니다.

내부 개체를 전역 개체 개체로 구현하는 또 다른 브라우저는 Blackberry 브라우저입니다. 현재 해당 활동 개체(활성화 개체)는 여전히 Object.prototype을 상속합니다. 그러나 ECMA-262는 "새 Object() 표현식을 호출하는 것과 같이"(또는 NFE 식별자를 보유하는 객체를 생성하는 것과 같이) 활성 객체를 생성해야 한다고 말하지 않습니다. 다른 사람들의 표준에서는 활동 개체가 표준의 메커니즘이라고만 말합니다.

좋아요, BlackBerry 브라우저의 동작을 살펴보겠습니다.

Object.prototype.x = 'outer';
 
(function(){
   
  var x = 'inner';
   
  (function(){
     
    /*
    在沿着作用域链解析x的过程中，首先会搜索局部函数的活动对象。当然，在该对象中找不到x。
    可是，由于活动对象继承自Object.prototype，因此搜索x的下一个目标就是Object.prototype；而
    Object.prototype中又确实有x的定义。结果，x的值就被解析为——outer。跟前面的例子差不多，
    包含x = 'inner'的外部函数的作用域（活动对象）就不会被解析了。
    */
     
    alert(x); // 显示：outer
     
  })();
})();

하지만 놀라운 점은 함수의 변수가 기존 Object.prototype과도 일치한다는 것입니다. 충돌이 발생하면 다음 코드를 살펴보세요.

(function(){
   
  var constructor = function(){ return 1; };
   
  (function(){
     
    constructor(); // 求值结果是{}（即相当于调用了Object.prototype.constructor()）而不是1
     
    constructor === Object.prototype.constructor; // true
    toString === Object.prototype.toString; // true
     
    // ……
     
  })();
})();

이 문제를 방지하려면 Object.prototype에서 toString, valueOf, hasOwnProperty 등과 같은 속성 이름을 사용하지 마세요.

JScript 솔루션

var fn = (function(){
 
  // 声明要引用函数的变量
  var f;
 
  // 有条件地创建命名函数
  // 并将其引用赋值给f
  if (true) {
    f = function F(){ }
  }
  else if (false) {
    f = function F(){ }
  }
  else {
    f = function F(){ }
  }
 
  // 声明一个与函数名（标识符）对应的变量，并赋值为null
  // 这实际上是给相应标识符引用的函数对象作了一个标记，
  // 以便垃圾回收器知道可以回收它了
  var F = null;
 
  // 返回根据条件定义的函数
  return f;
})();

마지막으로 위 기술을 적용한 응용 사례를 제시합니다. 바로 크로스 브라우저 addEvent 함수 코드입니다:

// 1) 使用独立的作用域包含声明
var addEvent = (function(){
 
  var docEl = document.documentElement;
 
  // 2) 声明要引用函数的变量
  var fn;
 
  if (docEl.addEventListener) {
 
    // 3) 有意给函数一个描述性的标识符
    fn = function addEvent(element, eventName, callback) {
      element.addEventListener(eventName, callback, false);
    }
  }
  else if (docEl.attachEvent) {
    fn = function addEvent(element, eventName, callback) {
      element.attachEvent('on' + eventName, callback);
    }
  }
  else {
    fn = function addEvent(element, eventName, callback) {
      element['on' + eventName] = callback;
    }
  }
 
  // 4) 清除由JScript创建的addEvent函数
  //    一定要保证在赋值前使用var关键字
  //    除非函数顶部已经声明了addEvent
  var addEvent = null;
 
  // 5) 最后返回由fn引用的函数
  return fn;
})();