<!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. Hadoop出现错误：WARN util.NativeCodeLoader: Unable to load native-hadoop library for your platform... using builtin-java classes where applicable，解决方案

    安装Hadoop的时候直接用的bin版本,根据教程安装好之后运行的时候发现出现了:WARN util.NativeCodeLoader: Unable to load native-hadoop li ...

  2. anaconda安装不存在的包

    Anaconda作为一个工具包集成管理工具,下载python工具包是很方便的,直接敲: conda install package_name 1 但是有时候安装一个工具包(如skimage)的时候,在 ...

  3. 抽象类 C#

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  4. python dict 字典

    字典是通过hash表的原理实现的,每个元素都是一个键值对,通过元素的键计算出一个唯一的哈希值,这个hash值决定了元素的地址,因此为了保证元素地址不一样,必须保证每个元素的键和对应的hash值是完全不 ...

  5. 【bzoj1038】瞭望塔 半平面交

    题目描述 致力于建设全国示范和谐小村庄的H村村长dadzhi,决定在村中建立一个瞭望塔,以此加强村中的治安.我们将H村抽象为一维的轮廓.如下图所示 我们可以用一条山的上方轮廓折线(x1, y1), ( ...

  6. hdu 1848（Fibonacci again and again）（SG博弈）

    Fibonacci again and again Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Jav ...

  7. CentOS vi编辑器简单备忘

    1.常用编辑命令 dd 删除(剪切)光标所在整行 5dd 删除(剪切)从光标处开始的 5 行 yy 复制光标所在整行 5yy 复制从光标处开始的 5 行 n 显示搜索命令定位到的下一个字符串 N 显示 ...

  8. [Leetcode] Binary tree inorder traversal二叉树中序遍历

    Given a binary tree, return the inorder traversal of its nodes' values. For example:Given binary tre ...

  9. bzoj1706: [Usaco2007 Nov]relays 奶牛接力跑 (Floyd+新姿势)

    题目大意:有t(t<=100)条无向边连接两点,求s到e刚好经过n(n<=10^7)条路径的最小距离. 第一反应分层图,但是一看n就懵逼了,不会写.看了题解之后才知道可以这么玩... 首先 ...

  10. 继续bzoj

    我应该可以打卡下班了,回来继续bzoj