各种函数的this指向

233 阅读1分钟

各种函数的this指向

  1. 普通函数 -- 指向window
 // 1.普通函数中this - window
        function fn() {
            console.log(this);
        }
        // fn();

在这里插入图片描述

  1. 构造函数中this -- 实例对象
 // 2.构造函数中this - 实例对象
    function Student(name) {
        this.name = name;
        console.log(this);
    }
    const stu = new Student('张三');

在这里插入图片描述

  1. 原型方法中this -- 实例对象
// 3.原型方法中this - 实例对象
    Student.prototype.sing = function () {
    console.log(this);
    }
    stu.sing();

在这里插入图片描述

  1. 对象中的方法中的this -- 实例对象
// 4.对象中的方法中的this - 实例对象
    let obj = {
        name: '李四',
        sayHi: function () {
            console.log(this);
        }
    }
    obj.sayHi(); 

在这里插入图片描述

  1. 定时器函数里面的this -- window
//5 定时器函数里面的this-window
    setTimeout(function() {
       console.log(this);     
    }, 1);

在这里插入图片描述

  1. 事件绑定的this -- 事件源
//6 事件绑定中的this-事件源
    document.addEventListener('click',function(){
      console.log(this);
    })

在这里插入图片描述

  1. 箭头函数中的this,没有默认指向,一般指向外层函数this
//7.箭头函数中的this,没有默认指向,一般指向外层函数this
    document.addEventListener('dblclick',()=>{
      console.log(this);
    })

在这里插入图片描述