<!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. 3dContactPointAnnotationTool开发日志（八）

      今天上午去实验室打算把项目从github上pull下来发现貌似不行,然后强行pull下来后项目变得乱七八糟了,有的组件都不知道去哪里了.去github上看了看发现上面day6和day7都没有,特别 ...

  2. linux系统中如何进入退出vim编辑器的方法及区别

    在linux家族中,vim编辑器是系统自带的文本编辑器,其功能强大自不必说了. 偶有小白,刚接触linux,要修改某个文本文件,不可能像WINDOWS那样操作,更有甚者,进入VI编辑器后,无法退出以致 ...

  3. pythoh使用 xpath去除空格空格

    html_str = """ <!DOCTYPE html> <html lang="en"> <head> &l ...

  4. java数据结构-HashMap

    一直以来似乎都有一个错觉,认为map跟其他的集合类一样继承自Collection,其实不然,Map和Collection在结构层次上是没有任何关系的,通过查看源码可以发现map所有操作都是基于key- ...

  5. C#中的反射和扩展方法的运用

    前段时间做了一个练手的小项目,采用的是三层架构,也就是Models,IDAL,DAL,BLL 和 Web , 在DAL层中各个类中有一个方法比较常用,那就是 RowToClass ,顾名思义,也就是将 ...

  6. 第70天：jQuery基本选择器（一）

    一.jQuery基本选择器 jQuery是javascript的一个库,包含多个可重用的函数,用来辅助我们简化javascript开发 jQuery能做的javascipt都能做到,而javascri ...

  7. 【Python】Python中*args 和**kwargs的用法

    好久没有学习Python了,应为工作的需要,再次拾起python,唤起记忆. 当函数的参数不确定时,可以使用*args 和**kwargs,*args 没有key值,**kwargs有key值. 还是 ...

  8. 【bzoj1858】[Scoi2010]序列操作 线段树区间合并

    题目描述 lxhgww最近收到了一个01序列,序列里面包含了n个数,这些数要么是0,要么是1,现在对于这个序列有五种变换操作和询问操作: 0 a b 把[a, b]区间内的所有数全变成0 1 a b ...

  9. BZOJ4567：[SCOI2016]背单词——题解

    https://www.lydsy.com/JudgeOnline/problem.php?id=4567 Lweb 面对如山的英语单词,陷入了深深的沉思,“我怎么样才能快点学完,然后去玩三国杀呢?” ...

  10. POJ.2387 Til the Cows Come Home (SPFA)

    POJ.2387 Til the Cows Come Home (SPFA) 题意分析 首先给出T和N,T代表边的数量,N代表图中点的数量 图中边是双向边,并不清楚是否有重边,我按有重边写的. 直接跑 ...