JS written test question: this

function Pet(name) {
  this.name = name;
 
  this.getName = () => this.name;
}
 
const cat = new Pet('Fluffy');
 
console.log(cat.getName()); // What is logged?
 
const { getName } = cat;
console.log(getName());     // What is logged?

answer ：'Fluffy' and 'Fluffy'

When a function is a constructor new Pet('Fluffy') Invocation time , Inside the constructor this Is equal to the constructed object

Pet In the constructor this.name = name Expressions are created on constructed objects name attribute .

this.getName = () => this.name Create methods on constructed objects getName. And because of the arrow function , Inside the arrow function this The value is equal to... Of the external scope this value , namely Pet.

call cat.getName() as well as getName() Will return the expression this.name, The calculation result is 'Fluffy'.

2.

const object = {
  message: 'Hello, World!',
 
  logMessage() {
    console.log(this.message); // What is logged?
  }
};
 
setTimeout(object.logMessage, 1000);

answer ：1 Seconds later , Print  undefined.

Even though setTimeout() Function USES object.logMessage As callback , But it will continue object.logMessage Used as a regular function , Not the way .

During regular function calls ,this Equal to global objects , In the browser environment window.

That's why logMessage Methods  this.message be equal to  window.message, namely undefined.

3.

How to use lowMessage function , Let it print “hellow,World！”

// Using func.call() method
logMessage.call(object);
 
// Using func.apply() method
logMessage.apply(object);
 
// Creating a bound function
const boundLogMessage = logMessage.bind(object);
boundLogMessage();

4.

const object = {
  who: 'World',
 
  greet() {
    return `Hello, ${this.who}!`;
  },
 
  farewell: () => {
    return `Goodbye, ${this.who}!`;
  }
};
 
console.log(object.greet());    // What is logged?
console.log(object.farewell()); // What is logged?

answer : 'Hello, World!'  and  'Goodbye, undefined!'.

When calling object.greet() when , stay greet() Methods the internal ,this The value is equal to object, because greet It's a regular function . therefore object.greet() return 'Hello, World!'.

however farewell() It's an arrow function , In the arrow function this The value is always equal to... In the external scope this value .

farewell() The external scope of is the global scope , It's a global object . therefore object.farewell() Actually back to 'Goodbye, ${window.who}!', The result is 'Goodbye, undefined!'.

var length = 4;
function callback() {
  console.log(this.length); // What is logged?
}
 
const object = {
  length: 5,
  method(callback) {
    callback();
  }
};
 
object.method(callback, 1, 2);

answer : 4

callback() Is in method() Internal use of regular function calls to call . Due to the this The value is equal to the global object , therefore this.length The result is window.length..

The first statement var length = 4, The outermost scope , In global objects  window  Create a property on length.

var length = 4;
function callback() {
  console.log(this.length); // What is logged?
}
 
const object = {
  length: 5,
  method() {
    arguments[0]();
  }
};
 
object.method(callback, 1, 2);

answer : 3

obj.method(callback, 1, 2) When called, there is 3 Parameters :callback, 1 and 2. result ,method() The internal parameter special variable is an array class object with the following structure :

1 2 3 4 5 6

{   0: callback,   1: 1,   2: 2,   length: 3 }

because arguments[0]() yes arguments Method calls for callbacks on objects , So the parameter inside the callback is equal to arguments. therefore  callback() Medium this.length And arguments.length identical , namely 3.

 const user = {
     email: "[email protected]",
     updateEmail: email => {
         console.log(this.email) // undefined
         console.log(email) // new
         console.log(this) // window
         this.email = email
         console.log(this.email) // new
     }
}
user.updateEmail("[email protected]")
console.log(user.email) // my