关于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). 为了帮助理解,让我 ...
随机推荐
- Spring Data Jpa真爽啊
http://www.ibm.com/developerworks/cn/opensource/os-cn-spring-jpa/ 持久层的实现类可以让框架生成.只需要声明持久层接口,框架直接生成代理 ...
- NOIP201305转圈游戏
2016.1.25 试题描述 有n个小伙伴(编号从0到n-1)围坐一圈玩游戏.按照顺时针方向给n个位置编号,从0到n-1.最初,第0号小伙伴在第0号位置,第1号小伙伴在第1号位置,……,依此类推. ...
- 记事本源代码 python3
已实现基本功能,显示行号功能暂时实现不了(后面学会了再加,右下角可以实现定位光标所在行.列) 可能会有些bug 1 from tkinter import * from tkinter.message ...
- css required,focus,valid和invalid介绍
本文章来给大家介绍在css3定义required,focus,valid和invalid样式的方法,此方法目前只支持ie9+及ff,gg浏览器哦.css3 提示只适用于高级浏览器:ChromeFire ...
- Yii 中比较常用的rules验证规则记录
查看代码 打印 01 return array( 02 03 //必须填写 04 array('email, username, password,agree,verifyPa ...
- EasyUI datagrid组件绑定有转义字符的json数据出错
最近项目中一个页面的datagrid出现了莫名其妙的问题, 首先是分页数据的第二页和第三页不能展示,过了一天后第一页也出不来了, 默认首页不出来导致后续分页处理无法进行, 整个数据都不出来了,最后只能 ...
- 【翻译】什么是 eCPM & RPM 与其计算公式
[原文链接] What is eCPM & RPM. How to Calculate eCPM & RPM using Formula eCPM代表着每千次网页爆光转换率(或者是每千 ...
- sendmessage和postmessage的区别
BOOL PostMessage( HWND hWnd, // handle of destination window ...
- JS 在open打开的子窗口页面中调用父窗口页面的JS方法
需求的情景如下: 1:做新增或修改等操作的时候打开一个新的浏览器窗口(使用window.open(参数等)方法) 2:在新增或修改等的页面上有返回按钮.重置按钮.保存按钮,对于返回就直接关闭此窗口(使 ...
- 使用FFmpeg解码H264-2016.01.14
使用jni方式调用FFmepg项目中接口,对H264裸码进行解码. 该Demo主要实现从文件中读取H264编码的视频流,然后使用FFmpeg解码,将解码后的码流保存到文件. 工程目录结构如图所示: A ...