Talk about this in JS

“This” in js is a question often quizzed by interviewers. I believe every developer has more or less confused about this. So what is “this”? How to find the point of this?

What is this?

How does the JS specification interpret it

”
ECMAScrip (ECMA-262)”

This point

Ok, the above three places, all around the same word: ** context. ** That is to say, the reference to this is determined by context. Let’s look at this in a few scenarios.

This in the global environment

• Nodejs environment

console.log(this) / / {}
Copy the code

• Browser environment

This, which is {} in nodejs, refers to the module.exports scope, and the browser refers to the Window.

This in a function

• Nodejs in non-strict mode

function fn(){
  return this
}
const result = fn() 
console.log(result)  // Object [global] {... }
console.log(result === global) // true
Copy the code

• The browser environment is not in strict mode

• Nodejs strict mode

function fn(){
  'use strict'
  return this
}
const result = fn() 
console.log(result) // undefined
console.log(result === undefined) // true
Copy the code

• In the browser environment

In non-strict mode, the reference to this within the function


Nodejs: global


Browser: Window


In strict mode, the reference to this within the function


Nodejs: undefined


Browser: undefined

function Person(name){
	this.name = name
}
const p = new Person('zhangsan')
console.log(p.name) // zhangsan
Copy the code

Change the reference to this (call, apply, bind)

• call

Call (thisArgs,arg1,arg2,…) The first argument, which is optional, represents the value of this in function. arg1,arg2, … Specify parameter list

function Person() {
  this.name = 'ipenman'
  this.sayHi = function() {
    console.log(`My name is The ${this.name}`)}}function Man() {
  this.name = 'zhangsan'
}
const man = new Man()
const p = new Person()
p.sayHi.call(man) // zhangsan
Copy the code

• apply

Function. Apply (thisArgs,[arg1,arg2,… The first argument, which is optional, represents the value of this in function. [arg1,arg2, …] Specify parameter list

function Person() {
  this.name = 'ipenman'
  this.sayHi = function() {
    console.log(`My name is The ${this.name}`)}}function Man() {
  this.name = 'zhangsan'
}
const man = new Man()
const p = new Person()
p.sayHi.apply(man) // zhangsan
Copy the code

• bind

Syntax: Same as apply syntax Difference: bind creates a new function that is not immediately executed

function Person() {
	this.name = 'ipenman'
  this.sayHi = function(){
  	console.log(`My name is The ${this.name}`)}}function Man() {
  this.name = 'zhangsan'
}
const man = new Man()
const p = new Person()
p.sayHi.bind(man)() // zhangsan
Copy the code

Call, apply, and bind all change the point of “this” to “man” in p.

Methods as objects

const Person = {
  name: 'ipenman'.age: 24.show: function() {
    console.log(this)
  }
}
Person.show() // { name: 'ipenman', age: 24, sayHi: [Function: sayHi] }
Copy the code

When functions are called as methods within an object, their this refers to the object that called the function.

Arrow function

The “this” object inside the function is the object that was defined, not the object that was used. The reason this is fixed is not because the arrow function has an internal mechanism to bind this, but because the arrow function doesn’t have its own “this”. Causes the internal this to be the this of the outer code block.

The function function:

const fn = function (){
  return this
}
console.log(fn()) // Object [global] {... }
Copy the code

Arrow function:

const fn = (a)= >{
	return this
}
console.log(this) / / {}
Copy the code

The arrow function does not have its own this, its this is the this of the upper code block.

Problem sets

See if you have really mastered this.

1. Run test2.js and say the print result.

1) create test1. Js

module.exports = this
Copy the code

(2) create test2. Js

const t1 = require('./test1')
console.log(this === t1)
Copy the code

2. Run test2.js and say the print result

1) create test1. Js

module.exports = function(){
	return this
}
Copy the code

1) create test2. Js

const t1 = require('./test1')
function fn(){
	return this
}
console.log(fn() === this)
Copy the code

3. Run the following code and say the print result

const Person = {
	name: 'ipenman'.show: function(){
  	return this
  },
  show1:(a)= >{
  	return this}}console.log(Person.show())
console.log(Person.show1())
console.log(Person.show() === Person.show1())
console.log(Person.show1() === this)
console.log(Person.show() === this)

Copy the code

4. Run the code and say the print

function Person() {
  this.name = 'ipenman'
  return (a)= > {
    return (a)= > {
      console.log(this)
      return (a)= > {
        console.log(this)
        return (a)= > {
          console.log(this)}}}}}const p = new Person()
p()()()()
Copy the code

5. Name the print.

function Person(){
	this.name = name
  this.age = 23
}
function Man(name){
	Person.call(this,name)
}
const man = new Man('ipenman')
console.log(man)

Copy the code

This article describes this in 6 contexts. If you have any questions, please reply in the comments.