zoukankan      html  css  js  c++  java
  • 关于js中this的疑问

     学习bootstrap.js源码中被js里边的this绕的有点晕

     1 /* ========================================================================
     2  * Bootstrap: alert.js v3.2.0
     3  * http://getbootstrap.com/javascript/#alerts
     4  * ========================================================================
     5  * Copyright 2011-2014 Twitter, Inc.
     6  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
     7  * ======================================================================== */
     8 
     9 
    10 +function ($) {
    11   'use strict';
    12 
    13   // ALERT CLASS DEFINITION
    14   // ======================
    15 
    16   var dismiss = '[data-dismiss="alert"]'
    17   var Alert   = function (el) {
    18     $(el).on('click', dismiss, this.close)
    19   }
    20 
    21   Alert.VERSION = '3.2.0'
    22 
    23   Alert.prototype.close = function (e) {
    24     var $this    = $(this)  // 疑惑: js类原型方法中的 this 指代的应该是对象实例, 可这边居然给包装成jq对象 并且在下面调用jq的方法;  注意68行的调用方式就明白了
    25     var selector = $this.attr('data-target')
    26 
    27     if (!selector) {
    28       selector = $this.attr('href')
    29       selector = selector && selector.replace(/.*(?=#[^s]*$)/, '') // strip for ie7
    30     }
    31 
    32     var $parent = $(selector)
    33 
    34     if (e) e.preventDefault()
    35 
    36     if (!$parent.length) {
    37       $parent = $this.hasClass('alert') ? $this : $this.parent()
    38     }
    39 
    40     $parent.trigger(e = $.Event('close.bs.alert'))
    41 
    42     if (e.isDefaultPrevented()) return
    43 
    44     $parent.removeClass('in')
    45 
    46     function removeElement() {
    47       // detach from parent, fire event then clean up data
    48       $parent.detach().trigger('closed.bs.alert').remove()
    49     }
    50 
    51     $.support.transition && $parent.hasClass('fade') ?
    52       $parent
    53         .one('bsTransitionEnd', removeElement)
    54         .emulateTransitionEnd(150) :
    55       removeElement()
    56   }
    57 
    58 
    59   // ALERT PLUGIN DEFINITION
    60   // =======================
    61 
    62   function Plugin(option) {
    63     return this.each(function () {
    64       var $this = $(this)
    65       var data  = $this.data('bs.alert')
    66 
    67       if (!data) $this.data('bs.alert', (data = new Alert(this)))
    68       if (typeof option == 'string') data[option].call($this)    // 原来是这边通过 call() 将方法的作用域(this)给转向了 ;
    69     })
    70   }
    71 
    72   var old = $.fn.alert
    73 
    74   $.fn.alert             = Plugin
    75   $.fn.alert.Constructor = Alert
    76 
    77 
    78   // ALERT NO CONFLICT
    79   // =================
    80 
    81   $.fn.alert.noConflict = function () {
    82     $.fn.alert = old
    83     return this
    84   }
    85 
    86 
    87   // ALERT DATA-API
    88   // ==============
    89 
    90   $(document).on('click.bs.alert.data-api', dismiss, Alert.prototype.close)
    91 
    92 }(jQuery);

    附百度上关于js中this的描述:

     

    JavaScript:this是什么?

    定义:this是包含它的函数作为方法被调用时所属的对象。
    说明:这句话有点咬嘴,但一个多余的字也没有,定义非常准确,我们可以分3部分来理解它!
    1、包含它的函数。2、作为方法被调用时。3、所属的对象。
    看例子:
    function to_green(){
    this.style.color="green";
    }
    to_green();
    上面函数中的this指的是谁?
    分析:包含this的函数是,to_green
    该函数作为方法被调用了
    该函数所属的对象是。。?我们知道默认情况下,都是window对象。
    OK,this就是指的window对象了,to_green中执行语句也就变为,window.style.color="green"
    这让window很上火,因为它并没有style这么个属性,所以该语句也就没什么作用。
    我们在改一下。

    window.load=function(){
    var example=document.getElementById("example");
    example.onclick=to_green;
    }
    这时this又是什么呢?
    我们知道通过赋值操作,example对象的onclick得到to_green的方法,那么包含this的函数就是onclick喽,
    那么this就是example引用的html对象喽。
    this的环境可以随着函数被赋值给不同的对象而改变!
    下面是完整的例子:

    <script type="text/javascript">
    function to_green(){
    this.style.color="green";
    }
    function init_page(){
    var example=document.getElementById("example");
    example.onclick=to_green;
    }
    window.onload=init_page;
    </script>
    <a href="#" id="example">点击变绿</a>
  • 相关阅读:
    go函数
    Linux 查看磁盘容量、查找大文件、查找大目录
    五分钟理解一致性哈希算法(consistent hashing)
    使用Java实现三个线程交替打印0-74
    Python实现IOC控制反转
    Wannafly挑战赛5 A珂朵莉与宇宙 前缀和+枚举平方数
    Yandex Big Data Essentials Week1 Scaling Distributed File System
    Yandex Big Data Essentials Week1 Unix Command Line Interface Processes managing
    Yandex Big Data Essentials Week1 Unix Command Line Interface File Content exploration
    Yandex Big Data Essentials Week1 Unix Command Line Interface File System exploration
  • 原文地址:https://www.cnblogs.com/mushishi/p/4026746.html
Copyright © 2011-2022 走看看