blocks|key|1394545|text|您可以做的是在ensureBufferingHasFinished的参数中传递serviceProvider实例。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1394546|ensureBufferingHasFinished(serviceProvider)+{
+return+new+Promise(function+(resolve,+reject)+{
++(function+waitForBufferingComplete(){
+++++++if+(!serviceProvider.getBufferingStatus())+{
+++++++++alert("RESOLVED");
+++++++++return+resolve();
+++++++}
+++++++setTimeout(waitForBufferingComplete,+250);
+++})();
+});
}|code-block|syntax|javascript|1394547|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

What can you do is to pass the serviceProvider instance in the arguments of ensureBufferingHasFinished.

<pre><code>ensureBufferingHasFinished(serviceProvider) {
 return new Promise(function (resolve, reject) {
 (function waitForBufferingComplete(){
 if (!serviceProvider.getBufferingStatus()) {
 alert("RESOLVED");
 return resolve();
 }
 setTimeout(waitForBufferingComplete, 250);
 })();
 });
}
</code></pre>

blocks|key|5369190|text|将this绑定到Promise函数，并将serviceProvider作为参数传递给Life.将serviceProvider作为第三个参数传递给setTimeout|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|5369191|ensureBufferingHasFinished()+{
++return+new+Promise(function+(resolve,+reject)+{
++++(function+waitForBufferingComplete(serviceProvider){
++++++++if+(!serviceProvider.getBufferingStatus())+{
++++++++++alert("RESOLVED");
++++++++++return+resolve();
++++++++}
++++++++setTimeout(waitForBufferingComplete,+250,+serviceProvider);
++++})(this.serviceProvider);
++}.bind(this));
}|code-block|syntax|javascript|5369192|entityMap^0|1|4|8|7|K|F|1C|F|21|A|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]|$9|R|A|S|B|C]|$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|L|$]]

Bind <code>this</code> to <code>Promise</code> function and pass the <code>serviceProvider</code> as a parameter to the iife. Pass the <code>serviceProvider</code> as the third parameter to the <code>setTimeout</code>

<pre><code>ensureBufferingHasFinished() {
 return new Promise(function (resolve, reject) {
 (function waitForBufferingComplete(serviceProvider){
 if (!serviceProvider.getBufferingStatus()) {
 alert("RESOLVED");
 return resolve();
 }
 setTimeout(waitForBufferingComplete, 250, serviceProvider);
 })(this.serviceProvider);
 }.bind(this));
}
</code></pre>

blocks|key|1394557|text|您的this指向函数的内部作用域。您可以使用局部变量来存储this的引用，并在所有内部作用域中使用它：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1394558|ensureBufferingHasFinished()+{
let+ref+=+this;
return+new+Promise(function+(resolve,+reject)+{
++++(function+waitForBufferingComplete(){
++++++++if+(!ref.serviceProvider.getBufferingStatus())+{
++++++++++alert("RESOLVED");
++++++++++return+resolve();
++++++++}
++++++++setTimeout(waitForBufferingComplete,+250);
++++})();
++});
}|code-block|syntax|javascript|1394559|entityMap^0|2|4|T|4|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

Your <code>this</code> is pointing to the inner scope of the function. You can use a local variable to store the reference of <code>this</code> and use it in all inner scopes:

<pre><code>ensureBufferingHasFinished() {
let ref = this;
return new Promise(function (resolve, reject) {
 (function waitForBufferingComplete(){
 if (!ref.serviceProvider.getBufferingStatus()) {
 alert("RESOLVED");
 return resolve();
 }
 setTimeout(waitForBufferingComplete, 250);
 })();
 });
}
</code></pre>

blocks|key|1585379|text|对于不熟悉JavaScript如何赋值的细微差别的人来说，this关键字是一个令人头疼的问题。this的值对应于执行上下文，而不是作用域。在这种情况下，waitForBufferingComplete的执行上下文与调用ensureBufferingHasFinished的上下文不同。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1585380|关于如何确保访问所需内容，您有几个选择。|1585381|将变量分配给外部作用域|1585382|在函数相互嵌套的情况下，分配this或其属性的古老技巧是快速可靠的：|1585383|function+ensureBufferingHasFinished()+{
++++var+that+=+this,
++++++++sp+=+this.serviceProvider;
++++return+new+Promise(function+(resolve,+reject)+{
++++++++(function+waitForBufferingComplete()+{
++++++++++++//you+can+use+"that.serviceProvider",+or+"sp"
++++++++++++if+(!sp.getBufferingStatus())+{
++++++++++++++++alert("RESOLVED");
++++++++++++++++return+resolve();
++++++++++++}
++++++++++++setTimeout(waitForBufferingComplete,+250);
++++++++})();
++++});
}|code-block|syntax|javascript|1585384|使用function.bind()|1585385|在函数上调用bind会强制它将显式提供的执行上下文作为其参数，如果您没有或不能在包含所需值的范围内进行回调，则会更有用：|1585386|function+ensureBufferingHasFinished()+{
++++return+new+Promise(function+(resolve,+reject)+{
++++++++(function+waitForBufferingComplete()+{
++++++++++++if+(!this.serviceProvider.getBufferingStatus())+{
++++++++++++++++alert("RESOLVED");
++++++++++++++++return+resolve();
++++++++++++}
++++++++++++setTimeout(waitForBufferingComplete.bind(this),+250);
++++++++}.bind(this))();
++++}.bind(this));
}|1585387|或|1585388|function+ensureBufferingHasFinished()+{
++++return+new+Promise(_resolveBufferingPromise.bind(this));
}

function+_resolveBufferingPromise(resolve,+reject)+{
++++(function+waitForBufferingComplete()+{
++++++++if+(!this.serviceProvider.getBufferingStatus())+{
++++++++++++alert("RESOLVED");
++++++++++++return+resolve();
++++++++}
++++++++setTimeout(waitForBufferingComplete.bind(this),+250);
++++}.bind(this))();
}|1585389|您也可以将serviceProvider传递给您在waitForBufferingComplete周围创建的IIFE，尽管对于您的代码结构，只有当您支持兼容ES5的浏览器时才应该这样做，因为在此之前setTimeout不支持传递额外的参数：|1585390|function+ensureBufferingHasFinished()+{
++++return+new+Promise(function+(resolve,+reject)+{
++++++++(function+waitForBufferingComplete(serviceProvider)+{
++++++++++++if+(!serviceProvider.getBufferingStatus())+{
++++++++++++++++alert("RESOLVED");
++++++++++++++++return+resolve();
++++++++++++}
++++++++++++setTimeout(waitForBufferingComplete,+250,+serviceProvider);
++++++++})(this.serviceProvider);
++++}.bind(this));
}|1585391|使用箭头函数(ES2015或更高版本)|1585392|如果您正在为支持ES2015平台进行开发，那么该版本引入了arrow+functions，它忽略了执行上下文，并保留了this的父级的词法范围：|1585393|function+ensureBufferingHasFinished()+{
++++return+new+Promise((resolve,+reject)+=>+{
++++++++var+waitForBufferingComplete+=+()+=>+{
++++++++++++if+(!this.serviceProvider.getBufferingStatus())+{
++++++++++++++++alert("RESOLVED");
++++++++++++++++return+resolve();
++++++++++++}
++++++++++++setTimeout(waitForBufferingComplete,+250);
++++++++}
++++});
}|1585394|Read+up+on+more+about+this+on+MDN。|1585395|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions|1|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this^0|T|4|1B|4|24|O|31|Q|0|0|0|E|4|0|0|2|F|0|6|4|0|0|0|0|5|F|P|O|2R|A|0|0|0|1N|4|T|F|0|0|0|M|4|0|X|1|0^^$0|@$1|2|3|4|5|6|7|1M|8|@$9|1N|A|1O|B|C]|$9|1P|A|1Q|B|C]|$9|1R|A|1S|B|C]|$9|1T|A|1U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1V|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|1W|8|@]|D|@]|E|$]]|$1|J|3|K|5|6|7|1X|8|@$9|1Y|A|1Z|B|C]]|D|@]|E|$]]|$1|L|3|M|5|N|7|20|8|@]|D|@]|E|$O|P]]|$1|Q|3|R|5|6|7|21|8|@$9|22|A|23|B|C]]|D|@]|E|$]]|$1|S|3|T|5|6|7|24|8|@$9|25|A|26|B|C]]|D|@]|E|$]]|$1|U|3|V|5|N|7|27|8|@]|D|@]|E|$O|P]]|$1|W|3|X|5|6|7|28|8|@]|D|@]|E|$]]|$1|Y|3|Z|5|N|7|29|8|@]|D|@]|E|$O|P]]|$1|10|3|11|5|6|7|2A|8|@$9|2B|A|2C|B|C]|$9|2D|A|2E|B|C]|$9|2F|A|2G|B|C]]|D|@]|E|$]]|$1|12|3|13|5|N|7|2H|8|@]|D|@]|E|$O|P]]|$1|14|3|15|5|6|7|2I|8|@]|D|@]|E|$]]|$1|16|3|17|5|6|7|2J|8|@$9|2K|A|2L|B|C]]|D|@$9|2M|A|2N|1|2O]]|E|$]]|$1|18|3|19|5|N|7|2P|8|@]|D|@]|E|$O|P]]|$1|1A|3|1B|5|6|7|2Q|8|@$9|2R|A|2S|B|C]]|D|@$9|2T|A|2U|1|2V]]|E|$]]|$1|1C|3|-4|5|6|7|2W|8|@]|D|@]|E|$]]]|1D|$1E|$5|1F|1G|1H|E|$1I|1J]]|1K|$5|1F|1G|1H|E|$1I|1L]]]]

The <code>this</code> keyword is a source of headaches to people unfamiliar with the nuances of how JavaScript assigns its value. The value of <code>this</code> corresponds to execution context, and not scope. In this case, <code>waitForBufferingComplete</code>'s execution context isn't the same as the context <code>ensureBufferingHasFinished</code> is called with.

You have a few options on how to ensure you're accessing what you need.

<h3>Assign variables to outer scope</h3>

The age-old hack of assigning <code>this</code> or properties thereof is quick and reliable in situations like yours where functions are nested within each other:

<pre><code>function ensureBufferingHasFinished() {
 var that = this,
 sp = this.serviceProvider;
 return new Promise(function (resolve, reject) {
 (function waitForBufferingComplete() {
 //you can use "that.serviceProvider", or "sp"
 if (!sp.getBufferingStatus()) {
 alert("RESOLVED");
 return resolve();
 }
 setTimeout(waitForBufferingComplete, 250);
 })();
 });
}
</code></pre>

<h3>Use <code>function.bind()</code></h3>

Calling <code>bind</code> on a function forces it to have the execution context you explicitly give as its argument, and is more useful if you do not or cannot have your callbacks within the scope containing the value you need:

<pre><code>function ensureBufferingHasFinished() {
 return new Promise(function (resolve, reject) {
 (function waitForBufferingComplete() {
 if (!this.serviceProvider.getBufferingStatus()) {
 alert("RESOLVED");
 return resolve();
 }
 setTimeout(waitForBufferingComplete.bind(this), 250);
 }.bind(this))();
 }.bind(this));
}
</code></pre>

or

<pre><code>function ensureBufferingHasFinished() {
 return new Promise(_resolveBufferingPromise.bind(this));
}

function _resolveBufferingPromise(resolve, reject) {
 (function waitForBufferingComplete() {
 if (!this.serviceProvider.getBufferingStatus()) {
 alert("RESOLVED");
 return resolve();
 }
 setTimeout(waitForBufferingComplete.bind(this), 250);
 }.bind(this))();
}
</code></pre>

You can also pass the <code>serviceProvider</code> to the IIFE you made around <code>waitForBufferingComplete</code>, though with your code structure you should only do this if you're supporting ES5-compatible browsers as <code>setTimeout</code> didn't support passing additional parameters until then:

<pre><code>function ensureBufferingHasFinished() {
 return new Promise(function (resolve, reject) {
 (function waitForBufferingComplete(serviceProvider) {
 if (!serviceProvider.getBufferingStatus()) {
 alert("RESOLVED");
 return resolve();
 }
 setTimeout(waitForBufferingComplete, 250, serviceProvider);
 })(this.serviceProvider);
 }.bind(this));
}
</code></pre>

<h3>Use arrow functions (ES2015 or later)</h3>

If you're developing for platforms that support ES2015, that version introduced <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions" rel="nofollow noreferrer">arrow functions</a> which ignore execution context and retain the lexical scope of <code>this</code> from its parent:

<pre><code>function ensureBufferingHasFinished() {
 return new Promise((resolve, reject) =&gt; {
 var waitForBufferingComplete = () =&gt; {
 if (!this.serviceProvider.getBufferingStatus()) {
 alert("RESOLVED");
 return resolve();
 }
 setTimeout(waitForBufferingComplete, 250);
 }
 });
}
</code></pre>

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this" rel="nofollow noreferrer">Read up on more about <code>this</code> on MDN</a>.

blocks|key|1394585|text|试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1394586|++++waitForBufferingComplete+=+function(bufferingSuccess){
++++++++++++if+(!this.serviceProvider.getBufferingStatus())+{
++++++++++++++++++bufferingSuccess(true);
++++++++++++}
++++++++++++else{
++++++++++++++++setTimeout(waitForBufferingComplete,+250);
++++++++++++}
++++++++}

++++++++ensureBufferingHasFinished()+{
++++++++++return+new+Promise(function+(resolve,+reject)+{
++++++++++++waitForBufferingComplete(function(isFinishedBuffering){
++++++++++++++++if+(isFinishedBuffering){
++++++++++++++++++++resolve('ok');
++++++++++++++++}++++++++++++++++++++
++++++++++++});
++++++++++});
++++++++}|code-block|syntax|javascript|1394587|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Try this:

<pre><code> waitForBufferingComplete = function(bufferingSuccess){
 if (!this.serviceProvider.getBufferingStatus()) {
 bufferingSuccess(true);
 }
 else{
 setTimeout(waitForBufferingComplete, 250);
 }
 }

 ensureBufferingHasFinished() {
 return new Promise(function (resolve, reject) {
 waitForBufferingComplete(function(isFinishedBuffering){
 if (isFinishedBuffering){
 resolve('ok');
 } 
 });
 });
 }
</code></pre>

I have this piece of code that uses promises API to check if a the buffering function from my <code>serviceProvider</code> component has completed. The <code>serviceProvider</code> has a flag for that, which can be polled with <code>getBufferingStatus()</code>.

When using <code>ensureBufferingHasFinished().then(....).catch(err =&gt; console.log(err))</code>, it shows me that the condition cannot be accessed from <code>this.serviceProvider</code>

I have used promises before, but this is the first time I am using one in this particular situation. How can I bind <code>this.</code> to the promise? All help is greatly appreciated!

<pre><code>ensureBufferingHasFinished() {
 return new Promise(function (resolve, reject) {
 (function waitForBufferingComplete(){
 if (!this.serviceProvider.getBufferingStatus()) {
 alert("RESOLVED");
 return resolve();
 }
 setTimeout(waitForBufferingComplete, 250);
 })();
 });
}
</code></pre>

Promise throwing error because it cannot access this

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我有一段代码，它使用promises API检查来自我的serviceProvider组件的缓冲函数是否已经完成。可以使用getBufferingStatus()对serviceProvider进行轮询。在使用ensureBufferingHasFinished().then(....).catch(err => co...

问Promise抛出错误，因为它无法访问此
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Promise抛出错误，因为它无法访问此EN