javascript"；“基本面向对象”；，回调和头痛，希望这是一个很好的例子_Javascript

javascript"；“基本面向对象”；，回调和头痛，希望这是一个很好的例子

javascript

javascript"；“基本面向对象”；，回调和头痛，希望这是一个很好的例子,javascript,Javascript,请运行下面的例子，它“咬了我一口”，因为我不是javascript专家，当我试图用“原始javascript”（阅读大浏览器兼容性）做更多面向对象的事情时您能否提供您在评论行方面的经验，询问“what's better”——这意味着在编写javascript时更清晰、更不容易出错 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Test<

请运行下面的例子，它“咬了我一口”，因为我不是javascript专家，当我试图用“原始javascript”（阅读大浏览器兼容性）做更多面向对象的事情时

您能否提供您在评论行方面的经验，询问“what's better”——这意味着在编写javascript时更清晰、更不容易出错

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<style>
</style>
<script>
function makeI(myId, myA) { 
  var I = {
    id: myId,
    A: myA,

    toString: function toString() { console.log('id:' +I.id+ ', A=' +this.A); return this;},
    //                                                 ^              ^
    //                                                 |              |
    //             What's better, more clear?       shorter      how does this help, just fools us on callbacks?
    // 
    oops: function oops() {
      document.getElementById('div').onclick = function() 
        { console.log('oops() A=' +this.A+ '   , darn! Well, the id=' +this.id+ " , NOT our/I's id"); }
    },

    f: function f() {
      document.getElementById('div').onclick = function() 
        { console.log('oops() A=' +I.A+ '  , good. Well, the id=' +I.id); }
    },
  }
  return I;
}
function try1() {
  console.log('---- try1() , my oops ---------');
  var i1 = makeI('1', 10).toString();
  i1.oops();
  console.log('OK, now please click on gold div, and watch the error\n');
}
function try2() {
  console.log('---- try2() ---------');
  var i2 = makeI('2', 20).toString(); 
  i2.f();
  console.log('OK, now please click on gold div\n');
}
</script>
</head>
<body>
<div onclick='try1()' style='border: 2px solid   red; width:400px;'>Please click, and see console output (oops!)</div><br>
<div onclick='try2()' style='border: 2px solid green; width:400px;'>Please click, and see console output, comments please</div><br>
<div id='div' style='border: 2px solid  gold; width:400px;'>div</div>
</body>
</html>


试验
函数makeI（myId，myA）{
变量I={
id:myId，
答：myA，
toString:函数toString（）{console.log（'id:'+I.id+'，A='+this.A）；返回this；}，
//                                                 ^              ^
//                                                 |              |
//什么更好，更清楚？更短这有什么帮助，只是在回调时愚弄我们？
// 
oops：函数oops（）{
document.getElementById（'div'）。onclick=function（）
{console.log（'oops（）A='+this.A+'，该死！这个id='+this.id+“，不是我们的/I的id”）；}
},
f：函数f（）{
document.getElementById（'div'）。onclick=function（）
{console.log（'oops（）A='+I.A+'，很好。那么，id='+I.id）；}
},
}
返回I；
}
函数try1（）{
log（'----try1（），我的oops------）；
var i1=makeI（'1'，10）.toString（）；
i1.oops（）；
log（'好的，现在请单击gold div，并观察错误\n'）；
}
函数try2（）{
log（'--try2（）------------'）；
var i2=makeI（'2'，20）.toString（）；
i2.f（）；
log（'OK，现在请单击gold div\n'）；
}
请单击，然后查看控制台输出（oops！）

请单击，并查看控制台输出，请发表评论

div

请注意，您的版本、

toString

、

oops

和

都是不同的函数，绑定到

的不同实例。这是

I.myId

在您的案例中起作用的唯一原因。但是，一般来说，我们更喜欢使用不同的

this

值调用一个函数，这样引擎就必须做更少的工作（创建更少的单个函数）

为了清晰和易于维护，最好使用，尤其是面向对象的开发

I类{
构造函数（myId，myA）{
this.id=myId；
A=myA；
}
toString（）{
//注意：不从`toString（）返回字符串是不好的做法`
log（'id:'+this.id+'，A='+this.A）；
归还这个；
}
哎呀（）{
document.getElementById（'div'）。onclick=（）=>{
log（'oops（）A='+this.A+'，该死！这个id='+this.id+“，不是我们的/I的id”）；
};
}
f（）{
document.getElementById（'div'）。onclick=（）=>{
log（'oops（）A='+this.A+'，good.Well，id='+this.id）；
};
}
}
//注意：这个函数实际上不再做任何事情；你可以把它取下来
函数makeI（myId，myA）{
返回新的I（myId，myA）；
}
函数try1（）{
log（'----try1（），我的oops------）；
var i1=makeI（'1'，10）.toString（）；
i1.oops（）；
log（'好的，现在请单击gold div，并查看错误\n'）；
}
函数try2（）{
log（'--try2（）------------'）；
var i2=makeI（'2'，20）.toString（）；
i2.f（）；
log（'OK，现在请单击gold div\n'）；
}

请单击，然后查看控制台输出（oops！）

请单击，并查看控制台输出，请发表评论

div