不用$.proxy改变this指向的问题
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>
693
收起
正在回答
1回答
其实这个JS中有关this的问题，一般是有四种情况
默认情况，绑定在全局
隐士绑定，例如：btn.getInfo();
bind/call/apply
使用new
优先级从上到下依次增加
0
有任何疑惑可以回复我~
相似问题
登录后可查看更多问答，登录/注册
Vue2.5-2.6-3.0开发去哪儿网App 零基础入门到实战
- 参与学习 10673 人
- 提交作业 582 份
- 解答问题 8191 个
课程紧跟Vue3版本迭代，企业主流版本Vue2+Vue3全掌握
了解课程
