function t () {
    console.log(this);
}
t();
// The output is window
Copy the code

Common function

In general, for ordinary functions, this refers to whoever calls the function.

1. Invocation of methods on the function prototype chain by different object instances:

Array.prototype.fn = function () {
    console.log(this);
}
let arr = [1.2.3];
arr.fn(); // (3) [1, 2, 3]

let arr2 = ['1'.'2'.'3'];
arr2.fn();/ / (3) [" 1 ", "2", "3"]
Copy the code

Arr and arR2 For different fn() callers, the reference to this in fn is different.

2. Nested function calls:

function fn1() {
    console.log('fn1 this:.this);
}
function fn2() {
    console.log('the fn2 this'.this);
    fn1();
}
fn2();
// Both are Windows
Copy the code

3. Constructor this:

function test() {
  this.a = function() {
    console.log(this); }}let test1 = new test();
test1.a();

let test2 = new test();
test2.a();
// Test {a: ƒ}
Copy the code

4. Object this:

let obj = {
    fn : function () {
        console.log(this);
    }
}
obj.fn();
// The output is {fn: ƒ}
Copy the code

5. DOM event binding

<body>
  <button class='button'>Click on the I</button>
</body>
<script>
  let button = document.querySelector('.button');
  button.addEventListener('click'.function() {
    console.log(this);
  });
</script>
// This points to the button
// Who triggers points to who
Copy the code

Arrow function

For arrow functions, there is no prototype and cannot be a constructor, so the comparison is made in other cases. The value of this will be resolved to the value of the nearest non-parent arrow function or global object.

1. Nested calls to functions

function fn1() {
    console.log('fn1:'.this);
    (() = > {
        console.log('array func:'.this); }) (); } fn1();// fn1: Window
// array func: Window
Copy the code

No matter how it’s nested, right

2. Object this:

let t = {
    a:() = > {
    console.log(this);    
}
}
t.a();
// Output: Window
Copy the code

The window object calls t.a(), so it points to window;

3. Constructor this:

function test() {
  this.a = () = > {
    console.log(this); }}let test1 = new test();
test1.a();

let test2 = new test();
test2.a();
/ / test {a: ƒ}
/ / test {a: ƒ}
Copy the code

4. Methods in the prototype chain:

Array.prototype.fn =  () = >{
  console.log(this);
}
let arr = [1.2.3];
arr.fn(); // window

let arr2 = ['1'.'2'.'3'];
arr2.fn();//window
Copy the code

5.DOM event binding

<body>
  <button class='button'>Click on the I</button>
</body>
<script>
  let button = document.querySelector('.button');
  button.addEventListener('click'.function() {
    console.log(this);
  });
</script>
//window
Copy the code

In the example above, the arrow function this seems to bind only to the window.

How to bind arrow function this?

function test(fn) {
  this.fn = fn;
}

let fn = {
  tt: function a() {(() = > {
      console.log(this); }) (); }};let t1 = new test(fn);

t1.fn.tt();
{tt: [Function: a]}

function test() {
  this.fn = function a() {(() = > {
      console.log(this); }) (); }; }let t1 = new test();

t1.fn();
// test {fn: [Function: a]}
Copy the code

References:

  • zhuanlan.zhihu.com/p/60734960
  • Blog.fundebug.com/2019/09/16/…