• 关于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>
  • 相关阅读:
    20162314 《Program Design & Data Structures》Learning Summary Of The Ninth Week
    20162314 《Program Design & Data Structures》Learning Summary Of The Ninth Week
    20162314 《Program Design & Data Structures》Learning Summary Of The Eighth Week
    20162307 2016-2017-2《程序设计与数据结构》课程总结
    2017-2018-1 20162307 实验五
    2017-2018-1 JAVA实验站 冲刺
    20162307 课堂测试 hash
    2017-2018-1 JAVA实验站 第八周作业
    20162307 实验四 图的实现与应用
    2017-2018-1 JAVA实验站 第六、七周作业
  • 原文地址:https://www.cnblogs.com/mushishi/p/4026746.html
Copyright © 2020-2023  润新知