码迷,mamicode.com
首页 > 其他好文 > 详细

一个简单插件this传值的跟踪

时间:2017-01-20 18:55:48      阅读:187      评论:0      收藏:0      [点我收藏+]

标签:jquery   blog   event   head   img   div   事件   方法   ora   

<!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传值的跟踪

标签:jquery   blog   event   head   img   div   事件   方法   ora   

原文地址:http://www.cnblogs.com/jiangtian/p/6323482.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!