Preface: I have always been confused about the direction of this in javascript, javascript you don’t know (Volume 1) there are three chapters in this book are about this, last year I read it for the first time, but I still felt vaguely understood, I asked in depth, but NOW I read it again, I really think what it says in this book is really good, and I want to know more about it This book is a good choice.

Here I will briefly explain my understanding and remember the direction of this in javascrpt in two sentences:

This point

(1) A normal function points to the caller of the function: an easy way is to see if the function has a dot in front of it, and if so, to point to the value in front of the dot.

2, the arrow function points to the domain in which the function is located: note the understanding of scope, onlyFunction of {}Constitute scope,The object's {}As well asif(){}Do not constitute a scope;


const obj = {
    name: 'objName',
    say() {
        console.log(this.name);
    },
    read: (a)= > {
        console.log(this.name);
    }
}
obj.say(); // objName
obj.read(); // undefined


Copy the code
  • Normal function, the caller is obj, so the result is objName; Also understandsay()It’s a normal function. It’s a little bit out front, sothisPoint to theobj;
  • Arrow function,this points to the scope of the function, the current scope is global, sothis.nameforundefined.
  • The arrow function this is a normal function in scopesay.say()The caller is obj
const obj = {
    say: function () {
        setTimeout((a)= > {
            console.log(this)}); } } obj.say();// obj, in which case this refers to the obj that defines it
Copy the code

Supplementary knowledge

  • The browser default this is Window
function test() {
    console.log(this);
}
test(); //window
Copy the code
  • Default global environment in Node.jsThis is {}, default in normal functionsThis is global
console.log(this); / / {}
function test() {
   console.log(this);
}
test(); //global
Copy the code

Two questions to see if you’ve got it

example1

var length = 10;
function fn() {
 console.log(this.length);
}

const  obj = {
    length: 5.method: function(fn) {
        fn();
        arguments[0]();
    }
};

obj.method(fn, 1);

Copy the code

Output 10, 2

I was confused when I first saw this question, and now I finally understand it. Method (); fn(); fn(); this (); fn(); fn(); fn(); this () [0] angument.length = angument.length = arguments.0() [0] angument.length = angument.length

Note:

  • The above example runs with undefined 2 in the Node environment,var length = 10toglobal.length = 10;This is because variables defined globally in node are not bound to global, and browsers are automatically bound to the global window
  • Define length as const, and print 0 and 2; Var is automatically defined to window, but const and let are not automatically defined to window. Const prints window.length to 0, because window.length means how many iframes there are on the page The definition of window.length on DN

What happens if I change it to the following?

var length = 10;

function fn() {
    console.log(this.length);
}

const obj = {
    length: 5.method: function(fn) {
        fn();
        const fun = arguments[0];
        fun()；
    }
};

obj.method(fn, 1);
Copy the code

Ten, ten

example 2

window.val = 1;
var obj = {
    val: 2.dbl: function() {
        this.val *= 2;
        val *= 2;
        console.log(val);
        console.log(this.val);
    }
}
obj.dbl(); / / 2, 4
var func = obj.dbl;
func(); / / 8 8
Copy the code

This is a bit convoluted, but it’s easy to understand step by step:

obj.dbl(); When executing this line of code, this refers to obj, so this.val === obj.val*=2, which results in 4,val*=2 === window.val *=2, which results in 2

Func (), when this line of code is executed, func() does not have any prefix, this refers to window.func(); Val === window.val *=2, window.val *= 4, val*=2 == window.val *2, Console. log(this.val), console.log(val), window.val, window.val, window.val, window.val

reference

JavaScript’s This principle

About

  • github
  • blog