如何使用此关键字访问、更改和绑定 PIXI。精灵(或其他对象)的属性到函数范围。除此之外，使用其他名称似乎很荒谬，但我无法弄清楚.
在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);
}
}
这解决了我一直在寻找的问题。
您无法更改函数主体中this引用的内容。
有四种方法可以确定this所指的内容：
- 你可以调用一个函数作为对象的属性(
obj.func())，以便该对象绑定到函数内部的this。 - 您可以使用
new从"类"实例化对象。 这会将函数内部的this绑定到将函数prototype属性作为其原型的对象，该对象也将是new表达式的(默认)返回值。 (本质上，该函数接收被构造为this的对象，使其成为"构造函数")。 - 可以使用函数的
.bind(obj)方法生成另一个函数，该函数在调用时始终将对象绑定为this。 - 您可以使用
.call(…)或.apply(…)方法，并将所需的任何对象作为第一个参数传递到函数内部this。
如您所见，所有这些都是从调用站点(甚至在bind的情况下甚至在调用站点之前)确定this引用的内容的方法，因此您无法从函数调用本身中更改this指向的内容。
但是，您似乎在 JavaScript 中对 OOP 的做事方式有些困难，所以让我解决您的担忧。
您似乎正在使用createEmoji函数作为构造函数，但您正在返回一个实例PIXI.Sprite. 这似乎是混淆的主要来源：为什么要返回这里没有this的东西？感觉不对劲。
事实上，这不是你想要的。 相反，createEmoji视为自由函数。 如果您来自 Java 背景，请考虑static方法。 您将其称为var emoji = createEmoji(...);并将其记录为返回PIXI.Sprite。 从本质上讲，这是一种静态工厂方法。 现在这个电话没有涉及this，所以幸运的是你现在有一个更清晰的画面。
另一种解决方案是将createEmoji转换为成熟的Emoji类，使精灵成为该类的成员(即，将其称为this.sprite而不是i)。 在这种情况下，构造函数将使您的新表情符号实例this，您无需返回任何内容。 除非你的表情符号需要自己的表现和行为，而不是一个简单的精灵，否则我不会这样做，因为它更复杂。
tl;dr：不要将createEmoji用作构造函数，而是用作返回精灵的函数。 就这样，你所有关于应该this什么的直觉都消失了，因为没有涉及this。