相关疑难解决方法(0)

在JavaScript原型函数中保留对"this"的引用

我刚刚开始使用原型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)

javascript oop scope this prototype-programming

89
推荐指数
3
解决办法
6万
查看次数

在类方法中打字"this"

我知道这可能是基本的痛苦,但我很难绕过它.

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()因为我觉得我写两次相同的东西?这是正常的吗?

jquery proxy-classes this typescript

75
推荐指数
5
解决办法
5万
查看次数

ES6 - 在类中调用静态方法

我有这个类对静态方法进行内部调用:

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 oop ecmascript-6

70
推荐指数
3
解决办法
4万
查看次数

'this'在JavaScript类方法中未定义

我是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 prototype class

65
推荐指数
6
解决办法
7万
查看次数

JavaScript回调范围

我在回调函数中引用我的对象时遇到了一些普通的旧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对象的引用?

javascript events binding scope callback

58
推荐指数
3
解决办法
5万
查看次数

VueJS:为什么"这个"未定义?

我正在用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

javascript this vue.js vuejs2

46
推荐指数
2
解决办法
2万
查看次数

为什么JavaScript bind()是必要的?

示例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); // works
Run Code Online (Sandbox Code Playgroud)

javascript bind this

43
推荐指数
2
解决办法
6943
查看次数

ES6类:在方法上应用'addEventListener'访问'this'

在这个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)

javascript dom dom-events ecmascript-6

40
推荐指数
1
解决办法
4万
查看次数

'this'在原型函数中的函数中

我基本上有一个对象,通过它的原型扩展了一个函数.在该函数内部,存在另一个函数,但是当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值?

javascript

39
推荐指数
4
解决办法
4万
查看次数

如何检查Promise是否有待处理

我有这种情况,我想知道一个承诺的状态.下面,该函数startsomeTest在它不再运行时调用(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 promise ecmascript-6 es6-promise

39
推荐指数
1
解决办法
4万
查看次数