Program Tip

'this'는 JavaScript 클래스 메서드에서 정의되지 않았습니다.

programtip 2020. 11. 28. 10:20
반응형

'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

문제는에,이다 Request.prototype.start, this정의되어 있지 않습니다 따라서 문 평가되면 false로. 내가 여기서 뭘 잘못하고 있니?


시작 기능을 어떻게 호출하고 있습니까?

이것은 작동합니다 ( 새로운 것이 핵심입니다)

var o = new Request(destination, stay_open);
o.start();

직접처럼 호출 할 경우 Request.prototype.start(), this(글로벌 컨텍스트를 참조합니다 window브라우저에서).

또한 this정의되지 않은 경우 오류가 발생합니다. if 표현식은 false로 평가되지 않습니다.

업데이트 : this객체가 선언에 따라 설정되지 않고 호출에 의해 설정 됩니다 . 의미하는 바는 함수 속성을 같은 변수에 할당 x = o.start하고 호출 x()하면 this내부 시작이 더 이상 참조하지 않는다는 것 o입니다. 이것은 당신이 할 때 일어나는 일 setTimeout입니다. 작동하려면 대신 다음을 수행하십시오.

 var o = new Request(...);
 setTimeout(function() { o.start(); }, 1000);

자바 스크립트의 OOP는 약간 펑키하고 (또는 많이) 익숙해지는 데 약간의 시간이 걸립니다. 가장 먼저 명심해야 할 것은 수업이 없으며 수업 측면에서 생각 하면 기분이 나빠질 수 있다는 것입니다. 생성자 (클래스 정의에 해당하는 JavaScript)에 연결된 메서드를 사용하려면 개체를 인스턴스화해야합니다. 예를 들면 :

Ninja = function (name) {
    this.name = name;
};
aNinja = new Ninja('foxy');
aNinja.name; //-> 'foxy'

enemyNinja = new Ninja('boggis');
enemyNinja.name; //=> 'boggis'

Note that Ninja instances have the same properties but aNinja cannot access the properties of enemyNinja. (This part should be really easy/straightforward) Things get a bit different when you start adding stuff to the prototype:

Ninja.prototype.jump = function () {
   return this.name + ' jumped!';
};
Ninja.prototype.jump(); //-> Error.
aNinja.jump(); //-> 'foxy jumped!'
enemyNinja.jump(); //-> 'boggis jumped!'

Calling this directly will throw an error because this only points to the correct object (your "Class") when the Constructor is instantiated (otherwise it points to the global object, window in a browser)


In ES2015 a.k.a ES6, class is a syntactic sugar for functions.

If you want to force to set a context for this you can use bind() method. As @chetan pointed, on invocation you can set the context as well! Check the example below:

class Form extends React.Component {
constructor() {
    super();
  }
  handleChange(e) {
    switch (e.target.id) {
      case 'owner':
        this.setState({owner: e.target.value});
        break;
      default:
    }
  }
  render() {
    return (
      <form onSubmit={this.handleNewCodeBlock}>
        <p>Owner:</p> <input onChange={this.handleChange.bind(this)} />
      </form>
    );
  }
}

Here we forced the context inside handleChange() to Form.

참고URL : https://stackoverflow.com/questions/4011793/this-is-undefined-in-javascript-class-methods

반응형