<!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. 字符串数组去重 ["a","b","c","a","b","c"] --> ["a","b","c"]

    非正则实现: let str_arr=["a","b","c","a","b","c&qu ...

  2. react项目开发入门

    v16.2.0 在html头部引入react相关js文件 <!-- react核心库--><script src="../static/react/react.produc ...

  3. NCAIOC

    NCAIOC Npm Cli All In One Client https://github.com/xgqfrms/NCAIOC https://cdn.xgqfrms.xyz/web-ide/i ...

  4. Delphi中Sender对象的知识

    Sender是一个TObject类型的参数,它告诉Delphi哪个控件接收这个事件并调用相应的处理过程.你可以编写一个单一的事件处理句柄,通过Sender参数和IF…THEN…语句或者CASE语句配合 ...

  5. 【python】 可迭代对象、迭代器、生成器

    可迭代对象 iterable 可直接作用于for循环的对象统称为可迭代对象. 有 list. dict.tuple.set.str等数据类型,还有 generator(包括生成器和带yield的gen ...

  6. Codeforces VK Cup 2015 A.And Yet Another Bracket Sequence（后缀数组+平衡树+字符串）

    这题做得比较复杂..应该有更好的做法 题目大意: 有一个括号序列,可以对其进行两种操作: ·        向里面加一个括号,可以在开头,在结尾,在两个括号之间加. ·        对当前括号序列进 ...

  7. Greenlet-手动切换

    yield()是自己写的协程,Greenlet( )是已经封装好了的协程. 协程:遇到 I/O 操作就切换到别的地方了(先去处理其他携程去了).等原协程的 I/O 操作一完成就切回去.这样就把 I/O ...

  8. BZOJ2453：维护队列——题解

    http://www.lydsy.com/JudgeOnline/problem.php?id=2453 Description 你小时候玩过弹珠吗? 小朋友A有一些弹珠,A喜欢把它们排成队列,从左到 ...

  9. X day2

    题目 官方题解 T1: 我们可以把问题化简为$a\times b \times c \leq n $中的有序$(a,b,c)$有多少组.分三种情况考虑 当$a=b=c$时,答案十分好统计 当$a< ...

  10. dubbox管理中心

    当服务多了,不好管理,可以用管理中心来查看. 管理中心就是一个 web项目(一个war包),可以部署在tomcat下面就能运行了. 用户名密码都是root 每一条服务点开后都可以看生产者和消费者.