您的位置：首页 > Web前端 > JavaScript

js高级技巧---函数绑定

2017-03-29 21:42 351 查看

使用场景：把一个含有this的函数作为值传入另一个函数中运行，此时造成this指向错误的对象。主要出现在事件处理程序以及setTimeout(),setInterval() 使用中。

如何绑定？

ECMAScript5 定义了bind()原生方法，解决此问题。

bind() 函数意在将函数的执行环境原封不动的同被传函数传入到另一个函数中。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../EventHander.js"></script>
</head>
<body>
<button id="btn">点击</button>
<script>
var handler = {
message:'hello',
handleClick:function (ev) {
alert(this.message);
}
}
var btn = document.getElementById('btn');
EventUtil.addHandler(btn,'click',handler.handleClick.bind(handler));

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

EventUtil.js

var EventUtil = {
getEle:function (id) {
return document.getElementById(id);
},
addHandler:function (ele,type,handler) {
if(ele.addEventListener) {
ele.addEventListener(type,handler,false);
}else if(ele.attachEvent) {
ele.attachEvent(type,handler);
}else {
ele["on"+type] = handler;
}
},
removeHandler:function (ele,type,handler) {
if(ele.removeHandler) {
ele.removeHandler(type,handler,false);
}else if(ele.detachEvent) {
ele.detachEvent(type,handler);
}else {
ele["on"+type] = null;
}
},
getEvent:function (ev) {
return ev?event:window.event;
},
getTarget:function (ev) {
return ev.target || ev.srcElement;
},
preventDefault:function (ev) {
if(ev.preventDefault) {
ev.preventDefault();
}else {
ev.returnValue = false;
}
},
stopPropagation:function (ev) {
if(ev.stopPropagation) {
ev.stopPropagation();
}else {
ev.cancelBubble = true;
}
},
// 获取按键字符编码  键盘事件可用
getCharCode:function (ev) {
if(typeof ev.charCode == "number") {
return ev.charCode;
}else {
return ev.keyCode;
}
}
}

bind()方法不支持IE6-8 ,解决方法如下：

function newBind(fn,context) {
return function() {
return fn.apply(context,fn);
}
}

此外，apply() call() 是每个函数都包含的非继承而来的函数。

参数：[this作用域，params] 参数2可选

作用：

1. 在特定的作用域中调用函数；

2. 扩充函数赖以运行的作用域。（可以理解为this可指向到其他对象上）

如：

window.color='red';
var o = {color:'blue'};
function sayColor() {
alert(this.color);
}
sayColor.call(this); //red 全局作用域下this=>window
sayColor.call(window);//red
sayColor.call(o);//blue 此时this 指向o对象

apply 第二参数可以是 arguments 或者参数数组；

call 第二参数罗列参数

$(".MathJax").remove();

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 函数绑定 this bind apply call

相关文章推荐

新的分享

章节导航