这里主要说的是函数内的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
作用是改变函数的调用对象,即改变函数 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