JavaScript：this-关键字，2024中级前端开发面试解答

function f(){
return this.a;
}
var g = f.bind({a:“js”});
console.log(g()); // js
var h = g.bind({a:‘html’}); // this已经被绑定bind的第一个参数，不会重复绑定，输出的值还是js
console.log(h()); // js
var o = {a:css, f:f, g:g, h:h};
console.log(o.f(), o.g(), o.h()); // css, js, js
• 箭头函数：
在箭头函数中，箭头函数的this被设置为封闭的词法环境的，换句话说，箭头函数中的this取决于该函数被创建时的环境。
var objProject = this;
var foo = (() => this);
console.log(foo()); // window
console.log(objProject); // window
console.log(foo() === objProject ); // true
// 作为对象的一个方法调用
var obj = {foo: foo};
console.log(obj.foo() === objProject ); // true
// 尝试使用call来设定this
console.log(foo.call(obj) === objProject ); // true
// 尝试使用bind来设定this
foo = foo.bind(obj);
console.log(foo() === objProject ); // true
• 作为对象的方法调用时:
当函数作为对象的方法被调用时，this指向调用的该函数的对象
var obj = {
a: 37,
fn: function() {
return this.a;
}
};
console.log(obj.fn()); // 37
• 作为构造函数:
当一个函数用作构造函数时（使用new关键字），它的this被绑定到正在构造的新对象。
function C(){
this.a = 37;
}
var o = new C();
console.log(o.a); // 37
function C2(){
this.a = 37;
return {a:38};
}
o = new C2();
console.log(o.a); // 38，手动设置了返回对象
• 作为DOM事件处理函数
当函数被用作事件处理函数时，它的this指向触发事件的元素
// 被调用时，将关联的元素变成蓝色
function bluify(e){
console.log(this === e.currentTarget); // 总是 true
// 当 currentTarget 和 target 是同一个对象时为 true
console.log(this === e.target);
this.style.backgroundColor = ‘#A5D9F3’;
}
// 获取文档中的所有元素的列表
var elements = document.getElementsByTagName(‘*’);
// 将bluify作为元素的点击监听函数，当元素被点击时，就会变成蓝色