JavaScript中的this到底是什么

目次
目的
概述
隐式绑定
普通函数调用
在严格模式中
在浏览器环境中
在Node.js环境中
对象的方法调用
构造函数调用
setTimeout回调的环境
在箭头函数中
显式绑定
call
apply
bind

---

目的

        相识this的根本概念，通过案例相识this在差别环境下的指向。

---

概述

this是什么
        this是当前实行上下文中所指向的对象（现实上就是这个对象的指针或引用），它取决于函数是怎样被调用的。也就是说，this是实行上下文的属性。
隐式绑定
        也叫自动绑定。通过对象调用方法时，this指向这个对象。函数直接调用指向全局对象（现实上是全局对象调用了函数）。当然，在严格模式下是undefined。
显式绑定
        调用call,apply或bind明确指定this。显式绑定在回调函数和定时器中经常使用到。它们之间的特点如下：

• call：立即调用函数并显式指定this，通报给函数的参数格式是：(盼望绑定给this的对象,arg1,arg2,……)
  
• apply：立即调用函数并显式指定this，通报给函数的参数格式是：(盼望绑定给this的对象,[arg1,arg2,……])
  
• bind：不立刻调用，而是返回一个新函数，this 被永世绑定。通报给函数的参数格式是：(盼望绑定给this的对象,arg1,arg2,……)
  

---

隐式绑定

普通函数调用

在严格模式中

1. function fun(){
2.     //设置在严格模式下
3.     "use strict";
4.     //打印：undefined
5.     console.log(this)
6. }
7. fun()

复制代码

在浏览器环境中

在Node.js环境中

1. function fun(){
2.     //打印：global对象
3.     console.log(this)
4. }
5. //在Node.js环境中调用这个函数，且这个函数没有显式指定 this，那么this默认指向global对象。
6. fun()

复制代码

---

对象的方法调用

1. const student = {
2.     name: "张三",
3.     sex: "男",
4.     selfIntroduction() {
5.         //这里的this就是student对象
6.         console.log("姓名：",this.name,"；性别：",this.sex)
7.     }
8. }
9. student.selfIntroduction()
10. //等价于
11. console.log("姓名：",student.name,"；性别：",student.sex)

复制代码

---

构造函数调用

1. function Student(name,sex){
2.     this.name=name
3.     this.sex=sex
4.     //打印Student对象的信息
5.     console.log(this)
6. }
7. new Student("张三","男")

复制代码

---

setTimeout回调的环境

1. const obj = {
2.     sayLater: function () {
3.         setTimeout(function () {
4.             //在Node.js环境下，this绑定成了这个Timeout实例。而非obj对象。
5.             //在浏览器中运行则是window对象。
6.             console.log(this)
7.         }, 1000);
8.     }
9. };
10. obj.sayLater();

复制代码

---

在箭头函数中

注意：普通函数和箭头函数最大的区别就是，普通函数中的this指向调用方，而箭头函数中的this继续外层的上下文。我们刚才演示了this在setTimeout回调的环境，按照刚才的理论，如果使用箭头函数this应该指向sayLater对象。看下面的案例：

1. const obj = {
2.     sayLater: function () {
3.         setTimeout( ()=> {
4.             console.log(this)
5.         }, 1000);
6.     }
7. };
8. obj.sayLater();

复制代码

---

显式绑定

call

1. function fun(name, sex) {
2.     console.log(`name:${name},sex:${sex},age:${this.age}`)
3. }
5. const student = {
6.     name: "张三", sex: "男", age: "18"
7. }
8. //打印：name:李四,sex:女,age:18
9. fun.call(student,"李四","女")

复制代码

---

apply

1. function fun(name, sex) {
2.     console.log(`name:${name},sex:${sex},age:${this.age}`)
3. }
5. const student = {
6.     name: "张三", sex: "男", age: "18"
7. }
8. //打印：name:李四,sex:女,age:18
9. fun.apply(student,["李四","女"])

复制代码

---

bind

1. function fun(name, sex) {
2.     console.log(`name:${name},sex:${sex},age:${this.age}`)
3. }
5. const student = {
6.     name: "张三", sex: "男", age: "18"
7. }
8. const stu=fun.bind(student,"李四","女")
9. //打印：function
10. console.log(typeof stu)
11. //打印：name:李四,sex:女,age:18
12. stu()

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

继续阅读请点击广告