关于JS中 this指向的知识总结

前言

该篇笔记主要记录关于this指向问题，方便自己理解的更加透彻，对知识点再次巩固，在帮助自己的同时也希望能够帮助带着问题来阅读的小伙伴，新手创作，请多指教！

---

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、this是什么？

Javascript中 this 关键字指的是它所属的对象，
它拥有不同的值，具体取决于它的使用位置和调用。下面我们就具体来讲解。

二、this的指向问题

1. 在方法中调用：this指向的是所处方法的对象，this指的就是方法对象。
2. 在函数调用下：在没有对象调用该方法时this指向全局对象（window）,若有对象调用则this指向该对象。
3. 在单独使用时：this指向全局对象。
4. 在闭包中使用：如果内部函数没有使用箭头函数定义，则 this 对象会在运行时绑定到执行函数的上下文。
5. 在call、apply调用下：this指向的时它们的第一个参数
6. 在严格模式下：函数是没有绑定到this上，这时候this是undefined，如果单独使用this指向全局对象，
7. 在事件中：this指向接收事件的HTML元素

1.在方法中调用时

代码如下（示例）：

<script>
    var name='222';
    var a={
        name:'111',
        say:function (){
            console.log(this.name);
        }
    }
        a.say();//this指向a  结果为111 
               //因为a对象是say方法的所有者
</script>

这里可以看出this指向的就是对象a,因此打印出a里面的name值。

2.在函数中调用时

代码如下（示例）：

<script>
    var name='222';
    var a={
        name:'111',
        say:function (){

            console.log(this.name);
        }
    }
    var fun=a.say;//这里是把function(){}赋值给了fun
        fun();// 因为这里是没有对象调用
             //所以this的指向是window, this.name的结果是222
       
</script>

以上可以看出当直接执行fun()时，this指向的是window，因此打印出name值为222，再看看第一个案例里面 a.say 打印的却是111，由此可以看出：在没有对象调用该方法时this指向全局对象（window）,若有对象调用则this指向该对象。

---

3.在单独使用时

代码如下（示例）：

<script>
   var t=this
   console.log(t);//this指向window
</script>

4.在闭包中使用

代码如下（示例）：

<script>
   var i = 'The Window';
   let object = {
       i: 'My Object',
       getIdentityFunc() {
           return function() {
               return this.i;
           };
       }
   };
   console.log(object.getIdentityFunc()()); // 'The Window'
</script>

这里先创建了一个全局变量 i ，之后又创建一个包含 i 属性的对象。这个对象还包含一个 getIdentityFunc() 方法，返回一个匿名函数形成了闭包。这个匿名函数返回 this.i 。因为getIdentityFunc() 返回函数，所以 object.getIdentityFunc()() 会立即调用这个返回的函数，此时object.getIdentityFunc()所处的上下文环境里，this是指向全局变量的

如果我们要用object里面的 i 值，可以先将外部的this保存到函数里面来，如代码所示：

<script>
   var i = 'The Window';
   let object = {
       i: 'My Object',
       getIdentityFunc() {
           var that = this;
           return function() {
               return that.i;
           };
       }
   };
   console.log(object.getIdentityFunc()()); // 'My Object'
</script>

5.在call、apply调用时

call、apply方法都可以改变this的指向，区别是参数列表不同。

apply()代码如下（示例）：

 
<script>
  function Person(name,age,sex){
    this.name=name;
    this.age=age;
    this.sex=sex
  }
  function Student(name,age,sex,tel,grade){
    Person.apply(this,[name,age,sex]);
    this.tel=tel;
    this.grade=grade;
  }
  var st=new Student('tn',22,'female',23333343,2019)
</script>

这里用的是apply方法，把原本属于Person的赋值语句给了Student，因此Student里面也有了this.name=name，this.age=age，this.sex=sex

call()代码如下（示例）：

<script>
var person1 = {
fullName: function() {
  return this.firstName + " " + this.lastName;
}
}
var person2 = {
firstName:"T",
lastName: "N",
}
var x = person1.fullName.call(person2); 
</script>

这里也是一样的，将原本是person1的fullName方法给了person2。

6.在严格模式下

在严格模式下代码如下（示例）：

<script>
  'use strict'
  function demo(){
      console.log(this)
  }
</script>

非严格模式下代码如下（示例）：

<script>
//    'use strict'
 function demo(){
     console.log(this)
 }
</script>

可以看出，函数是没有绑定到this上，这时候this是undefined

单独使用时 代码如下（示例）：

<script>
 console.log(this===window);//true
 
  'use strict'
 console.log(this===window);//true
</script>

在单独使用时不管是在严格模式下还是非严格模式下，this的指向都是window

在构造函数中 代码如下（示例）：

<script>
  'use strict'
  function Demo(age){
     this.age=age;
  }
  var demo=new Demo(18);
  console.log(demo.age);//18
</script>

   <script>
    function Demo(age){
       this.age=age;
    }
    var demo=new Demo(18);
    console.log(demo.age);//18
    </script>

可以看出，不管是严格模式下还是非严格模式下，构造函数中的this都指向这个对象

7.在事件中

代码如下（示例）：

   <script>
   <button onclick="this.style.color='red">单击换颜色！</button>
    </script>

可以看出this指向接收此事件的HTML元素