（5）Javascript控制函数上下文

最新推荐文章于 2021-09-05 23:37:23 发布

GISer.Wang

最新推荐文章于 2021-09-05 23:37:23 发布

阅读量2k

点赞数 1

分类专栏： Javascript学习文章标签： javascript

本文链接：https://blog.csdn.net/LoveCarpenter/article/details/54089490

版权

Javascript学习专栏收录该内容

5 篇文章 1 订阅

订阅专栏

引言
控制Javascript函数上下文
- 1函数调用控制上下文
- 2回调函数控制上下文模仿langhitch方法
总结

1.引言

在本篇博客中我们主要讨论javascript中的this关键字，如果我们想要在javascript中实现模块化编程，不可避免的要和this打交道，控制好this的上下文是我们用好js模块化的第一步。

2.控制Javascript函数上下文

2.1函数调用控制上下文

话不多少，首先我们先看一段代码

    var a=10;
        var moudle=new Object({
            a:5,
            showA:function(){
                alert(this.a);
            }
        });
        moudle.showA();//弹出5
        var b=moudle.showA;
        b();//弹出10

第一：上面的例子我们可以看出this的上下文改变了，moudle.showA()中this的上下文为：moudle,而b()中的this上下文为window。
第二：方法的是由我们人为调用的（很重要）。
那么我们的代码可以这样修改

        var a=10;
        var moudle=new Object({
            a:5,
            showA:function(){
                alert(this.a);
            }
        });
        moudle.showA();//弹出5
        var b=moudle.showA;
        b.call(moudle);//弹出5
        b.apply(moudle);//弹出5

通过call函数和apply函数可以控制函数的上下文
在此声明，此时函数是由我们人为调用的

2.2回调函数控制上下文（模仿lang.hitch方法）

我们在看下面的代码

    <input id="btn" type="button" value="按钮">
    <script>
        var moudle=new Object({
            a:5,
            showA:function(e){
                alert(this.a+e.type);
            }
        });
        document.getElementById("btn").onclick=moudle.showA;
    </script>

第一：点击按钮触发事件，发现a未定义（此处不要管this的上下文是什么，反正不是moudle）
第二：函数的触发是浏览器回调触发的。
第三：我们在showA函数中需要用到两个重要的数据（一个是类中的a，一个是事件回调的数据e）

此时我们应该如何控制我们的this关键字呢？我们定义一个控制上下文的函数

    //第一个参数是上下文，第二个参数是函数对象
     var hitch=function(context,fn){
            var callback=function(data)
            {
                fn.call(context,data);
            }
            return callback;
        }

我们如何使用呢？代码如下：

//当调用moudle.showA的函数的时候，将函数的上下文指定为moudle
document.getElementById("btn").onclick=hitch(moudle,moudle.showA)

全部代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <input id="btn" type="button" value="按钮">
    <script>
        var hitch=function(context,fn){
            var callback=function(data)
            {
                fn.call(context,data);
            }
            return callback;
        }
        var moudle=new Object({
            a:5,
            showA:function(e){
                alert(this.a+ ":"+e.type);
            }
        });
        document.getElementById("btn").onclick=hitch(moudle,moudle.showA);
    </script>
</body>
</html>