【问题标题】:Differences between "this" in JavaScript and ActionScriptJavaScript 和 ActionScript 中的“this”之间的区别
【发布时间】:2017-07-31 02:15:49
【问题描述】:

我的背景是 JavaScript。我对 ES5 和 ES6 都有非常深入的了解。在工作中,我最近被分配了一个项目,该项目涉及一个使用 AS2 的旧闪存应用程序。据我了解,ActionScript 与 ES5 非常相似,但具有类和可选的严格类型(类似于 TypeScript 和 Flow),以及一些其他经典的 OO 特性。到目前为止它相当简单,但我无法理解 this 和引用如何在 ActionScript 中工作。

这是我对 JavaScript 的理解。函数中的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
  • 一个类的实例,如果该函数是在该类的原型上定义的,例如:

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 中,情况似乎有些不同。一方面,如果您在该类的方法中执行此操作,则可以在没有this 的情况下访问类成员,类似于 C# 和 Java 等语言:

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(),它们似乎工作起来就像JavaScript 变体:http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/2/help.html?content=00001072.html#265677。似乎也没有原型,这是有道理的,因为根据我的理解,类是更抽象的句法结构而不是函数(就像 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 的成员,或者其他不是类方法的松散函数,会发生什么?我猜在第一种情况下,它会解析为this.childClip 并按预期工作,但在第二种情况下,解析会失败,因为onRelease 处理程序的闭包不包含对@987654339 的引用@实例。

【问题讨论】:

  • AS2 有点像 ES3。 AS3 基于废弃的 ES4 规范(在类等方面规则不同)。也没有像 Function.prototype.bind 这样的 ES5+ 特性。
  • this 在 ES 中只是指由当前函数/方法 eval 确定的当前执行上下文,还有this 引用window 的全局执行上下文。

标签: javascript flash actionscript


【解决方案1】:

看到目前写的cmets比较关注JS,所以我尽量从ActionScript的角度来回答。

在 AS2/AS3 的世界中,定义为类方法的函数将其 this 值绑定到类。这是具有现代类的许多高级语言的典型特征,例如 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 是该类的成员,并且会像您预期的那样打印 2。这是因为解释器在堆栈中寻找下一个最接近的东西。换句话说,您排除 this 是模棱两可的,所以它知道它需要执行查找。

但是,如果您改为使用trace(this.number),您会发现您收到的是undefined(甚至可能是一个错误)。这是因为this不是类上的成员变量,现在指向一个类似JS的“全局对象”。为避免与全局对象共舞,ActionScript 开发人员通常将其所有侦听器定义为类实例方法:

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);

希望有帮助!

【讨论】:

  • 这正是我想要的。谢谢!
  • 完全没问题! :)
【解决方案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

将方法绑定到某些对象被称为“委托”: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,保存函数代码、局部变量
  • 全局变量

使用以下代码,注释一些“索引”变量,你会看到它:

// 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()();

【讨论】:

    猜你喜欢
    • 2013-10-23
    • 2012-08-18
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-12-22
    • 2012-03-15
    • 1970-01-01
    • 2016-01-07
    相关资源
    最近更新 更多