我刚刚开始使用原型JavaScript,并且我很难弄清楚this当范围发生变化时如何在原型函数内保留对主对象的引用.让我说明一下我的意思(我在这里使用jQuery):
MyClass = function() {
this.element = $('#element');
this.myValue = 'something';
// some more code
}
MyClass.prototype.myfunc = function() {
// at this point, "this" refers to the instance of MyClass
this.element.click(function() {
// at this point, "this" refers to the DOM element
// but what if I want to access the original "this.myValue"?
});
}
new MyClass();
Run Code Online (Sandbox Code Playgroud)
我知道我可以通过以下方式执行此操作来保留对主对象的引用myfunc:
var myThis = this;
Run Code Online (Sandbox Code Playgroud)
然后使用myThis.myValue访问主对象的属性.但是当我有一大堆原型函数时会发生什么MyClass?我是否必须this在每个开头保存引用?似乎应该有一个更清洁的方式.这样的情况怎么样:
MyClass = function() {
this.elements $('.elements'); …Run Code Online (Sandbox Code Playgroud) 我知道这可能是基本的痛苦,但我很难绕过它.
class Main
{
constructor()
{
requestAnimationFrame(this.update); //fine
}
update(): void
{
requestAnimationFrame(this.update); //error, because this is window
}
}
Run Code Online (Sandbox Code Playgroud)
似乎我需要一个代理,所以让我们说使用Jquery
class Main
{
constructor()
{
this.updateProxy = $.proxy(this.update, this);
requestAnimationFrame(this.updateProxy); //fine
}
updateProxy: () => void
update(): void
{
requestAnimationFrame(this.updateProxy); //fine
}
}
Run Code Online (Sandbox Code Playgroud)
但是来自Actionscript 3的背景,我不确定这里发生了什么.抱歉,我不确定Javascript的开始位置和TypeScript结束.
updateProxy: () => void
Run Code Online (Sandbox Code Playgroud)
而且,我不相信我这样做是对的.我想要的最后一件事是我的班级大部分都有aa()函数需要访问,aProxy()因为我觉得我写两次相同的东西?这是正常的吗?
我有这个类对静态方法进行内部调用:
export class GeneralHelper extends BaseHelper{
static is(env){
return config.get('env:name') === env;
}
static isProd(){
return GeneralHelper.is('prod');
}
}
Run Code Online (Sandbox Code Playgroud)
我可以使用任何关键字来替换下面一行中的类名:
GeneralHelper.is('prod');
Run Code Online (Sandbox Code Playgroud)
在PHP中也有self,static等ES6是否提供类似这些东西吗?
TY.
我是JavaScript的新手.我所做的一切都是新的,它是现有代码的调整,并编写了一小部分jQuery.
现在我正在尝试用属性和方法编写一个"类",但是我遇到了这些方法的问题.我的代码:
function Request(destination, stay_open) {
this.state = "ready";
this.xhr = null;
this.destination = destination;
this.stay_open = stay_open;
this.open = function(data) {
this.xhr = $.ajax({
url: destination,
success: this.handle_response,
error: this.handle_failure,
timeout: 100000000,
data: data,
dataType: 'json',
});
};
/* snip... */
}
Request.prototype.start = function() {
if( this.stay_open == true ) {
this.open({msg: 'listen'});
} else {
}
};
//all console.log's omitted
Run Code Online (Sandbox Code Playgroud)
问题是in Request.prototype.start,this是未定义的,因此if语句的计算结果为false.我在这做错了什么?
我在回调函数中引用我的对象时遇到了一些普通的旧JavaScript(没有框架)的问题.
function foo(id) {
this.dom = document.getElementById(id);
this.bar = 5;
var self = this;
this.dom.addEventListener("click", self.onclick, false);
}
foo.prototype = {
onclick : function() {
this.bar = 7;
}
};
Run Code Online (Sandbox Code Playgroud)
现在当我创建一个新对象时(在DOM加载后,使用span #test)
var x = new foo('test');
Run Code Online (Sandbox Code Playgroud)
onclick函数中的'this'指向span#test而不是foo对象.
如何在onclick函数中获取对foo对象的引用?
我正在用Vue.js创建一个组件.
当我引用this中的任何所述的生命周期钩(created,mounted,updated等等)它的计算结果为undefined:
mounted: () => {
console.log(this); // logs "undefined"
},
Run Code Online (Sandbox Code Playgroud)
在我的计算属性中也发生了同样的事情:
computed: {
foo: () => {
return this.bar + 1;
}
}
Run Code Online (Sandbox Code Playgroud)
我收到以下错误:
未捕获的TypeError:无法读取未定义的属性"bar"
为什么在这些情况下进行this评估undefined?
示例1中的问题是'this'指的是全局名称而不是myName对象.
我理解使用bind()将this的值设置为特定对象,因此它解决了示例1中的问题,但为什么首先会出现此问题?它只是Javascript的创建方式吗?
我也想知道为什么示例3解决了问题以及示例2和3之间的区别.
this.name = "John"
var myName = {
name: "Tom",
getName: function() {
return this.name
}
}
var storeMyName = myName.getName; // example 1
var storeMyName2 = myName.getName.bind(myName); // example 2
var storeMyName3 = myName.getName(); // example 3
console.log("example 1: " + storeMyName()); // doesn't work
console.log("example 2: " + storeMyName2()); // works
console.log("example 3: " + storeMyName3); // worksRun Code Online (Sandbox Code Playgroud)
在这个es6脚本中,click事件不起作用,因为sayHello方法是用this.elm(<div>)调用的this.
如何在不松散范围的情况下将事件与方法相关联?
class player{
constructor (name) {
this.name = name;
this.elm = document.createElement('div');
this.elm.addEventListener('click', this.sayHello);
}
sayHello() {
console.log(this.name + ' say: "hello!"'); // 'undefined say 'hello!"';
}
kill() {
console.log(`RIP ${this.name} :'(`);
this.elm.addClass('dead');
this.elm.removeEventListener('click', this.sayHello);
}
}
Run Code Online (Sandbox Code Playgroud) 我基本上有一个对象,通过它的原型扩展了一个函数.在该函数内部,存在另一个函数,但是当this在这个嵌套函数中使用时,它似乎不是引用对象,而是函数.
例如,
var sampleObject = function() {
this.foo = 123;
}
sampleObject.prototype.getFoo = function() {
var nested = function() {
return this.foo;
}
return nested();
}
var test = new sampleObject();
window.alert(test.getFoo()); // undefined
Run Code Online (Sandbox Code Playgroud)
在this.foo不参考123的值,但是未定义,因为这指的是嵌套函数,其中没有foo存在.如何从嵌套函数中访问123值?
我有这种情况,我想知道一个承诺的状态.下面,该函数start仅someTest在它不再运行时调用(Promise未挂起).该start函数可以多次调用,但如果在测试仍在运行时调用它,它将不会等待并返回false
class RunTest {
start() {
retVal = false;
if (!this.promise) {
this.promise = this.someTest();
retVal = true;
}
if ( /* if promise is resolved/rejected or not pending */ ) {
this.promise = this.someTest();
retVal = true;
}
return retVal;
}
someTest() {
return new Promise((resolve, reject) => {
// some tests go inhere
});
}
}
Run Code Online (Sandbox Code Playgroud)
我找不到简单检查承诺状态的方法.喜欢的东西this.promise.isPending会很好:)任何帮助将不胜感激!
javascript ×9
this ×4
ecmascript-6 ×3
oop ×2
scope ×2
bind ×1
binding ×1
callback ×1
class ×1
dom ×1
dom-events ×1
es6-promise ×1
events ×1
jquery ×1
promise ×1
prototype ×1
typescript ×1
vue.js ×1
vuejs2 ×1