欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JS中的this指向问题(详细版)

程序员文章站 2022-07-06 15:58:56
JS中的this指向问题()在全局作用域中=>this -> window在普通函数中=>this取决于谁调用,谁调用我,this就指向谁,跟如何定义无关 var obj = { fn1:function() { console.log(this);...

JS中的this指向问题()

  1. 在全局作用域中

    =>this -> window
    <script>
       console.log(this); //this->window
    </script>
    
  2. 在普通函数中

    =>this取决于谁调用,谁调用我,this就指向谁,跟如何定义无关

     var obj = {
                fn1:function() {
                    console.log(this); 
                },
                fn2:function(){
                    fn3() 
                }
            }
            function fn3() {
                console.log(this); 
            }
            fn3();//this->window
            obj.fn1();//this->obj
            obj.fn2();//this->window
    
  3. 箭头函数中的this

    箭头函数没有自己的this,箭头函数的this就是上下文中定义的this,因为箭头函数没有自己的this所以不能用做构造函数。

     var div = document.querySelector('div'); 
        var o={
            a:function(){
                var arr=[1];
              //就是定义所在对象中的this
              //这里的this—>o
                arr.forEach(item=>{
                  //所以this -> o
                    console.log(this);
                })
            },
          //这里的this指向window o是定义在window中的对象
            b:()=>{
                console.log(this);
            },
            c:function() {
                console.log(this);
            }
        }
        div.addEventListener('click',item=>{
            console.log(this);//this->window 这里的this就是定义上文window环境中的this
        });
        o.a(); //this->o
        o.b();//this->window
        o.c();//this->o 普通函数谁调用就指向谁
    
  4. 事件绑定中的this

    事件源.onclik = function(){ } //this -> 事件源

    事件源.addEventListener(function(){ }) //this->事件源

    var div = document.querySelector('div'); 
        div.addEventListener('click',function() {
            console.log(this); //this->div
        });
        
        div.onclick = function() {
        console.log(this) //this->div
        }
    
  5. 定时器中的this

    定时器中的this->window,因为定时器中采用回调函数作为处理函数,而回调函数的this->window

      setInterval(function() {
            console.log(this); //this->window 
        },500)
        
        setTimeout(function() {
            console.log(this); //this->window 
        },500)
    
  6. 构造函数中的this

    构造函数配合new使用, 而new关键字会将构造函数中的this指向实例化对象,所以构造函数中的this->实例化对象

    new关键字会在内部发生什么

    //第一行,创建一个空对象obj。
    var obj  ={};
    //第二行,将这个空对象的__proto__成员指向了构造函数对象的prototype成员对象.
    obj.__proto__ = CO.prototype;
    //第三行,将构造函数的作用域赋给新对象,因此CA函数中的this指向新对象obj,然后再调用CO函数。于是我们就给obj对象赋值了一个成员变量p,这个成员变量的值是” I’min constructed object”。
    CO.call(obj);
    //第四行,返回新对象obj。
    return obj;
    
    function Person(name,age) {
            this.name = name;
            this.age = age;
        }
        var person1 = new Person();
        person1.name = 'andy';
        person1.age = 18;
        console.log(person1);//Person {name: "andy", age: 18}
        var person2 = new Person();
        person2.name = 'huni';
        person2.age = 20;
        console.log(person2);// Person {name: "huni", age: 20
    

本文地址:https://blog.csdn.net/chen_junfeng/article/details/109235442