当前位置 博文首页 > 纸飞机博客:this对象

    纸飞机博客:this对象

    作者:[db:作者] 时间:2021-09-07 10:11

    这里主要说的是函数内的this。 this是在函数调用时创建的执行上下文中自 动生成的一个内部属性,它会绑定(指向)一 个对象。但是函数在不同的调用方式下其 内部this会绑定不同的对象。各绑定规则如下:

    一、普通函数

    普通函数(无论全局还是局部)直接调用,其 this指向全局对象window

    //全局函数
    function A() {
        console.log(this)
    )
    A(); //Window
    
    
    --------------
    
    
    //局部函数
    function aa() {
        function bb() {
            console.log(this);//Window
        }
        bb()
    }
    aa();

    二、立即执行函数

    立即执行函数中的this指向全局对象 window

    (function() { 
        console.log(this); //Window
    })();

    三、对象里的方法

    当一个方法被调用时,this指向调用该方法的对象

    var obj = {
        sayName: function() {
            console.log(this);
        }
    }
    obj.sayName(); //obj

    四、构造函数

    this指向新创建的实例对象。

    function Obj() {
        this.name = 'xiao'; //Obj作为构造函数被调用,函数体内的this被绑定为新创建的对象person。
    }
    var person = new Obj();
    console.log(person.name); //xiao

    五、调用call/apply/bind的函数

    作用是改变函数的调用对象,即改变函数 this的指向,指向第一个参数对象

    var d = {
        getThis: function(){
            console.log(this)
        }
    }
    var e = {
        name: 'xiao'
    }
    d.getThis.call(e) //e

    六、箭头函数

    ECMA262规范中表明箭头函数不会生成执行上下文,也就没有自己的this。所以它的 this是词法,按词法解析this,即在定义时就已经和外层执行上下文的this绑定了。箭头函数的this始终等于外层上下文的this, 外层this指向谁,箭头函数this就指向谁。

    var f = {
        getThis:()=>{
            console.log(this)
        }
    }
    f.getThis(); //Window '箭头函数中的this等于其外层中的this,即全局环境中的this,等于window
    
    
    ---------------
    
    
    var objl = {
        age: 1,
        say: function() {
            setTimeout(() => {
                console.log(this,this.age); //obj1 1
                //此处this等于其外层函数say中的this,指向调用say的obj1'
            },0);
        }
    };
    obj1.say()

    七、事件绑定函数

    事件绑定里的this指向调用该函数的dom 对象

    var btn = document.querySelector('.btn');
    btn.onclick = function() {
        console.log(this); // btn 对象
    } 

    八、定时器函数

    定时器函数里的this指向的是window

    setTimeout(function() {
        console.log(this);//window
    ),1000);

    cs
    下一篇:没有了