gpt4 book ai didi

javascript - 将对象函数传递给 requestAnimationFrame 时丢失对象引用

转载 作者:行者123 更新时间:2023-11-30 17:00:36 25 4
gpt4 key购买 nike

<分区>

我想知道为什么这些代码变体会以它们的方式运行。

第一次设置:

var a = {

val: 23,

div: null,

test: function(){

this.div.innerHTML = this.div.innerHTML + ' ' + this.val;

},

run: function(){

// why is "this" the window object here when called by requestAnimationFrame?

requestAnimationFrame(this.run);

this.test();

},

init: function(){

this.div = document.getElementById('output');

this.run();

}

};

a.init();

我希望这个可以工作,但是一旦 requestAnimationFrame 开始调用 run 函数就失败了,因为 this 指的是 Window 当被 requestAnimationFrame 调用时。 fiddle :http://jsfiddle.net/titansoftime/gmxourcq/

这个有效:

var a = {

val: 23,

div: null,

test: function(){

this.div.innerHTML = this.div.innerHTML + ' ' + this.val;

},

run: function(){

var self = this;

requestAnimationFrame(function(){ self.run(); });

this.test();

},

init: function(){

this.div = document.getElementById('output');

this.run();

}

};

a.init();

通过闭包传递 run 函数解决了这个问题。为什么这个工作而不是前面的例子工作?我的实际代码需要非常高效地运行,我不想在我的运行循环中使用闭包,因为我不想戳 GC。也许这没什么大不了的? (我主要担心移动设备)。 fiddle :http://jsfiddle.net/titansoftime/Lqhcwoyu/

最后一个按预期工作的案例:

var a = {

val: 23,

div: null,

test: function(){

this.div.innerHTML = this.div.innerHTML + ' ' + this.val;

},

run: function(){

requestAnimationFrame(a.run);

a.test();

},

init: function(){

this.div = document.getElementById('output');

this.run();

}

};

a.init();

再次出于性能 (OCD) 原因,如果可以避免,我宁愿不通过全局引用此对象。 fiddle :http://jsfiddle.net/titansoftime/5816fLxe/

有人可以向我解释第一个示例失败的原因以及关于运行此循环以尽可能提高内存/GC 效率的最佳方法吗?

感谢您的宝贵时间。

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com