JS中的this
2019-03-26 本文已影响0人
小丘啦啦啦
一、说明
阮一峰老师的话：它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。
“运行时”，this与函数的执行环境有关，和声明环境没有关系。函数运行时自动生成的一个内部对象，只能在函数内部使用。始终代表的是调用当前函数的那个对象。
二、不同环境函数调用时的this
1、全局环境
当函数定义在js全局时，它被当作单纯的函数来调用。调用时，this指向全局window对象。
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
var name= 'a';
function sayName(){
console.log(this.name);
}
sayName(); //a
</script>
</body>
</html>
setTimeout 或 setInterval 这样的延时函数中调用也属于全局对象。
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
var name='qiurx';
setTimeout(function(){
console.log(this.name); //window.name->qiurx
},0);
</script>
</body>
</html>
2、对象方法环境
当函数别保存为一个对象的属性时，即为这个对象的方法。调用时，此方法作为对象的方法被调用，方法的中的this就指向这个对象。
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
var name= 'a';
var obj = {
name:'b',
sayName(){
console.log(this.name);
},
hey(){
return function(){ //执行hey返回一个函数出去,再执行相当于全局环境
console.log(this.name);
}
//setTimeout 或 setInterval 这样的延时函数中调用也属于全局对象
}
}
obj.sayName(); //b,当作对象的方法被调用,this指向此对象
var func = obj.sayName;
func(); //a,此函数定义全局环境,再次说明决定this的是执行环境
obj.hey()(); //a
</script>
</body>
</html>
3、构造函数环境
当函数是一个构造函数，用new创建一个对象，this即指向这个新创建的对象。
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
function Func (){
this.name = "qiurx";
}
var obj = new Func();
console.log(obj.name); //qiurx
</script>
</body>
</html>
4、事件函数环境
在DOM元素的事件中使用this，this指向此DOM元素对象。
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div>
<li>哈哈哈</li>
</div>
<script>
document.getElementsByTagName("li")[0].onclick = function(){
console.log(this.innerText); //this指向页面li元素对象
};
</script>
</body>
</html>
三、修改this的指向
1、使用局部变量来代替this指针，常用。
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
var name = "a";
var obj = {
name: "b",
say: function() {
var _this = this; //使用一个变量指向 this，即此对象
setTimeout(function() {
console.log(_this.name);
}, 0);
},
hey: function() {
setTimeout(function() {
console.log(this.name); //回调函数，相当于全局环境，this指向window
}, 0);
}
}
obj.say(); //b
obj.hey(); //a
</script>
</body>
</html>
2、使用call或apply方法
call，是函数调用的一种形式，函数名.call(thisObj[,arg1[,arg2[,...]]])来调用函数。提供了一种修改this指向的方法。第一个参数就是更改this指向的对象，必输；后面参数可选。
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
var name = 'a';
function say(){
console.log(this.name);
};
function say2(score1,score2){
console.log(`${this.name}+${score1}+${score2}`)
}
var obj = {
name : 'b',
hey(){
console.log(this.name);
}
};
say(); //a,全局环境
say.call(obj); //b,say中的this指向obj对象
obj.hey(); //b,对象方法环境,this指向此对象
obj.hey.call(null); //a,将对象函数中的this指向null,即指向全局window
say2.call(obj,'99','100'); //b+99+100,同理,后两个为传参
</script>
</body>
</html>
apply，作用和call一样，需以数组进行传参。
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
var name = 'a';
function say3(score1,score2){
console.log(`${this.name}+${score1}+${score2}`)
}
var obj = {
name : 'b',
hey(){
console.log(this.name);
}
};
say3.apply(obj,['100','120']); //b+100+120
</script>
</body>
</html>
