zepto中$.proxy()的到底有多强大？

好吧，其实是标题党了，哈哈，只是想总结一下工作中遇到$.proxy()的用法而已。

一、语法：

$.proxy()有两种使用语法

1）$.proxy(fn,context)，fn是一个函数，context是执行fn这个函数的上下文。

例如：

    var obj = {name: 'Zepto'},

            handler = function () {

                alert(this.name)

            };

    $(document).on('click', $.proxy(handler, obj));

2）$.proxy(context, "fnName" )，请注意，此处fnName（函数名）必须是一个字符串。

    var obj2 = {

                name: 'jQuery',

                age: 22,

                showAge: function () {

                    alert(this.age)

                }

            };

    $(document).on('click', $.proxy(obj2, "showAge"));//弹出22

从上面的代码可以看出，$.proxy()主要用来改变函数执行的上下文，下面再看一个实战例子，真正把它用到好处。

二、实战例子：

需求：点击id为myElement的按钮，1000毫秒后，元素myElement增加一个class（'aNewClass'）。

一开始可能会有如下代码，但是我们发现无法实现我们的需求。

$('#myElement').click(function () {

        setTimeout(function () {

            $(this).addClass('aNewClass');//此时this指向window，当然无法给#myElement添加class

}, 1000); });

为了修改这个this的指向，我们使用$.proxy()

$('#myElement').click(function() {

         setTimeout($.proxy(function() {

                $(this).addClass('aNewClass');

         }, this), 1000);//此时this指向被点击的#myElement，看出来了吗？

});

巴特西

zepto中$.proxy()的到底有多强大？

最新文章

热门文章