zoukankan      html  css  js  c++  java
  • zepto中$.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,看出来了吗?
    });
     
  • 相关阅读:
    231. Power of Two
    204. Count Primes
    205. Isomorphic Strings
    203. Remove Linked List Elements
    179. Largest Number
    922. Sort Array By Parity II
    350. Intersection of Two Arrays II
    242. Valid Anagram
    164. Maximum Gap
    147. Insertion Sort List
  • 原文地址:https://www.cnblogs.com/douglasvegas/p/4769979.html
Copyright © 2011-2022 走看看