在《javaScript语言精粹》
这本书中,把 this
出现的场景分为四类,简单的说就是:
有对象就指向调用对象
没调用对象就指向全局对象
用new构造就指向新对象
通过 apply 或 call 或 bind 来改变 this 的所指。
函数调用模式中,this
为window
;方法调用模式中,this
为方法所属的对象;构造器调用模式中,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
}
apply 和 call 调用以及 bind 绑定
apply
和 call
调用以及 bind
绑定都是指向绑定的对象,
<script type="text/javascript">
var bar = {
value: 'huang',
ages: 10
};
function foo(){
console.log(this);
}
console.log(foo());//window,函数没有所属对象:指向全局对象
console.log(foo.apply(bar));//即bar.foo(),this指向了bar,所以能读取该对象的所有属性
console.log(foo.call(bar));//ages: 10 value: "huang" __proto__: Object
var newFoo = foo.bind(bar);
console.log(newFoo());//Object
</script>
jquery中的this
$()
生成的是什么呢?实际上$()=jquery()
,那么也就是说返回的是一个jquery
的对象。$(this)
是jquery
对象,能调用jquery
的方法,例如click()
, keyup()
。
$(function () {
$('button').click(function () {
alert(this);//this 表示原生的DOM
//$(this)表示当前对象,这里指的是button
})
});
在许多情况下JQuery
的this
都指向HTML
元素节点。
结论:this
,表示当前的上下文对象是一个html DOM
对象,可以调用html
对象所拥有的属性,方法。$(this)
,代表的上下文对象是一个jquery
的上下文对象,可以调用jquery
的方法和属性值。