不用$.proxy改变this指向的问题

来源：2-4 MVVM模式

夜魇丶

2020-03-19

btn.on('click', $.proxy(this.handleBtnClick, this))

这行代码的含义我理解。
但是我不明白为什么不改变this指向，代码也能正常执行。

btn.on('click',this.handleBtnClick);

这行代码可以正常执行。这里的this指向的是btn这个DOM元素么，如果是的话。

btn.on('click',btn.handleBtnClick);

为什么这行代码没有反应，为什么不能这么改？

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="jquery.min.js"></script>
</head>
<body>
	<div>
		<input id="input" type="text"/>
		<button id="btn" >提交</button>
		<ul id="list">
		</ul>
	</div>

	<script>

		function Page() {

		}
		$.extend(Page.prototype, {
			init: function() {
				this.bindEvents() 
			},
			bindEvents: function() {
				var btn = $('#btn');
				btn.on('click', $.proxy(this.handleBtnClick, this))
				// btn.on('click',this.handleBtnClick);
				// btn.on('click',btn.handleBtnClick);
			},
			handleBtnClick: function() {
				var inputElem = $('#input');
				var inputValue = inputElem.val();
				var ulElem = $('#list');
				ulElem.append('<li>' + inputValue + '</li>');
				inputElem.val('');
			}
		})

		var page = new Page();
		page.init();

	</script>
</body>
</html>

写回答

1回答