您的位置：首页 > Web前端 > JQuery

详解js和jquery里的this关键字

2015-05-21 10:32 288 查看

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());//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

的方法和属性值。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航