this对象

Posted 2021-09-09 纸 飞机

这里主要说的是函数内的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);