<!DOCUTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

    <title>在封装函数的过程中，确保this的正确传递</title>

</head>

<body>

    <div class="box"></div>

</body>

<style>

    .box{

        width:100px;

        height:100px;

        background:orange;

    }

    .box:hover{

        background: #50f573;

    }

</style>

<script>

var Nico = function(box,str){

    //4.实例化时被调用，dom对象被赋值给this.$box公共变量

    //rose字符串被赋值给this.str公共变量

    this.$box = box;

    this.str = str;

}

Nico.prototype = {

    constructor:Nico,//构造函数

    params:'',

    message:function(){

        //6.事件监听。鼠标点击，回调函数bindthis被调起，传入this.fndown方法及2中的this

        this.$box.on('mousedown',this.bindthis(this.fndown,this));

        //8.返回来的最终结果是fn.apply(obj,arguments);fn被赋值为this.fndown,obj为this

    },

    _message:function(){

        var _this = this;

        _this.$box.on('mousedown',function(){

            return _this.fndown.apply(_this);

        })

    },

    fndown:function(){

        // console.dir(arguments);

        this.params = this.str + ', uuuuuuu.';

        this.$box.on('mouseup',this.bindthis(this.fnup,this));

        //9.params被赋值，继续调用bindthis进行this绑定

    },

    fnup:function(){

        console.log(this.params);

        //打印params

        this.$box.off();

        //off() 方法通常用于移除通过 on() 方法添加的事件处理程序。

        this.$box.on('mouseup',this.bindthis(this.fnup,this));

        //监听mouseup事件，绑定this到自身。不添加则只执行一次

    },

    bindthis:function(fn,obj){

        //7.传入this.fndwon方法和this，内建this为传入的this

        //返回一个匿名回调函数并立即执行

        return function(){

            console.dir(arguments);

            //经跟踪arguments是点击事件n.Event

            console.log("\r\n");

            return fn.apply(obj);

        }

    }

}

$.fn.mess = function(str){

    //2.形参str被赋值实参，arguments为['rose']

    //this被赋值为.box jquery对象

    var nic = new Nico($(this),str);

    //3.创建一个实例，并给构造函数传入被转换为jquery对象的dom元素和实参

    return nic.message();

    //5.返回 实例调用message函数后的结果到客户端

}

$(function(){

    $('.box').mess('rose');

    //1.调用开始，class为box的dom元素是调用对象，即后面this将绑定的对象。

    //给mess传入rose字符串

})

</script>

</html>

一个简单插件this传值的跟踪的更多相关文章

  1. 一个简单的session传值学习

    a.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  2. 一个简单的消息提示jquery插件

    最近在工作中写了一个jquery插件,效果如下: 就是一个简单的提示消息的一个东西,支持最大化.最小化.关闭.自定义速度.自定义点击事件,数据有ajax请求和本地数据两种形式.还有不完善的地方,只做了 ...

  3. 【UI插件】开发一个简单日历插件（上）

    前言 最近开始整理我们的单页应用框架了,虽然可能比不上MVVM模式的开发效率,也可能没有Backbone框架模块清晰,但是好歹也是自己开发出来 而且也用于了这么多频道的东西,如果没有总结,没有整理,没 ...

  4. 一个简单js select插件

    现在,通过一个select插件,来介绍一下js插件的构建过程. 1.先上效果图 2.目录构建 (1)这个select插件,我给它起名交hongselect,所以呢,首先建个hongselect的文件夹 ...

  5. 编写一个简单的Jquery插件

    1.实现内容 定义一个简单的jquery插件,alert传递进来的参数 2.插件js文件(jquery.showplugin.js) (function ($) { //定义插件中的方法 var me ...

  6. 使用 ADD-ON SDK 开发 基于 Html JQuery 和 CSS 的 firefox 插件入门教程1: 创建一个简单的 Add-on

    [本文转载自http://sixpoint.me/942/implementing-simple-addon/] 实现一个简单的插件 教程的这个部分带你使用 SDK 来实现, 运行并打包一个插件. 这 ...

  7. WordPress插件制作教程(二): 编写一个简单的插件

    上一篇说到了如何创建一个插件,我想大家看了之后一定会有所收获,这一篇简单给大家写一个插件样例,让大家有一个基本的印象.这个插件的样例就是当你激活这个插件后会在你的每篇文章中插入一段自己定义好的内容,比 ...

  8. 手把手制作一个简单的IDEA插件(环境搭建Demo篇)

    新建IDEA插件File --> new --> Project--> Intellij PlatForm Plugin-->Next-->填好项目名OK 编写插件新建工 ...

  9. 开发一个简单的babel插件

    前言 对于前端开发而言,babel肯定是再熟悉不过了,工作中肯定会用到.除了用作转换es6和jsx的工具之外,个人感觉babel基于抽象语法树的插件机制,给我们提供了更多的可能.关于babel相关概念 ...

随机推荐

  1. 关于&$地址传递的练习

    php默认为传值传递: 既: $a=10;$b=$a; //$b为10$a=+10; //$a 为20 echo $a.'和'.$b;  # $a is 20 and $b is 10! 要是想变为地 ...

  2. 异常--try..catch

    class Program { static void Main(string[] args) { try { object obj = null; int N = (int)obj; } catch ...

  3. docker中crontab无法运行

    yum install -y crontabssed -ri 's/.*pam_loginuid.so/#&/' /etc/pam.d/crond   vi /etc/pam.d/crond ...

  4. EasyUI 学习笔记

    EasyUI常见错误 1 . 无论是用HMTL形式实现组件还是使用代码 + HTML 形式实现组件 , 在为组件设置属性时 , 要注意属性值的类型问题 string:必须加引号 number:不加任何 ...

  5. 第45天：2017webstrom下载破解汉化

    1.webstrom 11.0.3下载地址1:http://pan.baidu.com/s/1kVQjcwf 密码:uggr 下载地址2:http://pan.baidu.com/s/1kVQjcwf ...

  6. 禁止移动端input弹出软键盘

    在做三级联动,或者一些时间插件的时候总是弹出软键盘,用下面的方法就可以禁用掉,废话不多说直接上代码. HTML代码 <div class=""> <div> ...

  7. 【bzoj2938】[Poi2000]病毒 AC自动机

    题目描述 二进制病毒审查委员会最近发现了如下的规律:某些确定的二进制串是病毒的代码.如果某段代码中不存在任何一段病毒代码,那么我们就称这段代码是安全的.现在委员会已经找出了所有的病毒代码段,试问,是否 ...

  8. [bzoj 1594]猜数游戏

    主要是怎么处理矛盾 矛盾的条件有$2$种: 第一种是当把所有相等的$a$都全部找到后,他们并没有全联通,所以矛盾,因为没有两个是相同的 第二种是在2组$(l,r,a)$,$(l1,r1,a1)$中,$ ...

  9. Hive架构及应用介绍【链接】

    原文链接:https://blog.csdn.net/a2011480169/article/details/51482799

  10. spring 整合 redis 单机版

    增加spring配置文件: application-jedis.xml <?xml version="1.0" encoding="UTF-8"?> ...