在《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
的要领和属性值。