Javascriptがスローする "Uncaught TypeError：ページがロードされるときにプロパティ 'x'が未定義に設定されない"

Question

モーダルウィンドウを表示するJavascriptプラグインを作成する方法を学習しています。 I'm trying to learn using this codepen。私はどこか別の場所にそれをテストしようとするときに、ページが読み込まれると、私は次のエラーを取得する：

Uncaught TypeError: Cannot set property 'raModal' of undefined

at raDialog.js:5 
at raDialog.js:158 

は5行目を見ると、私はエラーがモーダルを構築する関数の開始を参照していることがわかります私は表示したい、しかし、私はそれがなぜその行にエラーを投げているのか分かりません。

"use strict"; 
(function() { 
    // Make the constructor 
     this.raModal = function(){ //Line 5, error occurs here. 

      // Create global element references 
      this.closeButton = null; 
      this.modal = null; 
      this.overlay = null; 

      // Define option defaults 
      var defaults = { 
      autoOpen: false, 
      className: "", 
      closeButton: true, 
      content: "", 
      maxWidth: 500, 
      minWidth: 280, 
      minHeight: 150, 
      maxHeight: 700, 
      overlay: true, 
      onOK: "", 
      onClose: "" 
      }; 

      // Create options by extending defaults with the passed in arugments 
      if (arguments[0] && typeof arguments[0] === "object") { 
       this.options = extendDefaults(defaults, arguments[0]); 
      } 
      if(this.options.autoOpen === true){ 
      this.open(); 
      } 

     }; 

    //More code... 

    }()); //Line 158 also produces an error, might be related to Line 5's error. 

私はJSFiddleでエラーを再現することができますよ。 Link to JSFiddle

このエラーが発生する理由については、ご理解ください。

Answer 1

undefinedになります。

ブラウザ内のグローバルオブジェクトについては、windowを使用してください。

'use strict'; 
 

 
(function() { 
 
    console.log(this); 
 

 
    window.foo = 'bar'; 
 
    console.log(window.foo); 
 
}());

それとも、newキーワード使用することができます。詳細については

'use strict'; 
 

 
(new function() { 
 
    this.foo = 'bar'; 
 
    console.log(this.foo); 
 
}());

参照What does "use strict" do in JavaScript, and what is the reasoning behind it?を。

Answer 2

thisは、厳密モードの無名関数内でundefinedです。コードの最初の行に追加したconsole.log(this);を参照してください。"use strict"を付けずに実行して、期待どおりの動作を確認してください。 function内部strict環境thisで

"use strict"; 
 

 
(function() { 
 
     console.log(this); 
 
     this.raModal = function(){ //Line 5, error occurs here. 
 

 
      // Create global element references 
 
      this.closeButton = null; 
 
      this.modal = null; 
 
      this.overlay = null; 
 

 
      // Define option defaults 
 
      var defaults = { 
 
      autoOpen: false, 
 
      className: "", 
 
      closeButton: true, 
 
      content: "", 
 
      maxWidth: 500, 
 
      minWidth: 280, 
 
      minHeight: 150, 
 
      maxHeight: 700, 
 
      overlay: true, 
 
      onOK: "", 
 
      onClose: "" 
 
      }; 
 

 
      // Create options by extending defaults with the passed in arugments 
 
      if (arguments[0] && typeof arguments[0] === "object") { 
 
       this.options = extendDefaults(defaults, arguments[0]); 
 
      } 
 
      if(this.options.autoOpen === true){ 
 
      this.open(); 
 
      } 
 

 
     }; 
 

 
    //More code... 
 

 
    }()); //Line 158 also produces an error, might be related to Line 5's error.

Check out this other SO question that addresses this issue