<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <button id="test">click me</button> </body> <script> function bind(context,name){ return function(){ return context[name].apply(context,arguments); //用apply函数改变函数的上下文,apply函数的第一个参数就是我们需要的上下文对象。 } }; /*对比一下*/ //function bind(context){ //self = this; //保存this,即调用bind方法的目标函数 //return function(){ // return self.apply(context,arguments); //}; //}; var button = { clicked: false, click: function(){ this.clicked = true; console.assert(button.clicked,"The button has been clicked."); console.log(this); } }; var elem = document.getElementById("test"); elem.addEventListener("click",bind(button,"click"),false); //调用bind方法,bind方法的第一个参数就是我们需要的上下文对象; //addEventListener()三个参数,分别是event,function,false </script> </html>
bind方法新增加 17/3/24
<body> <button id="button" value="点击"></button> <input type="text" id="text"> </body> <script> var button = document.getElementById("button"), text = document.getElementById("text"); button.onclick = function() { alert(this.id); // 弹出text }.bind(text); </script>
简写 fn.bind(this);
用途:改变上下文的