js下的this都有哪些用法
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js下的this都有哪些用法相关的知识，希望对你有一定的参考价值。
this是javascript语言的一个关键字。它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。比如，
function test()
this.x = 1;
随着函数使用场合的不同，this的值会发生变化。但是有一个总的原则，那就是this指的是，调用函数的那个对象。
下面分四种情况，详细讨论this的用法。
情况一：纯粹的函数调用
这是函数的最通常用法，属于全局性调用，因此this就代表全局对象Global。
请看下面这段代码，它的运行结果是1。
function test()
this.x = 1;
alert(this.x);
test(); // 1
为了证明this就是全局对象，我对代码做一些改变：
var x = 1;
function test()
alert(this.x);
test(); // 1
运行结果还是1。再变一下：
var x = 1;
function test()
this.x = 0;
test();
alert(x); //0
情况二：作为对象方法的调用
函数还可以作为某个对象的方法调用，这时this就指这个上级对象。
function test()
alert(this.x);
var o = ;
o.x = 1;
o.m = test;
o.m(); // 1
情况三 作为构造函数调用
所谓构造函数，就是通过这个函数生成一个新对象（object）。这时，this就指这个新对象。
function test()
this.x = 1;
var o = new test();
alert(o.x); // 1
运行结果为1。为了表明这时this不是全局对象，我对代码做一些改变：
var x = 2;
function test()
this.x = 1;
var o = new test();
alert(x); //2
运行结果为2，表明全局变量x的值根本没变。
情况四 apply调用
apply()是函数对象的一个方法，它的作用是改变函数的调用对象，它的第一个参数就表示改变后的调用这个函数的对象。因此，this指的就是这第一个参数。
var x = 0;
function test()
alert(this.x);
var o=;
o.x = 1;
o.m = test;
o.m.apply(); //0
apply()的参数为空时，默认调用全局对象。因此，这时的运行结果为0，证明this指的是全局对象。
如果把最后一行代码修改为
o.m.apply(o); //1
运行结果就变成了1，证明了这时this代表的是对象o。 参考技术A this一般的用法是：不指定事件元素的时候this指定的是window，指定事件元素的时候，this指定当前发生事件的元素。还有以下几种用法：
1、纯粹函数调用。
2、作为方法调用，那么this就是指这个上级对象。
3、作为构造函数调用。所谓构造函数，就是生成一个新的对象。这时，这个this就是指这个对象。
4、apply调用
this指向的是apply中的第一个参数 参考技术B 在jquery中each循环元素的时候，this就指的当前元素
记录js学习之this用法
一直对Javascript中的this都有一种似是而非的感觉，今天突然感觉豁然开朗，特此记录一下。
咱们先看个栗子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>this的使用</title>
<script type="text/javascript">
var Car,tesla;
Car=function () {
this.start=function(){
console.log(‘car started‘);
};
this.turnKye=function () {
var carKey=document.getElementById(‘car_key‘);
carKey.onclick=function () {
this.start();
};
}
return this;
}
tesla=new Car();
tesla.turnKye();
</script>
</head>
<body>
<input type="button" id="car_key" value="test" />
</body>
</html>
咋一看这段代码没有什么问题，但是由于对于this的错误理解最终导致错误的结果。我们在元素car_key上面绑定了click事件，认为在car的类中嵌套绑定click事件就可以让这个dom元素访问car的this上下文。这种方式看起来很合理，但是不幸的是它并不工作。
在Javascript中，this关键字总是指向正执行的作用域的所有者。
请大家仔细揣摩上面那句话。正如我们所知，函数调用会产生新的作用域，鼠标点击时onclick事件被触发，this就指向了dom元素而不是Car的类。
那我们怎么做才会让它能正常工作呢？我们通常会把this赋值给一个局部的自由变量(比如that,_this,self,me等，这个在许多的框架里面都有体现）来避开作用域带来的问题。这里使用局部变量来重写之前的方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>this的使用</title>
</head>
<body>
<input type="button" id="car_key" value="test" />
<script type="text/javascript">
var Car,tesla;
Car=function () {
this.start=function(){
console.log(‘car started‘);
};
this.turnKye=function () {
var that=this;
var carKey=document.getElementById(‘car_key‘);
carKey.onclick=function () {
that.start();
};
}
return this;
}
tesla=new Car();
tesla.turnKye();
</script>
</body>
</html>
由于that是一个自由变量，onclick事件的出发并不会引起它的重新定义。
如果你熟悉ES6的话可以使用胖箭头符号，这更简洁和更容易理解，如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>this的使用</title>
</head>
<body>
<input type="button" id="car_key" value="test" />
<script type="text/javascript">
var Car,tesla;
Car=function () {
this.start=function(){
console.log(‘car started‘);
};
this.turnKye=function () {
//var that=this;
var carKey=document.getElementById(‘car_key‘);
//carKey.onclick=function () {
// that.start();
//};
carKey.onclick=()=>this.start();
}
return this;
}
tesla=new Car();
tesla.turnKye();
</script>
</body>
</html>
当然我们也可以使用绑定函数的方法来解决这个问题：如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>this的使用</title>
</head>
<body>
<input type="button" id="car_key" value="test" />
<script type="text/javascript">
var Car,tesla;
Car=function () {
this.start=function(){
console.log(‘car started‘);
};
var click=function(){
this.start();
}
this.turnKye=function () {
//var that=this;
var carKey=document.getElementById(‘car_key‘);
carKey.onclick=click.bind(this);
}
return this;
}
tesla=new Car();
tesla.turnKye();
</script>
</body>
</html>
其实这些在学习React的时候，绑定事件的时候遇到的坑，那时候只知道这么写，不知道怎么回事，今天突然感觉豁然开朗。希望对大家有所帮助。
以上是关于js下的this都有哪些用法的主要内容，如果未能解决你的问题，请参考以下文章