Problem with this pointing in JS? The most complete explanation of this in 2018

What this article brings to you is about the this pointing problem in JS? The most complete explanation of this in 2018 has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.​

this, points to whoever is called

This in the global context

console.log(this)  //这里的this是全局下的this, 因此这个this默认指向的是BOM的顶级对象window

this in the function

var fn = function() {
	console.log(this)}fn()	//window

This here is this in the function fn, and the fn function is called by window, so this in this function points to window

this in the object

var obj = {
	name: 'zhang',
	fnObj: function() {
		console.log(this)
	}}obj.fnObj()  //obj

A fnObj method is defined in the obj object, and this is printed in it. Because fnObj is called by the obj object, this in this function points to its caller obj.

this in the constructor

var func = function(ele) {
	console.log(this)  //func}var newFu = new func('p')

This in the constructor points to the constructor itself

var func = function(ele) {
	this.box = document.querySelector('p')
	this.box.onclick = function() {
		console.log(this)   //p
	}}

Get a label in the constructor and add an event to the label. This in this event points to the p that called the event.

this in arrow function

Arrow functions in DOM&BOM environment

This in the arrow function is inherited. That is to say, this in the arrow function will inherit the this point of its parent. Wherever this above points, this in the arrow function will point.

var a = {
	b : function(){
		var func = ()=> {
			console.log(this);  //这里的this指向a这个对象
		}
		func();
	},
	c : 'Hello!'}a.b()

The parent of arrow function func is function b. Function b is called by a, so this of function b points to a. Therefore, this of arrow function func will inherit the point of this in function b. In addition, this in arrow function will not be Changed by apply, call, bind

var a = {
  b : () => {
    console.log(this)   //指向window
    var func = ()=> {
      console.log(this);  //这里的this指向window
    }
    func();
  },
  c : 'Hello!'}a.b()

The this of arrow function func inherits from arrow function b, and the this of arrow function b inherits from its parent a object. Because the a object is created by window, this of arrow function b points to window, and arrow function func inherits arrow function b. of this, therefore also points to window

Arrow functions in nodeJS environment

module.exports.b = 'haha'var b = 'asdvar a = {
  b: 'name',
  c: ()=>{
   console.log(this.b)  //haha
  }}a.c()

The this pointer in the arrow function in node will also inherit the this pointer of its upper level, but there is no window object here, but points to the module.exports object.

The above is a question about this pointing in JS? The most complete introduction to this in 2018. If you want to know more about JavaScript video tutorial, please pay attention to the PHP Chinese website.

The above is the detailed content of Problem with this pointing in JS? The most complete explanation of this in 2018. For more information, please follow other related articles on the PHP Chinese website!