关于js中this的疑问
学习bootstrap.js源码中被js里边的this绕的有点晕
/* ========================================================================
* Bootstrap: alert.js v3.2.0
* http://getbootstrap.com/javascript/#alerts
* ========================================================================
* Copyright 2011-2014 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* ======================================================================== */ +function ($) {
'use strict'; // ALERT CLASS DEFINITION
// ====================== var dismiss = '[data-dismiss="alert"]'
var Alert = function (el) {
$(el).on('click', dismiss, this.close)
} Alert.VERSION = '3.2.0' Alert.prototype.close = function (e) {
var $this = $(this) // 疑惑: js类原型方法中的 this 指代的应该是对象实例, 可这边居然给包装成jq对象 并且在下面调用jq的方法; 注意68行的调用方式就明白了
var selector = $this.attr('data-target') if (!selector) {
selector = $this.attr('href')
selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7
} var $parent = $(selector) if (e) e.preventDefault() if (!$parent.length) {
$parent = $this.hasClass('alert') ? $this : $this.parent()
} $parent.trigger(e = $.Event('close.bs.alert')) if (e.isDefaultPrevented()) return $parent.removeClass('in') function removeElement() {
// detach from parent, fire event then clean up data
$parent.detach().trigger('closed.bs.alert').remove()
} $.support.transition && $parent.hasClass('fade') ?
$parent
.one('bsTransitionEnd', removeElement)
.emulateTransitionEnd(150) :
removeElement()
} // ALERT PLUGIN DEFINITION
// ======================= function Plugin(option) {
return this.each(function () {
var $this = $(this)
var data = $this.data('bs.alert') if (!data) $this.data('bs.alert', (data = new Alert(this)))
if (typeof option == 'string') data[option].call($this) // 原来是这边通过 call() 将方法的作用域(this)给转向了 ;
})
} var old = $.fn.alert $.fn.alert = Plugin
$.fn.alert.Constructor = Alert // ALERT NO CONFLICT
// ================= $.fn.alert.noConflict = function () {
$.fn.alert = old
return this
} // ALERT DATA-API
// ============== $(document).on('click.bs.alert.data-api', dismiss, Alert.prototype.close) }(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>
关于js中this的疑问的更多相关文章
- 浅解析js中的对象
浅解析js中的对象 原文网址:http://www.cnblogs.com/foodoir/p/5971686.html,转载请注明出处. 前面的话: 说到对象,我首先想到的是每到过年过节见长辈的时候 ...
- js相对路径相关(比如:js中的路径依赖导入该js文件的路径)
问题描述: 前几天调用同事的js接口文件,在他自己的html测试页面ok,在我这边调用时出现问题. debug过程中,将该测试html移到其他位置都不行,放到原html测试页面同层次路径下是OK的. ...
- js中的执行上下文,菜鸟入门基础。
console.log(a); //Uncaught ReferenceError: a is not defined 因为没有定义a所以报错了. var a = 52; console.log(a) ...
- JS中的 this
JS中的 this 变化多端,似乎难以捉摸,但实际上对 this 的解读,还是有一定规律的. 分析this,该如何下手呢?下面有一个函数 function show(){ alert(this); } ...
- 浅谈JS中的闭包
浅谈JS中的闭包 在介绍闭包之前,我先介绍点JS的基础知识,下面的基础知识会充分的帮助你理解闭包.那么接下来先看下变量的作用域. 变量的作用域 变量共有两种,一种为全局变量,一种为局部变量.那么全局变 ...
- JS中如何进行对象的深拷贝
在JS中,一般的=号传递的都是对象/数组的引用,并没有真正地拷贝一个对象,那如何进行对象的深度拷贝呢?如果你对此也有疑问,这篇文章或许能够帮助到你 一.对象引用.浅层拷贝与深层拷贝的区别 js的对象引 ...
- js中的一些简单问题
1.JavaScript的组成: ECMAScript标准--基本的语法和对象 DOM:Document Object Model 文档对象模型 BOM:Broswer Object Model 浏览 ...
- 【转】JS中setTimeout和setInterval的最大延时值详解
前言 JavaScript提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和setInterval()这两个函数来完成.而这篇文中主要给大家介绍的是关于JS中setTi ...
- 使用call、apply和bind解决js中烦人的this,事件绑定时的this和传参问题
1.什么是this 在JavaScript中this可以是全局对象.当前对象或者任意对象,这完全取决于函数的调用方式,this 绑定的对象即函数执行的上下文环境(context). 为了帮助理解,让我 ...
随机推荐
- jdk的反射机制
反射的作用 1)在运行时判断任意一个对象所属的类: 2)在运行时构造任意一个类的对象: 3)在运行时判断任意一个类所具有的成员变量和方法: 4)在运行时调用任意一个对象的方法. 5)反射API可以获取 ...
- The Ninth Hunan Collegiate Programming Contest (2013) Problem C
Problem C Character Recognition? Write a program that recognizes characters. Don't worry, because yo ...
- HDU 4334 Trouble
Trouble Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Su ...
- 使用virtualbox安装centos虚拟机,以及VirtualBox无法安装64位Linux CentOS的解决办法
之前一直用vmware的虚拟机,好吧,其实一直盗版挺不好的,然后想用centos搭点东西,结果在vmare上安装centos总是有些问题,看了人给的建议换用virtualbox,虽然virtualbo ...
- [ 兼容 ] IE和Firefox的Javascript兼容性总结
长久以来JavaScript兼容性一直是Web开发者的一个主要问题.在正式规范.事实标准以及各种实现之间的存在的差异让许多开发者日夜煎熬.为此,主要从以下几方面差异总结IE和Firefox的Javas ...
- Microsoft Visual C++ 2010(86) Redistributable不能安装完美解决
见http://jingyan.baidu.com/article/9c69d48f41aa6313c9024ebe.html 1. 去mircosoft下载安装包(vcredist_x64.exe) ...
- SQO (标准查询运算符)方法 & Linq To Object
#region SQO (标准查询运算符) 方法 #region Where() Find() FindAll() FirstOrDefault()等方法 static void c01where() ...
- IT职场求生法则(转)
摘要:在IT职场打滚超过10年了,从小小的程序员做到常务副总.相对于其它行业,IT职场应该算比较光明的了,但也陷阱重重,本文说说我的亲身体会,希望大家能在IT职场上战无不胜! 作者:张传波 软件知识大 ...
- 10 Code Coverage Tools for C & C++
Code coverage is a measure used in software testing that describes the degree to which the source co ...
- 十五、struts2中的拦截器(框架功能核心)
十五.struts2中的拦截器(框架功能核心) 1.过滤器VS拦截器 功能是一回事. 过滤器是Servlet规范中的技术,可以对请求和响应进行过滤. 拦截器是Struts2框架中的技术,实现AOP(面 ...