JavaScript 和 ActionScript 中的 "this" 之间的区别

Question

我的背景是 Java脚本。我对 ES5 和 ES6 都有非常深入的理解。在工作中，我最近被分配了一个项目，该项目涉及一个使用 AS2 的较旧的 Flash 应用程序。据我了解，ActionScript 与 ES5 非常相似，但具有 classes 和可选的严格类型（类似于 TypeScript 和 Flow），以及其他一些 classic OO 功能。到目前为止，它相当简单，但我无法理解 this 和引用在 ActionScript 中的工作方式。

这是我对Java脚本的理解。 this中的一个函数可以参考：

一个绑定变量，如果使用 Function.bind()（以及 Function.call() 和 Function.apply()），则不能在绑定函数中更改，例如:

function func() {
    return this.number;
}

var bound = func.bind({ number: 2 });
console.log(bound()); // 2

一个对象，如果该函数作为该对象的方法被调用，例如：

function func() {
    return this.number;
}

var obj = { number: 2, func: func };
console.log(obj.func()); // 2

一个 class 的实例，如果该函数是在 class 的原型上定义的，例如：

function Class() {
    this.number = 2;
}
Class.prototype.func = function func() {
    return this.number;
}

console.log(new Class().func()); // 2

全局对象，如果调用函数时没有任何类型的绑定或对象或实例附加到它，例如：

var number = 2;

function func() {
    return this.number;
}

console.log(func()); // 2

在 ActionScript 中，事情似乎有点不同。一方面，如果您在 class 的方法中进行访问，则可以在没有 this 的情况下访问 class 成员，类似于 C# 和 Java:[=31 等语言=]

class MyClass {
    private var number:Number = 2;

    public function func():Number {
        return number;
    }
}

trace(new MyClass().func()); // 2

此外，ActionScript 标准库似乎没有 Function.bind() 方法，尽管它确实有 Function.apply() 和 Function.call()，它们的工作方式似乎与 Java脚本变体：http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/2/help.html?content=00001072.html#265677。似乎也没有原型，这是有道理的，因为根据我的理解，classes 是更抽象的句法结构而不是函数（就像 C#/Java）。

所以我的问题是，排除 Function.bind() 和 Function.prototype 的缺失，ActionScript 和 JavaScript 之间的规则是否相同？

此外，如果我这样做会发生什么：

class SomeClip extends MovieClip {
    private var childClip:MovieClip;
    private var number:Number = 2;

    public function SomeClip() {
        this.onLoad = function() {
            // SomeClip onLoad hander, `this` will be the SomeClip instance

            childClip._visible = true; // How is childClip resolved here?

            childClip.onRelease = function() {
                // childClip onRelease handler, `this` will be childClip

                trace(number); // How is number resolved here?
            };
        };
    }
}

基本上，如果您在事件处理程序中访问一个没有 this 的成员，或者其他一些不是 class 方法的松散函数，会发生什么？我猜想在第一种情况下，它会解析为 this.childClip 并按预期工作，但在第二种情况下，解析会失败，因为 onRelease 处理程序的闭包不包含引用到 SomeClip 实例。

Answer 1

我看到目前写的评论都比较关注JS，所以我会尽量从ActionScript的角度来回答。

在 AS2/AS3 的世界中，在 class 上定义为方法的函数将其 this 值绑定到 class。这是许多具有现代 classes 的高级语言的典型特征，例如 Java、Haxe 等。因此，在 ActionScript 中，您很少会发现需要使用 this除了变量名称可能被函数参数遮盖的情况外的关键字：

public function Point(x:Number = 0, y:Number = 0)
{
    // A rare but necessary use-case of "this" in AS2/AS3
    this.x = x;
    this.y = y;
}

另一方面，如果您提供的函数像您编写的示例中那样是匿名的，则行为取决于您是否在前面加上 this:

childClip.onRelease = function() {
    trace(number);
};

在这种情况下，ActionScript 能够确定 number 是 class 的成员，并且会像您预期的那样打印 2。这是因为解释器在堆栈中寻找下一个最接近的东西。换句话说，你通过排除 this 是模棱两可的，所以它知道它需要执行查找。

然而，如果您改为 trace(this.number)，您会发现您得到 undefined（甚至可能是错误）。这是因为this不是class上的成员变量，现在指向一个类似于JS的"global object"。为了避免与全局对象共舞，ActionScript 开发人员通常将所有侦听器定义为 class 实例方法：

class MyClass extends EventDispatcher
{
    private function MyClass()
    {
        addEventListener(Event.CHANGE, onChangeEvent);
    }
    private function onChangeEvent(e:Event) {
        trace(this); // refers to this class, and no need for bind() like JS
    }
}

组织良好的 AS3 代码几乎从不包含内联匿名函数，因为使用显式函数引用更容易处理垃圾回收。

最后要注意的一件事 - 您可以期望作为 ActionScript 中常规 Objects 方法的函数的行为类似于 JavaScript，其中通过事件侦听器传递它们将导致 this 丢失，Flash 将不会执行魔法查找来定位您引用的变量：

var obj = {
    func: function () {
        trace(this); // weird global object
    }
};
addEventListener(Event.CHANGE, obj.func);

希望对您有所帮助！

Answer 2

在 AS2 中，函数未绑定并在调用时获得 "this" 引用传递（显然是通过 Function.apply 或对象引用）：

function getIndex()
{
    trace(this.index);
}

var A = {index:1, getIndex:getIndex};
var B = {index:2, getIndex:getIndex};

A.getIndex(); // 1
B.getIndex(); // 2
B.getIndex.apply(A); // 1

调用了某些对象的绑定方法"delegating"：http://help.adobe.com/en_US/AS2LCR/Flash_10.0/help.html?content=00001842.html#1001423简而言之，函数也是对象，您可以创建特殊的函数对象，它引用了要调用的方法和"this" 要传递的对象：

function getIndex()
{
    trace(this.index);
}

function bind(method, target):Function
{
    var result:Function = function()
    {
        // arguments.callee is always a reference
        // to the current function object
        arguments.callee.method.apply(arguments.callee.target);
    }

    result.method = method;
    result.target = target;

    return result;
}

var A = {index:1};
var B = {index:2};

A.getIndex = bind(getIndex, A);
B.getIndex = bind(getIndex, B);

A.getIndex(); // 1
B.getIndex(); // 2
B.getIndex.apply(A); // 2

然后，如果您不使用 "this" 引用，一旦您通过名称寻址某个变量，就会有多个上下文按顺序搜索此类变量：

局部函数变量
局部包装函数变量（这真的很可怕，因为没有人真正知道这些变量存在于何处，而且它是一个潜在的内存泄漏）
MovieClip，保存函数代码，局部变量
全局变量

玩下面的代码，注释一些 "index" 变量，你会看到它：

// Global variable.
_global.index = 6;

// MovieClip local variable.
var index = 5;

function wrap():Function
{
    // Wrapper function local variable.
    var index = 4;

    return function()
    {
        // Function local variable.
        var index = 3;
        trace(index);
    }
}

wrap()();

JavaScript 和 ActionScript 中的 "this" 之间的区别

Differences between "this" in JavaScript and ActionScript

javascript

flash

actionscript