如何通过HTML按钮调用JavaScript对象的register方法？

嘿，我来帮你搞定这个问题～你遇到的核心点是HTML内联事件里的this指向和你TaxiShare实例的this不是同一个对象，所以直接写this.register肯定找不到方法。下面给你几种实用的解决方案：

方法1：实例化对象后直接调用（最直接） #

首先你需要先创建TaxiShare的实例，然后在按钮的onClick里调用这个实例的register方法：

JavaScript代码 #

function TaxiShare() {
 this.register = function () {
 var username = get_name_value('name', 'user1');
 $.post('http://website/users', { USERNAME: username }, function (data) {
 var obj = $.parseJSON(data);
 if (obj.status == "fail") {
 alert('User ' + username + ' is already registered.');
 } else {
 alert('User ' + username + ' has been successfully registered.');
 }
 } );
 };
}

// 先实例化一个TaxiShare对象，注意这个变量要在全局作用域（或者按钮能访问到的作用域）
const taxiShareInstance = new TaxiShare();

HTML代码 #

<input type="button" value="Register" onClick="taxiShareInstance.register()">

这样点击按钮时，就会调用你实例化对象的register方法啦。

方法2：使用事件监听（更推荐的现代写法） #

内联事件虽然简单，但不利于代码维护，推荐用addEventListener来绑定事件，实现HTML和JS代码分离：

HTML代码 #

<input type="button" value="Register" id="registerBtn">

JavaScript代码 #

function TaxiShare() {
 this.register = function () {
 var username = get_name_value('name', 'user1');
 $.post('http://website/users', { USERNAME: username }, function (data) {
 var obj = $.parseJSON(data);
 if (obj.status == "fail") {
 alert('User ' + username + ' is already registered.');
 } else {
 alert('User ' + username + ' has been successfully registered.');
 }
 } );
 };
}

const taxiShareInstance = new TaxiShare();

// 给按钮绑定点击事件
document.getElementById('registerBtn').addEventListener('click', function() {
  taxiShareInstance.register();
});

方法3：封装到构造函数内部（更模块化） #

如果想把按钮绑定逻辑也封装到TaxiShare对象里，可以这样写，让代码结构更清晰：

JavaScript代码 #

function TaxiShare(buttonId) {
 this.register = function () {
 var username = get_name_value('name', 'user1');
 $.post('http://website/users', { USERNAME: username }, function (data) {
 var obj = $.parseJSON(data);
 if (obj.status == "fail") {
 alert('User ' + username + ' is already registered.');
 } else {
 alert('User ' + username + ' has been successfully registered.');
 }
 } );
 };

 // 初始化方法，绑定按钮事件
 this.init = function() {
   // 用bind确保register里的this指向TaxiShare实例（如果以后方法里用到this的话很重要）
   document.getElementById(buttonId).addEventListener('click', this.register.bind(this));
 };
}

// 使用时实例化并初始化
const taxiShareInstance = new TaxiShare('registerBtn');
taxiShareInstance.init();

HTML代码 #

<input type="button" value="Register" id="registerBtn">

这样你的TaxiShare对象就自己管理按钮的事件绑定啦，代码的模块化程度更高～

内容的提问来源于stack exchange，提问作者SeagullWardy