如何在 javascript 上将对象属性绑定到此关键字？

Question

如何使用 this 关键字来访问、更改和绑定 PIXI.Sprite（或其他对象）的属性到函数范围。使用不同的名称而不是 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()) 的属性，以便对象在函数内部绑定到 this。
您可以使用 new 从 "class" 实例化一个对象。这会将函数内部的 this 绑定到以函数 prototype 属性作为原型的对象，这也将是 [= 的（默认）return 值14=] 表达式。（本质上，该函数接收被构造为 this 的对象，使其成为 "constructor function"）。
您可以使用一个函数的 .bind(obj) 方法生成另一个函数，该函数总是在调用时将对象绑定为 this。
您可以使用 .call(…) 或 .apply(…) 方法并将您想要的任何对象作为 this 传递到函数内部作为第一个参数。

如您所见，所有这些都是确定 this 从调用站点指代 的方法（甚至更早，在 [=25 的情况下） =]), 所以你不能改变函数调用本身中 this 指向的内容。

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

您似乎将 createEmoji 函数用作构造函数，但您 return 在 PIXI.Sprite 上创建了一个实例。这似乎是造成混淆的主要原因：为什么要 return 不是 this 的东西？感觉不对。

的确，那不是你真正想要的。相反，将 createEmoji 视为自由函数。如果您来自 Java 背景，请考虑 static 方法。您称它为 var emoji = createEmoji(...); 并将其记录为 returning a PIXI.Sprite。它本质上是一个静态工厂方法。现在没有 this 参与此调用，所以幸运的是你现在有了更清晰的画面。

另一种解决方案是将 createEmoji 转换为完全成熟的 Emoji class，使精灵成为 class 的成员（即，将其称为this.sprite 而不是 i）。在这种情况下，构造函数会将您的新表情符号实例设为 this，而您不需要 return 任何东西。除非你的表情符号需要它自己的表示和行为来区别于简单的精灵，我不会这样做，因为它更复杂。

tl;dr：不要将 createEmoji 用作构造函数，而是将 return 用作精灵的函数。就这样，你关于 this 应该做什么的所有直觉都消失了，因为没有 this 涉及。

如何在 javascript 上将对象属性绑定到此关键字？

How to bind object properties to this keyword on javascript?

javascript

oop

pixi.js