javascript中this的绑定

Posted 2020-08-28

javascript中this有很多种绑定方式，最近学习过程中总结了一下，有默认绑定、隐式绑定、显示绑定、强制绑定、实例绑定。

接下来我们看看：

默认绑定：

代码如下：

function foo() {

　　console.log( this.a );

}

var a = 3;

foo(); // 3

全局作用域下this默认指定到window，默认绑定即调用位置如何决定 this 的绑定对象。

 

隐式绑定：

function foo() {

　　console.log( this.a );

}

var obj = { a: 3, foo: foo };

obj.foo(); // 3

隐式绑定容易丢失 比如

var bar=obj.foo;

bar();//undefined

调用位置是在window下 但是foo方法指定了obj作为它的绑定对象

显示绑定：

function foo() {

　　console.log( this.a );

}

var obj = { a:3 };

foo.call( obj ); // 3

使用call我们调用foo的时候强制把this绑定在obj上

强制绑定：

function foo() {

　　console.log( this.a );

}

var obj = { a:3};

var bar = function() {

　　foo.call( obj );//强制绑定

};

bar(); // 3

setTimeout( bar, 100 ); // 3

// 强制绑定的 bar 不可能再修改它的 this

bar.call( window ); // 还是3

实例绑定：

JavaScript 也有一个 new 操作符

function foo(a) {

　　this.a = a;

}

var bar = new foo(3);

console.log( bar.a ); // 3