JavaScript进阶-this

1.什么是this?

当一个函数被调用时，会创建一个活动记录(有时候也称为执行上下文)。这个记录会包 含函数在哪里被调用(调用栈)、函数的调用方法、传入的参数等信息。this 就是记录的 其中一个属性，会在函数执行的过程中用到。

2.为什么要用this?

this 提供了一种更优雅的方式来隐式“传递”一个对象引用，因此可以将 API 设计 得更加简洁并且易于复用。

3.this的执行过程

想要理解this的执行过程，要先理解this的调用位置.与调用位置相关的还有一个概念叫做调用栈

a.调用位置

调用位置就是函数在代码中被调用的位置(不是声明的位置).

b.调用栈

为了到达当前执行位置所调用的所有函数,其实就是一个函数调用链.

 

下面这个例子看看到底什么是 调用位置 和 调用栈

function baz() {
// 当前调用栈是:baz

// 因此，当前调用位置是全局作用域

console.log("baz");

bar(); // <-- bar 的调用位置
}

function bar() {
// 当前调用栈是 baz -> bar

// 因此，当前调用位置在 baz 中

console.log("bar");

foo(); // <-- foo 的调用位置
}

function foo() {
// 当前调用栈是 baz -> bar -> foo // 因此，当前调用位置在 bar 中

console.log("foo");
}

baz(); // <-- baz 的调用位置

要从调用栈中分析出真正的调用位置，因为它决定了 this 的绑定。

不同的调用位置决定了 this的 绑定方式不同。

 

4.this的绑定方式

 

a.默认绑定

 

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

 

在代码中，foo() 是直接使用不带任何修饰的函数引用进行调用的，因此只能使用 默认绑定，无法应用其他规则。

函数调用时应用了 this 的默认绑定，因此 this 指向全局对象。

 

 

b.隐式绑定

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

当 foo() 被调用时，它的落脚点指向 obj 对象。当函数引 用有上下文对象时，隐式绑定规则会把函数调用中的 this 绑定到这个上下文对象。因为调 用 foo() 时 this 被绑定到 obj，因此 this.a 和 obj.a 是一样的。

对象属性引用链中只有最顶层或者说最后一层会影响调用位置。

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

 

 

c.显式绑定

 

function foo() { 
console.log( this.a );
}
var obj = {
 a:2
};
foo.call( obj ); // 2

通过 foo.call(..)，我们可以在调用 foo 时强制把它的 this 绑定到 obj 上。

 

 

d.new绑定

 

 

function foo(a) { 
this.a = a;
}
var bar = new foo(2);
 console.log( bar.a ); // 2

 

使用 new 来调用 foo(..) 时，我们会构造一个新对象并把它绑定到 foo(..) 调用中的 this 上。new 是最后一种可以影响函数调用时 this 绑定行为的方法，我们称之为 new 绑定。

 

5.判断this绑定规则

a. 函数是否在new中调用(new绑定)?如果是的话this绑定的是新创建的对象。

     var bar = new foo()

b. 函数是否通过call、apply(显式绑定)或者硬绑定调用?如果是的话，this绑定的是 指定的对象。

     var bar = foo.call(obj2)

c. 函数是否在某个上下文对象中调用(隐式绑定)?如果是的话，this 绑定的是那个上 下文对象。

     var bar = obj1.foo()

d. 如果都不是的话，使用默认绑定。如果在严格模式下，就绑定到undefined，否则绑定到 全局对象。

     var bar = foo()