【JavaScript笔记】JavaScript中this的使用

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