Scope / 这个回调 function

Question

I understand the scope of a function should be settled when it's defined.

so from my understanding, the scope of function(toy) should be the scope of forEach , so this should really just be forEach ? but it turns out to be global scope. can't figure why

function Cat(name) {
  this.name = name;
  this.toys = ['string', 'ball', 'balloon'];
};

Cat.prototype.play = function meow() {
  this.toys.forEach(function(toy) {
    console.log(this);
  });
};

const garfield = new Cat('garfield');
garfield.play();

Answer 1

As pointed out by others, a function declared using the function keyword will have its own this , and depends on how the function is called, rather than the context that its defined in. Since you are using .forEach() (and seem to be leaning towards es5 syntax), one possible way to change the this inside the forEach() method is to use the thisArg , where you can explicitly state what this should be inside your callback function:

 function Cat(name) { this.name = name; this.toys = ['string', 'ball', 'balloon']; }; Cat.prototype.play = function meow() { this.toys.forEach(function(toy) { console.log(this); }, this); // ^--- specify the thisArg }; const garfield = new Cat('garfield'); garfield.play();

Answer 2

When you declare a function() using ES5 syntax, it has no awareness of lexical scope, thus this is bound to the default window.

It's exactly the same as if you declared a named global function and then passed it in by reference. The only difference is that you declared the code inline.

Functions declared on the.prototype chain get auto-bound to their parent object.

If you use the new ES6 syntax () => {} then this will get bound to the current lexical scope.