Question

页面加载时，Javascript 抛出“未捕获的类型错误：无法设置未定义的属性‘x’”

2017-08-29

1350

javascript jquery html

我正在学习如何制作 Javascript 插件来显示模态窗口。我正在尝试学习使用此 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 中重现该错误。链接到 JSFiddle

如能解释此错误发生的原因，我们将不胜感激。

Answer 1

在 strict 环境中， function 内的 this 将为 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);
}());

有关更多信息，请参阅 “use strict” 在 JavaScript 中起什么作用，其背后的原因是什么？。

Answer 2

this 在严格模式下在匿名函数中为 undefined 。查看我添加到代码第一行的 console.log(this); - 然后尝试在不使用 "use strict" 的情况下运行它，并注意它如何按预期工作。

"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.

查看解决此问题的其他 SO 问题