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的读书笔记

posted @ 2020-01-06 21:15  小天狼星tyx  阅读(121)  评论(0编辑  收藏  举报