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,看出来了吗?
    });
     
  • 相关阅读:
    激光雷达的数学模型
    TX2刷机踩坑
    rplidar S1测试
    cartographer 调参(2)-ROS API 文档
    ROS 包制作
    Python 文件操作
    V-REP远程控制--Python版
    V-REP 喷涂仿真
    Jeston TX2 备份
    Anaconda jupyter-notebook 添加kernel
  • 原文地址:https://www.cnblogs.com/douglasvegas/p/4769979.html
Copyright © 2011-2022 走看看