详解js和jquery里的this关键字
来源:互联网 发布:软件著作权 增值税 编辑:程序博客网 时间:2024/06/16 19:23
我们要记住: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());//Blizzardvar 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里的this关键字
- JS 中 和 JQuery 的 this 关键字
- 详解JS作用域和this关键字
- JS this关键字详解
- JS函数的 this 关键字详解
- 关于js里的this关键字的理解
- jQuery里$(this)和this的区别在哪?
- jQuery里$(this)和this的区别在哪?
- js中的this关键字详解
- js中的this关键字详解
- js中的this关键字详解
- js中的this关键字详解
- JS 中 this 关键字详解
- JS 中 this 关键字详解
- js中的this关键字详解
- js中的this关键字详解
- JS中this关键字详解
- MySql按周,按月,按日分组统计数据
- 解决Charles Response 中文乱码
- 写在前面,自省——勿忘初心
- hdu 1757 A Simple Math Problem(矩阵快速幂 水~)
- 特例---可图化
- 详解js和jquery里的this关键字
- NSDocumentDirectory和NSDocumentionDirectory区别
- 已知线性表中元素以值递增有序排列,并以单链表作为存储结构,设计一个算法,删除表中值相同的多余元素
- 【FZU】Problem 2059 MM(离线处理并查集)
- Set Matrix Zeroes - LeetCode 73
- sed命令详解
- 防止页面二次提交
- MySQL Infobright 数据仓库快速安装笔记
- Linux操作系统下IPTables配置方法详解