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

最新推荐文章于 2022-10-05 16:34:02 发布

Vin1992

最新推荐文章于 2022-10-05 16:34:02 发布

阅读量435

点赞数

分类专栏： javascript 苦修之路文章标签：函数绑定 this bind apply call

本文链接：https://blog.csdn.net/Vin1992/article/details/68148166

版权

javascript 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

苦修之路

4 篇文章 0 订阅

订阅专栏

使用场景：把一个含有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 第二参数罗列参数

Vin1992

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js高级技巧---函数绑定

使用场景：把一个含有this的函数作为值传入另一个函数中运行，此时造成this指向错误的对象。主要出现在事件处理程序以及setTimeout(),setInterval() 使用中。如何绑定？ECMAScript5 定义了bind()原生方法，解决此问题。 bind() 函数意在将函数的执行环境原封不动的同被传函数传入到另一个函数中。<!DOCTYPE html><html lang="e
复制链接

扫一扫