javascript - 为什么我无法在 Windows 8 JavaScript 应用程序中通过此访问变量

Question

我的代码非常简单。对我来说它应该有效。

var preview = WinJS.Class.define(
   function (el, options) {
       el.winControl = this;
       this.el = el;

       this.textarea = d.getElementById('preview-input');
       this.preview = d.getElementById('preview-text');
       this.form = d.getElementById('perview-form');

       this.preview.addEventListener('click', this.click, false);
       //WinJS.Utilities.query("button", this.form)
       //this.preview.addEventListener('', this.save, false);

   },

   {
       click: function (e) {
           this.form.style('display', 'block');
       }
   }
);

WinJS.Namespace.define('RegCtrl', { preview: preview });

但是当点击发生时，this.form似乎是undefined of null。为什么？我不想在类的每个方法中都初始化对象。

新测试

我做了非常小的附加测试

var preview = WinJS.Class.define(
   function (el, options) {
       var test = 1;
       this.test = 1;
       this.test1();
   },

   {
       test1: function () {
           console.log(this.form, test);
       }
   }

); WinJS.Namespace.define('RegCtrl', { preview: preview });

此测试在行 this.test1(); 上失败。我现在认为这个类叫做 RegCtrl.preview() 而不是 new RegCtrl.preview()。

我如何进入这称为 new 而不是简单函数的函数内部？

Answer 1

其他答案没有解释发生了什么，因此给出了不正确的建议。

JavaScript 具有一流的函数对象——您可以将它们作为值传递。这正是您在设置此回调时所做的:

this.preview.addEventListener('click', this.click, false);

您正在获取 this.click 属性的内容，它恰好是一个函数，并将其传递给 addEventListener 函数以对其进行任何操作。

我对那里的术语非常具体 - 请注意，我特别说的是函数，而不是方法。 JavaScript 并没有真正的方法构造，它只是将方法作为对象的属性。

那么“this”成员从何而来呢？它由调用者决定——您在“.”左侧使用的对象。就是成为this的值的那个。例如，

function exampleFunc() { console.log("this.myName = " + this.myName); }

var a = { myName: "Chris", doSomething: exampleFunc };
var b = { myName: "Bob", doSomething: exampleFunc };

请注意，我已将完全相同的功能分配给 doSomething 属性。发生了什么:

a.doSomething(); // Outputs "this.myName = Chris"
b.doSomething(); // Outputs "this.myName = Bob"

通过两个不同的对象调用的完全相同的函数对象具有不同的 this 指针。

exampleFunc 是一个全局函数，我们这样调用它:

exampleFunc() // Outputs "this.myName = undefined"

那么 undefined 是从哪里来的呢？在全局函数中，“this”被设置为 window(全局作用域)，它没有定义 myName 属性。这也意味着您可以改为这样做:

myName = "Global Name"; // note, no var - we want this global
exampleFunc(); // Outputs "this.myName = Global Name"

好的，原来的问题是怎么回事？基本上，您已经将函数 this.click 传递为回调，但是您还没有传递您希望它调用的“this”指针。实际上，addEventListener 没有办法传递 this 指针。因此，当函数被调用时，this 不是指向您的对象。我完全不记得它指的是什么 - 它是窗口还是被单击的元素，请查看 DOM 文档进行验证。

要让它在正确的上下文(上下文 = 正确的“this”)下调用正确的函数，传统的方法是使用闭包。在变量中捕获“this”，然后传入一个匿名函数，该函数使用正确的 this 指针调用您的实际回调。代码如下所示:

var preview = WinJS.Class.define(
   function (el, options) {

       // Capture your current this pointer in a global variable
       // Using "that" as the name comes from JavaScript: The Good Parts book
       var that = this;

       el.winControl = this;
       this.el = el;

       this.textarea = d.getElementById('preview-input');
       this.preview = d.getElementById('preview-text');
       this.form = d.getElementById('perview-form');

       // Note what gets passed instead of this.click:
       this.preview.addEventListener('click', 
           function (e) {
               // NOTE: Calling through "that": "this" isn't pointing to the right object anymore
               // Calling through "that" resets "this" inside the call to click
               that.click(e);
           }, false);    
   },

   {
       click: function (e) {
           this.form.style('display', 'block');
       }
   }
);

这是一个足够常见的模式，ECMAScript 5 有一个实用函数可以为您构建这些包装器 - function.bind。这样做:

       this.preview.addEventListener('click', 
           this.click.bind(this),
           false);    

构造 this.click.bind(this) 将构造一个新函数，当调用该函数时，会将“this”引用设置为您传递的任何内容(在本例中为“this”)，然后调用您调用它的函数。

是的，“this”有很多不同的值。跟踪“this”指向什么是掌握 JavaScript 编程的重要部分。