javascript - 如何在javascript上将对象属性绑定(bind)到this关键字？

Question

如何使用 this 关键字访问、更改 PIXI.Sprite(或其他对象)的属性并将其绑定(bind)到函数范围。使用与 this 不同的名称似乎很荒谬，但我无法弄清楚。

在 javascript 上解决此类 oop 问题的正确方法是什么。

function createEmoji(x , y ) {
    let t = new PIXI.Texture.fromImage(`assets/image (${1+~~(Math.random()*80)}).png`);
    let i = new PIXI.Sprite(t);

    i.anchor.set(.5);
    i.angle = Math.random() * 360;
    i.mag = Math.random() * 3;
    i.x = x;
    i.vx = Math.cos(i.angle) * i.mag;
    i.rotation = i.angle;
    i.tint = Math.random() * 0xffffff;
    i.y = y;
    i.vy = Math.sin(i.angle) * i.mag;
    i.ax = 0;
    i.ay = 0;
    i.speed = Math.random() / 100;

    container.addChild(i);
    return i;
}

添加i.bind(this)给出

Uncaught TypeError: i.bind is not a function
at new createEmoji

更新

好吧，我用 JavaScript 所谓的 class 关键字来理解这一点。

class createEmoji extends PIXI.Sprite {
    constructor(x, y) {
        super();
        this.texture = new PIXI.Texture.fromImage("assets/emoji.png");
        this.x = app.rw;//random position method for x and y
        this.y = app.rh;
        this.t = Vec(x, y, test, window);//another method returns ObservablePoint
        this.scale.set(.5 + Math.random() * .5);
        this.anchor.set(.5);

    }
}

这解决了我一直在寻找的问题。

Answer 1

你无法改变this指的是函数体内。

有四种方法可以确定 this指:

• 您可以将函数作为对象 ( obj.func() ) 的属性来调用，以便将该对象绑定(bind)到 this在函数内部。
• 您可以使用new从“类”实例化一个对象。这将绑定(bind)this在函数内部到具有您的函数的对象 prototype属性作为其原型(prototype)，这也将是 new 的(默认)返​​回值表达。 (本质上，该函数接收正在构造的对象 this ，使其成为“构造函数”)。
• 您可以使用.bind(obj)函数的方法来生成另一个函数，该函数始终将对象绑定(bind)为 this当被调用时。
• 您可以使用.call(…)或.apply(…)方法并将您想要的任何对象传递为 this在函数内部作为第一个参数。

如您所见，所有这些都是确定 this 内容的方法。引用来自调用站点(或者甚至之前，在 bind 的情况下)，因此您无法更改 this 的内容指向函数调用本身内部。

<小时/>

但是，您似乎对 JavaScript 中的 OOP 处理方式感到有些困难，所以让我来解决您的问题。

您似乎正在使用您的createEmoji函数作为构造函数，但您返回 PIXI.Sprite 上的实例。这似乎是困惑的主要根源:为什么你会返回不是 this 的东西？这里？感觉不对。

事实上，这并不是您真正想要的。相反，请对待 createEmoji作为一个免费函数。如果您有 Java 背景，请考虑 static方法。您可以将其称为 var emoji = createEmoji(...);并将其记录为返回 PIXI.Sprite 。它本质上是一个静态工厂方法。没有this现在参与此通话，所以幸运的是您现在有了更清晰的了解。

另一个解决方案是转换 createEmoji到一个成熟的Emoji类，使 Sprite 成为该类的成员(即，将其称为 this.sprite 而不是 i )。在这种情况下，构造函数会将新的表情符号实例设置为 this并且您不需要返回任何东西。除非您的表情符号需要与简单 Sprite 不同的自己的表示和行为，否则我不会这样做，因为它更加复杂。

tl;dr:不要使用createEmoji作为构造函数，但作为返回 Sprite 的函数。就像那样，你所有关于应该做什么的直觉this e 消失了，因为没有 this参与其中。