JavaScript中this的调用方式
1）在方法中调用【注意 方法中声明函数，同时在函数中再调用this】
2）单独调用
3）在函数中调用
1）在方法中，调用this
<script>
// 创建一个对象，在方法中调用this
var person = {
firstName: "前者",
lastName : "后者",
fullName : function() {
console.log("在person对象中调用方法内的this: "+this); //这个this指代的就是person对象
return this.firstName + " -- " + this.lastName;
}
};
console.log("对象方法中调用this --- person.fullName()结果: "+person.fullName());
</script>
// 结果如下
在person对象中调用方法内的this: [object Object]
对象方法中调用this --- person.fullName()结果: 前者 -- 后者
2）单独调用this
<script>
//单独调用this
var onlyThis = this;
console.log("单独调用this："+onlyThis); //这个this指代的是全局对象
</script>
// 结果如下
单独调用this：[object Window]
3)在函数中，调用this
<script>
//函数中使用 this（默认）
function myFunction() {
var i = 10; //函数中定义一个变量
function mySecond(){
console.log("函数 myFunction--mySecond 嵌套函数中的this："+this);
console.log("函数 myFunction--mySecond 嵌套函数中的this.i值："+ this.i); //这个this指的是全局对象，全局对象没有i这个变量，所以值为undefined
}
mySecond();
console.log("函数中使用 this："+this);
console.log("函数myFunction 中this.i值："+this.i);//这个this指的是全局对象，全局对象没有i这个变量，所以值为undefined
}
myFunction();
</script>
//结果如下：
1. 函数 myFunction--mySecond 嵌套函数中的this：[object Window]
2. 函数 myFunction--mySecond 嵌套函数中的this.i值：undefined
3. 函数中使用 this：[object Window]
4. 函数myFunction 中this.i值：undefined
在对象的方法中定义函数，同时定义的函数中调用this（重点）
<script>
var person2 = {
firstName: "前者",
lastName : "后者",
fullName : function() {
console.log("在person对象中调用方法内的this: "+this);//这个this指代person2对象
console.log(this.firstName + " -- " + this.lastName);
let _that = this;
function initermethod(){ //方法中的函数
console.log("在对象 --方法 -- 函数中 this: "+this);//这个this指代全局对象
}
function initermethodthis(){ //方法中的函数
console.log("在对象 --方法 -- 函数中 _that: "+_that);//这个that指代person2对象
console.log("在对象 --方法 -- 函数中 _that.lastName: "+_that.lastName);
}
initermethod(); //调用方法
initermethodthis(); //调用方法
}
};
person2.fullName();
</script>
//结果如下
1. 在person对象中调用方法内的this: [object Object]
2. 前者 -- 后者
3. 在对象 --方法 -- 函数中 this: [object Window]
4. 在对象 --方法 -- 函数中 _that: [object Object]
5. 在对象 --方法 -- 函数中 _that.lastName: 后者
箭头函数中的this
箭头函数其实没有自己的this，所以箭头函数内部的this就是外部的this
<script>
var myObject={
value:100
};
myObject.getValue=function(){
//箭头函数其实没有自己的this，所以箭头函数内部的this就是外部的this
let ff = ()=>{
console.log("箭头函数里this:"+this);//这个this指代myObject对象
console.log("箭头函数里 this.value: "+this.value);
};
ff();
return this.value;
}
console.log(myObject.getValue());
</script>
//结果如下：
1. 箭头函数里this:[object Object]
2. 箭头函数里 this.value: 100
3. 100
全部代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<script>
console.log("------------------------------- 对象的方法里调用this --------------------------------");
// 创建一个对象
var person = {
firstName: "前者",
lastName : "后者",
fullName : function() {
console.log("在person对象中调用方法内的this: "+this);
return this.firstName + " -- " + this.lastName;
}
};
console.log("对象方法中调用this --- person.fullName()结果: "+person.fullName());
console.log("------------------------------- 单独调用this ---------------------------------------");
//单独调用this
var onlyThis = this;
console.log("单独调用this："+onlyThis); //这个this指代的是全局对象
console.log("------------------------------- 函数中使用 this（默认） ---------------------------------------");
//函数中使用 this（默认）
function myFunction() {
var i = 10; //函数中定义一个变量
function mySecond(){
console.log("函数 myFunction--mySecond 嵌套函数中的this："+this);
console.log("函数 myFunction--mySecond 嵌套函数中的this.i值："+ this.i); //这个this指的是全局对象，全局对象没有i这个变量，所以值为undefined
}
mySecond();
console.log("函数中使用 this："+this);
console.log("函数myFunction 中this.i值："+this.i);//这个this指的是全局对象，全局对象没有i这个变量，所以值为undefined
}
myFunction();
console.log("------------------------------- 在事件中使用 this（默认） ---------------------------------------");
//<button onclick="this.style.display='none'">点我后我就消失了</button>
console.log("------------------------------- 在对象的函数中，调用this使得this就是当前对象 ---------------------------------------")
var person2 = {
firstName: "前者",
lastName : "后者",
fullName : function() {
console.log("在person对象中调用方法内的this: "+this);//这个this指代person2对象
console.log(this.firstName + " -- " + this.lastName);
let _that = this;
function initermethod(){ //方法中的函数
console.log("在对象 --方法 -- 函数中 this: "+this);//这个this指代全局对象
}
function initermethodthis(){ //方法中的函数
console.log("在对象 --方法 -- 函数中 _that: "+_that);//这个that指代person2对象
console.log("在对象 --方法 -- 函数中 _that.lastName: "+_that.lastName);
}
initermethod();
initermethodthis();
}
};
person2.fullName();
</script>
</body>
</html>
参考地址
菜鸟教程：https://www.runoob.com/js/js-this.html
js中this的四种使用场景：https://cloud.tencent.com/developer/news/201617
彻底理解js中this的指向，不必硬背--追梦子： https://www.cnblogs.com/pssp/p/5216085.html
JavaScript this：https://blog.csdn.net/fuziwang/article/details/84864020
JavaScript 的 this 原理：http://www.ruanyifeng.com/blog/2018/06/javascript-this.html
网友评论