首页 > 代码库 > this的绑定方式

this的绑定方式

2024-09-19 16:25:17   222人阅读

默认绑定

函数调用时绑定window，在严格模式下不会绑定到全局对象

function foo(){
  console.log(this.a);  
}
var a = 10;
foo();

function foo2(){
  "use strict"
  console.log(this.a);    
}
foo2();

隐式绑定

将this绑定到上下文对象中

function foo() {
console.log( this.a );
}
var obj = {
a: 2,
foo: foo
};
obj.foo(); // 2
function foo() {
console.log( this.a );
}
var obj2 = {
a: 42,
foo: foo
};
var obj1 = {
a: 2,
obj2: obj2
};
obj1.obj2.foo(); // 42

隐式丢失

函数丢失绑定导致默认绑定，此时this绑定到全局对象，undefined上(严格模式下)

function foo() {
console.log( this.a );
}
var obj = {
a: 2,
foo: foo
};
var bar = obj.foo; // 函数别名！
var a = "oops, global"; // a 是全局对象的属性
bar(); // "oops, global"

显示绑定

使用call和apply进行显示绑定

变式 硬绑定

function foo() {
console.log( this.a );
}
var obj = {
a:2
};
var bar = function() {
foo.call( obj );
};
bar(); // 2
setTimeout( bar, 100 ); // 2
// 硬绑定的bar 不可能再修改它的this
bar.call( window ); // 2

api调用上下文

function foo(el) {
console.log( el, this.id );
}
var obj = {
id: "awesome"
};
// 调用foo(..) 时把this 绑定到obj
[1, 2, 3].forEach( foo, obj );
// 1 awesome 2 awesome 3 awesome

new 绑定

1. 创建（或者说构造）一个全新的对象。
2. 这个新对象会被执行[[ 原型]] 连接。
3. 这个新对象会绑定到函数调用的this。
4. 如果函数没有返回其他对象，那么new 表达式中的函数调用会自动返回这个新对象。

 

来自<你不知道的javaScript>

this的绑定方式


联系
我们