JavaScript学习笔记--this全面解析

this全面解析

1.this是什么

this 就是一个指针，指向我们运行时调用函数的对象。

 

2.为什么要使用this

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

 

3.绑定this

3.1默认绑定

首先要介绍的是最常用的函数调用类型：独立函数调用。可以把这条规则看作是无法应用 其他规则时的默认规则。在这种情况下，this指向全局对象。

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

var a = 2;
foo(); // 2

 

3.2隐式绑定

另一条需要考虑的规则是调用位置是否有上下文对象，或者说是否被某个对象拥有或者包含。

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

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

obj.foo(); // 2

 

3.3显式绑定

以使用 call(..)和 apply(..)方法。它们的第一个参数是一个对象，它们会把这个对象绑定到 this，接着在调用函数时指定这个 this。

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

var obj = {
　　a:2
};

foo.call( obj ); // 2

 

3.4new绑定

使用new来调用函数，会自动执行下面的操作。

1. 创建一个全新的对象。

2. 这个新对象会被执行原型连接。

3. 这个新对象会绑定到函数调用的this。

4. 如果函数没有返回其他对象，那么new表达式中的函数调用会自动返回这个新对象。

function foo(a) {
　　this.a = a;
}

var bar = new foo(2);
console.log( bar.a ); // 2

 

4.this绑定优先级

默认绑定 < 隐式绑定 < 显式绑定 < new 绑定

 

5.箭头函数中的this绑定

箭头函数不使用 this 的四种标准规则，而是根据外层（函数或者全局）作 1 function foo() {

function foo() {
　　// 返回一个箭头函数
　　return (a) => {
　　　　//this 继承自 foo()
　　　　console.log( this.a );
　　};
}

var obj1 = {
　　a:2
};

var obj2 = {
　　a:3
};

var bar = foo.call( obj1 ); bar.call( obj2 ); // 2, 不是 3 ！

 

 

注：本文实际上是《你不知道的JavaScript（上卷）》关于this的读书笔记