详解js和jquery里的this关键字
详解js和jquery里的this关键字
js
中的this
我们要记住:this
永远指向函数运行时所在的对象!而不是函数被创建时所在的对象。this
对象是在运行时基于函数的执行环境绑定的,在全局环境中,this
等于window
先来看个例子:
<script>
var fullname = "Trigkit4";
var person = {
fullname : 'Jack',
prop:{
fullname : 'Blizzard',
getFullname : function () {
return this.fullname;
}
}
};
console.log(person.prop.getFullname());//Blizzard
var test = person.prop.getFullname;
console.log(test());//Trigkit4
</script>
当getFullname
被分配到test
变量时,上下文指的是全局对象(window)
。这是因为test
是被隐式设置为全局对象的属性。出于这个原因,该函数返回window
的fullname
,所以在这里 this
指的是window
, 所以返回的是第一个fullname
说明
this
关键字通常在对象的 构造函数中使用,用来引用对象。
关键字this
:总是指向调用该方法的对象,如:
var iCar = new Object();
iCar.color = "red";
iCar.showColor = function(){
alert(this.color);//输出"red"
};
关键字this
用在对象的showColor()
方法中,在此环境,this
等于iCar
使用this
是因为在实例化对象时,总是不能确定开发者会使用什么样的变量名。使用this
,即可在任意多个地方重用同一个函数。考虑下面的例子:
function showColor(){
alert(this.color);
}
var oCar1 = new Object;
oCar1.color = "red";
oCar1.showColor = showColor;
var oCar2 = new Object;
oCar2.color = "blue";
oCar2.showcolor = showcolor;
oCar1.showColor();//输出"red"
oCar2.showColor();//输出"blue"
这段代码中,首先用this
定义函数showColor()
,然后创建两个对象oCar1
和oCar2
,一个对象属性被设置为"red
",另一个为blue
;两个对象都被赋予了属性showColor
,指向原始的showColor()
函数,调用每个showColor
的方法,oCar1
输出red
,oCar2
输出blue
。
引用对象属性时,必须使用
this
关键字。
所有基于全局作用域的变量其实都是window
对象的属性(property)。这意味着即使是在全局上下文中,this
变量也能指向一个对象。
对于 JScript
的客户版本,如果在其他所有对象的上下文之外使用 this
,则它指的是 window
对象。
例如:
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<script type="text/javascript">
alert(this);//弹出 object window;
</script>
</head>
<body>
</body>
作为构造函数调用
所谓构造函数,就是通过这个函数生成一个新对象(object)。这时,this
就指这个新对象。
<script type="text/javascript">
function test(){
this.x = 10;
}
var obj = new test();
alert(obj.x); //弹出 10;
</script>
全局环境中的this
在看下面一个this
出现在全局环境中的例子:
<script type="text/javascript">
var name = "全局";
function getName(){
var name = "局部";
return this.name;
};
alert(getName());//弹出 全局;
</script>
函数getName()
所处的对象是window
对象,因此this
也一定在window
对象中。此时的this
指向window
对象,所以getName()
返回的this.name
其实是window.name
,因此alert
出全局。
结论:无论this
身处何处,一定要找到函数运行时(或者说在何处被调用 了)的位置。
通过不同的调用语法,改变相同函数内部this
的值:
<script type="text/javascript">
var foo = {
test:function(){
alert(this);
}
}
foo.test();//object,因为test方法在调用时属于foo对象
var baz = foo.test;
baz();//window,因为baz()被调用时属于global对象
</script>
局部环境中的this
看下面一个this
出现在局部环境中的例子
<script type="text/javascript">
var name = "全局";
var jubu={
name:"局部",
getName:function(){
return this.name;
}
};
alert(jubu.getName());
</script>
其中this
身处的函数getName
不是在全局环境中,而是处在jubu环境中。无论this
身处何处,一定要找到函数运行时的位置。此时函数getName
运行时的位置:
alert(jubu.getName());
显然,函数getName
所在的对象是jubu
,因此this
的安身之处定然在jubu
,即指向jubu
对象,则getName
返回的this.name
其实是jubu.name
,因此alert
出来的是“局部”!
作用域链中的this
<script type="text/javascript">
function scoping () {
console.log(this);
return function () {
console.log(this);
};
}
scoping()();
>>window
>> window
</script>
因为scoping
函数属于window对象,自然作用域链中的函数也属于window
对象。
对象中的this
可以在对象的任何方法中使用this
来访问该对象的属性。这与用new
得到的实例是不一样的。
var obj = {
foo: "test",
bar: function () {
console.log(this.foo);
}
};
obj.bar(); // "test"
重写this
无法重写this
,因为它是一个关键字。
function test () {
var this = {}; // Uncaught SyntaxError: Unexpected token this
}
jquery中的this
$()
生成的是什么呢?实际上$()=jquery()
,那么也就是说返回的是一个jquery
的对象。$(this)
是jquery
对象,能调用jquery
的方法,例如click()
, keyup()
。
$(function () {
$('button').click(function () {
alert(this);//this 表示原生的DOM
//$(this)表示当前对象,这里指的是button
})
});
结论:this
,表示当前的上下文对象是一个html DOM
对象,可以调用html
对象所拥有的属性,方法。$(this)
,代表的上下文对象是一个jquery
的上下文对象,可以调用jquery
的方法和属性值。
详解js和jquery里的this关键字的更多相关文章
- 详解JS与Jquery获得的对象的区别与联系
世上无难事只怕有心人,敲代码也一样只要你用心去搞懂一件事,即使一个小小的用法对你以后也会有很大的作用: 项目虽然赶得紧但是有些问题百度找完答案解决之后,也要自己梳理一遍做到心领神会!!!今天就直接来上 ...
- 详解js面向对象编程
转自:http://segmentfault.com/a/1190000000713346 基本概念 ECMA关于对象的定义是:”无序属性的集合,其属性可以包含基本值.对象或者函数.“对象的每个属性或 ...
- 详解js变量、作用域及内存
详解js变量.作用域及内存 来源:伯乐在线 作者:trigkit4 原文出处: trigkit4 基本类型值有:undefined,NUll,Boolean,Number和Strin ...
- js模仿jquery里的几个方法parent, parentUntil, children
有时工作需要, 也是接着上一章的方法, 用js模仿jquery里的几个方法parent, parentUntil, children. function parent(node){ return no ...
- [转]javascript console 函数详解 js开发调试的利器
javascript console 函数详解 js开发调试的利器 分步阅读 Console 是用于显示 JS和 DOM 对象信息的单独窗口.并且向 JS 中注入1个 console 对象,使用该 ...
- 详解js的bind、call、apply
详解js的bind.call.apply 说明 虽然bind.call.apply都是js很基础的一块知识,但是我从未认真总结过这三者的区别. 由于公司后端是用的微服务架构,又没有中间层对接,导致前端 ...
- Jquery 选择器 详解 js 判断字符串是否包含另外一个字符串
Jquery 选择器 详解 在线文档地址:http://tool.oschina.net/apidocs/apidoc?api=jquery 各种在线工具地址:http://www.ostools ...
- 详解js中的闭包
前言 在js中,闭包是一个很重要又相当不容易完全理解的要点,网上关于讲解闭包的文章非常多,但是并不是非常容易读懂,在这里以<javascript高级程序设计>里面的理论为基础.用拆分的方式 ...
- js&jquery跨域详解jsonp,jquery并发大量请求丢失回调bug
URL 说明 是否允许通信 http://www.a.com/a.js http://www.a.com/b.js 同一域名下 允许 http://www.a.com/lab/a.js http:/ ...
随机推荐
- 基于visual Studio2013解决C语言竞赛题之0403字符统计
题目 解决代码及点评 这道题的目标是锻炼while循环,while循环的语法是 while(循环条件) { 循环体; } 每次进入循环体之前,先判断循环条件是否满足,如果不满足,执行序列就 ...
- PencilDraw: 用简化的C语言画图!
最近做的一个东西,不过功能还不是太完善,而且界面极丑.慢慢改进吧. 点这里打开!
- MyEclipse10+Jdk1.7+OSGI+MySql实现CRUD数据库
开发环境: Windows2008R2 64位置+MyEclipse10+jdk1.7.0_67+MySql5.5 软件安装:myeclipse-10.0-offline-installer-wind ...
- android -- 蓝牙 bluetooth (四)OPP文件传输
在前面android -- 蓝牙 bluetooth (一) 入门文章结尾中提到了会按四个方面来写这系列的文章,前面已写了蓝牙打开和蓝牙搜索,这次一起来看下蓝牙文件分享的流程,也就是蓝牙应用opp目录 ...
- tomcat解析之简单web服务器(图)
链接地址:http://gogole.iteye.com/blog/587163 之前有javaeyer推荐了一本书<how tomcat works>,今天晚上看了看,确实不错,第一眼就 ...
- [Swust OJ 491]--分数的位置(简单版)
题目链接:http://acm.swust.edu.cn/problem/0491/ Time limit(ms): 1000 Memory limit(kb): 65535 Descriptio ...
- Android 中 关闭部分 Activity 的方法总结
每一个activity都有自己的生命周期,被打开了最终就要被关闭. 四种结束当前的activity方法 但如果已经启动了四个Activity:A,B,C和D, 在D Activity里,想再启动一个A ...
- CentOS用yum安装搭建LAMP
#1.安装Apache yum install httpd httpd-devel #启动apache /etc/init.d/httpd start #设为开机启动: chkconfig httpd ...
- IBM Python 技术专题
Python 技术专题 Python 是由 Guido van Rossum 开发的,可免费获得的.是一种非常高级的解释型语言.其语法简单易懂,而且面向对象的语义功能强大又灵活,Python 可以广泛 ...
- win32多线程程序设计笔记(第五章)
前面章节介绍了线程创建等过程,现在的问题是:如何在某个线程内终止另外一个正在运行的线程? windows核心编程中提到终止运行线程的方法: 1)线程函数自己返回: 2)线程通过调用ExitThread ...