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
来调用函数,会自动执行下面的操作。
-
创建一个全新的对象。
-
这个新对象会被执行原型连接。
-
这个新对象会绑定到函数调用的
this
。 -
如果函数没有返回其他对象,那么
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 !