这个在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是未定义的，因此if语句的计算结果为false。 我在这里做错了什么？

Answer 1

你如何调用启动function？

这应该工作（ 新是关键）

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

如果直接调用Request.prototype.start() ，则会引用全局上下文（浏览器中的window ）。

另外，如果this是未定义的，则会导致错误。 ifexpression式不计算为false。

更新 ： this对象不是基于声明而是通过调用来设置的 。 这意味着如果将函数属性赋值给像x = o.start这样的variables并调用x() ，则this里面的开始不再指向o 。 这是什么时候你setTimeout发生。 要做到这一点，请这样做：

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

Answer 2

JavaScript的面向对象是一个有点时髦（或很多），它需要一些习惯。 首先，你需要记住的是， 没有任何课程 ，在课堂上的思考可以让你起床。 为了使用附加到构造函数的方法（类定义的JavaScript），你需要实例化你的对象。 例如：

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

请注意， Ninja实例具有相同的属性，但aNinja无法访问enemyNinja的属性。 （这部分应该很简单/直接）当你开始向prototype添加东西的时候，情况会有所不同：

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

直接调用将会抛出一个错误，因为当构造函数被实例化时， this只能指向正确的对象（你的“类”）（否则它指向全局对象，浏览器中的window ）

Answer 3

在ES2015又名ES6， class是functions的语法糖。

如果你想强制为此设置一个上下文，你可以使用bind()方法。 正如@chetan所指出的那样，在调用时也可以设置上下文！ 检查下面的例子：

 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> ); } } 

这里我们强制把handleChange()内的上下文handleChange() Form 。