JavaScript函数中的this四种绑定形式
Jakcy
JavaScript
2021-10-29
39
this的默认绑定 当一个函数没有明确的调用对象的时候,也就是单纯作为独立函数调用的时候,将对函数的this使用默认绑定:绑定到全局的window对象
// 1
function fire () {
console.log(this === window)
// 我是被定义在函数内部的函数哦!
function innerFire() {
console.log(this === window)
}
innerFire(); // 独立函数调用
}
fire(); // 输出true true
// 2
var obj = {
fire: function () {
function innerFire() {
console.log(this === window)
}
innerFire(); // 独立函数调用
}
}
obj.fire(); //输出 true
this的隐式绑定 当函数被一个对象“包含”的时候,我们称函数的this被隐式绑定到这个对象里面了,这时候,通过this可以直接访问所绑定的对象里面的其他属性;函数于对象是独立的,this是在代码运行期动态绑定的而不是在书写期;
// 1
function fire () {
console.log(this.a)
}
var obj = {
a: 1,
fire: fire
}
obj.fire(); // 输出1
// 2
var a = 2;
var obj = {
a: 1,
fire: function () {
console.log(this.a)
}
}
obj.fire(); // 输出1
// 3
var fireInGrobal = obj.fire;
fireInGrobal(); // 输出 2
this的显式绑定:(call和bind方法) call和bind的区别是:在绑定this到对象参数的同时: 1.call将立即执行该函数 2.bind不执行函数,只返回一个可供执行的函数
var obj = {
a: 1, // a是定义在对象obj中的属性
fire: function () {
console.log(this.a)
}
}
var a = 2; // a是定义在全局环境中的变量
var fireInGrobal = obj.fire;
fireInGrobal(); // 输出2
fireInGrobal.call(obj); // 输出1
// 2
var fireInGrobal1 = fireInGrobal.bind(obj);
fireInGrobal1();// 输出1
// 输出1