道场要求和范围

Question

任何人都可以向我解释为什么当 drawSection 被调用时 'this' 值成为全局范围吗？。

有没有办法在这里使用 require 而不必在丢失之前将小部件保存在另一个变量中？

define("my/TextBox", [
  "dojo/_base/declare",
  "dijit/form/ValidationTextBox"
], function(
declare, ValidationTextBox
) {

   function drawSection() {
      alert(this);
      require(["dojo/dom-construct"], function(domConstruct) {
         alert(this); // this = window
      });   
   };    

   return declare([ValidationTextBox], {
       postCreate: function() {
           this.inherited(arguments);            
           drawSection.call(this)
       }
   });
});

Answer 1

退出简单使用dojo/_base/langhitch()函数解决问题。

因为 require(["dojo/dom-construct"], function(domConstruct) {....}) 中的函数引用了全局上下文，

所以在当前上下文中使用 lang.hitch 函数（通过使用 this），问题就解决了

这是一个Fiddle

及以上工作片段：

define("my/TextBox", [
 "dojo/_base/lang",
  "dojo/_base/declare",
  "dijit/form/ValidationTextBox"
], function(lang,
  declare, ValidationTextBox
) {

  function drawSection() {

    alert(this);

    require(["dojo/dom-construct"], lang.hitch(this,function(domConstruct) {

      alert(this); // this = window

    }));

  };
  return declare([ValidationTextBox], {
    postCreate: function() {
      this.inherited(arguments);
      drawSection.call(this)
    }
  });
  
});


require([
    "dojo/parser",
    "my/TextBox",
    "dojo/domReady!"
], function(
    parser,
    TextBox
) {
    
    // important: parse document after the ValidationTextBox was extended
    parser.parse(); 
    
});

<link href="https://ajax.googleapis.com/ajax/libs/dojo/1.8/dijit/themes/claro/claro.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>

<body class="claro">
<input type="text" data-dojo-type="my/TextBox" />,
</body>

Answer 2

您需要像这样使用 dojo/_base/lang lang.hitch：

  require(["dojo/dom-construct"], lang.hitch(this, function(domConstruct) {

        alert(this); // this = window

  }));

这是一个常见的闭包问题。
参见 https://dojotoolkit.org/reference-guide/1.10/dojo/_base/lang.html#hitch

作为一个好的做法，我建议在小部件中使用 drawSection 方法，并在顶部使用 dom-construct 方法（在 postCreate 中调用它时，您将始终需要它所以 "on-demand" 要求有点矫枉过正）

  define("my/TextBox", [
        "dojo/_base/declare",
        "dijit/form/ValidationTextBox",
        "dojo/dom-construct"
  ], function(declare, ValidationTextBox, domConstruct) {

  return declare([ValidationTextBox], {
        postCreate: function() {
              this.inherited(arguments);            
              this.drawSection()
        },
        drawSection: function() {
              alert(this);
              //domConstruct.whaever you want
        }; 
  });
  });

道场要求和范围

dojo require and scope

javascript

dojo