Mootools类变量范围 [英] Mootools class variable scope

问题描述

参加这个类：

  var MyClass = new Class（{
）实现：[Events，Options] 
 initialize：function（）{
 
 this.a = 1; 
 
}，
 
 myMethod：function（）{
 
 var mc = new differentClass（{
 event：{
 onClick：function（）{
 
 console.log（this.a）; // undefined （应为1，2，3等）
 
 this.a ++; 
 
 
} 
} 
}）; 
 
} 
}）; 
  

如何保留 this.a 的值？我基本上试图从最后一点到刚刚点击的坐标画一条线（使用画布）。

我不想绑定这个，因为它很明显，它会覆盖 differentClass 选项。

装饰器via via通过使用多种模式，您可以通过

解决方案< .bind（）

  var mc = new differentClass $ b events：{
 click：function（）{
 console.log（this.a）; 
 this.a ++; 
} .bind（this）//将函数的作用域绑定到上级作用域（myclass）
} 
}）; 
  

保存参考。

  var self = this; //引用myClass的父实例
 var mc = new differentClass（{
 event：{
 click：function（）{
 console.log（self.a）; 
 self.a ++; 
} 
} 
}）; 
  

指向可以处理它的myClass方法：

  handleClick：function（）{
 this.a ++; 
}，
 myMethod：function（）{
 var mc = new differentClass（{
 events：{
 click：this.handleClick.bind（this）
} 
}）; 
} 
  

第二个 - 通过存储引用是首选，足迹和通用支持，而 .bind 在每个浏览器中都不可用，需要进行填充，以及在执行时对函数进行curry的额外时间。

self 是你可以在mootools-core本身找到。

如果性能没有风险，方法3可能提供最佳的可读性和代码结构。该方法的参数将保持点击处理程序的传递，即 event 和 event.target 将是处理程序。

在模式＃2中使用 self ，指向匿名函数内的点击处理程序（例如，对于其他类），这可能是有用的 - 重新绑定上下文可能是颈部的痛苦

Take this class:

var MyClass = new Class({
    Implements: [Events, Options],
    initialize: function() {

        this.a = 1;

    },

    myMethod: function() {

        var mc = new differentClass({
            events: {
                onClick: function() {

                    console.log(this.a); // undefined (should be 1, 2, 3 etc)

                    this.a ++;


                }
            }
        });    

    }
});

How do I keep the value of this.a? I am basically trying to draw a line (using canvas) from the last point to the co-ordinates just clicked.

[EDIT]

I dont want to bind this as it's bad apparently and it will over-ride the differentClass options.

解决方案

several patterns are available.

decorator via .bind()

var mc = new differentClass({
    events: {
        click: function() {
             console.log(this.a);
             this.a ++;
        }.bind(this) // binds the scope of the function to the upper scope (myclass)
    }
});    

keeping a reference.

var self = this; // reference parent instance of myClass
var mc = new differentClass({
    events: {
        click: function() {
             console.log(self.a); 
             self.a ++;
        }
    }
});    

pointing to a myClass method that can deal with it:

handleClick: function() {
    this.a++;
},
myMethod: function() {
    var mc = new differentClass({
        events: {
            click: this.handleClick.bind(this)
        }
    });    
}

the 2-nd one - by storing a reference is preferred due to the smaller footprint and universal support whereas .bind is not available in every browser and needs to be shimmed as well as the extra time to curry the function on execution.

self is what you will find in mootools-core itself when possible.

if performance is not at risk, method 3 can probably offer the best readability and code structure. the arguments to the method will remain what the click handler passes, i.e. event and event.target will be the handler.

in pattern #2 with self, this will point to the click handler within the anonymous function (or to the other class, for example), which may be useful as well - rebinding context can be a pain in the neck

这篇关于Mootools类变量范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！