<!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. java出现以下警告：WARN No appenders;WARN Please initialize the log4j的处理方法

    编译java或引用别的代码时出现以下警告: log4j:WARN No appenders could be found for logger (org.apache.zookeeper.ZooKee ...

  2. (转)《linux性能及调优指南》 3.3 内存瓶颈

    翻译:Hank (http://blog.csdn.net/fireroll)版权所有,尊重他人劳动成果,转载时请注明作者和原始出处及本声明.原文名称:<Linux Performance an ...

  3. 【转】log4j.properties文件的配置

    一.前言 log4j使用的还是比较多的,但是对于其配置又很难描述清楚要怎么配置,说明我自己对于log4j的配置并不是非常熟悉,所以在网上找了一篇详尽的 博文转载,在此非常感谢原文作者的辛苦付出,如有需 ...

  4. tomcat执行shutdown.sh进程残留的解决办法

    我们执行shutdown.sh指令的时候有时会发现进程并没有被关掉而是越来越多,这种情况一般是项目造成的,具体原因未去调查.由于tomcat自己有相应的保护机制,所以我们只需要强制结束其进程即可,下面 ...

  5. JVM启动参数详解 (转)

    非标准参数 非标准参数又称为扩展参数,其列表如下: -Xint  设置jvm以解释模式运行,所有的字节码将被直接执行,而不会编译成本地码.   -Xbatch  关闭后台代码编译,强制在前台编译,编译 ...

  6. Python 源码剖析（二）【整数对象】

    二.整数对象 1.PyIntObject 2.PyIntObject 对象的创建和维护 3.Hack PyIntObject 1.PyIntObject PyIntObject的定义: [intobj ...

  7. 【刷题】SPOJ 705 SUBST1 - New Distinct Substrings

    Given a string, we need to find the total number of its distinct substrings. Input T- number of test ...

  8. [国家集训队]最长双回文串 manacher

    ---题面--- 题解: 首先有一个直观的想法,如果我们可以求出对于位置i的最长后缀回文串和最长前缀回文串,那么我们枚举分界点然后合并前缀和后缀不就可以得到答案了么? 所以我们的目标就是求出这两个数列 ...

  9. react事件机制

    1. react的事件是合成事件((Synethic event),不是原生事件 <button onClick={this.handleClick}></button> &l ...

  10. 20181015 考试记录&数论

    题目传送门 W神爷的题解 数论 小 M 的算式 [问题描述] 小 M 在做数学作业的时候遇到了一个有趣的问题:有一个长度为 n 的数字 串 S,小 M 需要在数字之间填入若干个“+”和恰好一个“=”, ...