What is this? An in-depth analysis of this in JavaScript

What is this? The following article will introduce you to this in JavaScript, and talk about the differences between this in different calling methods of functions. I hope it will be helpful to you!

this in JavaScript is particularly different, such as in Java language this cannot be changed during the execution phase of the code, while JavaScript's this is bound during the calling phase. Because of this nature, it gives this a lot of room for development. But it is somewhat different in strict mode and non-strict mode, and the different calling methods of the function also lead to some differences in this.

What is this?

First define this: This is a variable determined when the execution context is created that cannot be changed during execution.

The so-called execution context is the JavaScript engine that uses some variables and functions before executing a piece of code. , thisA process that is declared in advance and then stored in a variable object. This 'code snippet' includes: Global code (code inside the script tag), Function internal code, eval internal code. The scope chain we are familiar with will also be saved here, stored in an array-like form in the [[Scopes]] attribute of the corresponding function.

This is only determined during the function call phase, that is, when the execution context is created, it is assigned and stored in the variable object. This feature also leads to the variability of this: that is, when the function is called in different ways, the value of this may be different.

We said above that this behaves differently in strict mode and non-strict mode:

var a = 1;
function fun() {
   'use strict';
    var a = 2;
      return this.a;
}
fun();//报错 Cannot read property 'a' of undefined

• In strict mode, this points to undefined;

var a = 1;
function fun() {
    var a = 2;
      return this.a;
}
fun();//1

• In non-strict mode this points to window;

The same piece of code above behaves differently in different modes because Because this is different in strict mode and non-strict mode.

Conclusion: When a function is called independently, its this points to undefined in strict mode. In non-strict mode, when this points to undefined, it automatically points to the global object (that is, in the browser window)

One more thing, in the global environment, this points to itself, look at another example:

this.a = 1;
var b = 1;
c = 1;
console.log(this === window)//true
//这三种都能得到想要的结果，全局上下文的变量对象中存在这三个变量

One more thing, when this is not used in the function What will happen? Look at an example:

var a = 1000;
var obj = {
    a: 1,
      b: this.a + 1
}
function fun() {
    var obj = {
          a: 1,
        c: this.a + 2 //严格模式下这块报错 Cannot read property 'a' of undefined
    }
    return obj.c;
}
console.log(fun());//1002
console.log(obj.b);//1001

In this case, this still points to the window. Then we can draw a separate conclusion:

When obj is declared globally, this in the internal properties of obj points to the global object. When obj is declared in a function, in strict mode this will Points to undefined, non-strict mode automatically changes to point to the global object.

Okay, I just tried my hand at it, and I know the difference between this in strict mode and non-strict mode. However, the most common use in our daily life is to use this in functions. I also mentioned this above. There are differences in the different calling methods of functions. So what are the calling methods of functions? Four types:

• Directly call
• as the method of the object in the global environment or ordinary function
• Use apply and call
• as the constructor Function

is expanded on the following four situations:

Direct call

The above example is actually a direct call, but I Decided to write another example:

var a = 1;
var obj  =  {
    a: 2,
      b: function () {
        function fun() {
          return this.a
        }
       console.log(fun());
    }
} 
obj.b();//1

Although the fun function is defined in the obj.b method, it is still an ordinary function. When called directly, it points to undefined in non-strict mode, and automatically points to the global object, as expected. , strict mode will report the error undefined.a is not established, a is not defined.

I’ll say the important thing again: When a function is called independently, its this points to undefined in strict mode. In non-strict mode, when this points to undefined, it automatically points to the global object ( In the browser, it is window).

As a method of an object

var a = 1;
var obj = {
  a: 2,
  b: function() {
    return this.a;
  }
}
console.log(obj.b())//2

The anonymous function referenced by b is called as a method of obj. At this time, this points to the object that calls it. This is obj. So what if method b is not called as an object method? What does it mean? This is it:

var a = 1;
var obj = {
  a: 2,
  b: function() {
    return this.a;
  }
}
var t = obj.b;
console.log(t());//1

As above, the execution result of the t function turns out to be global variable 1. Why? This involves the memory space of Javascript. That is to say, the b attribute of the obj object stores a reference to the anonymous function, which can be understood as a pointer. When assigning a value to t, it does not open up a separate memory space to store the new function. Instead, t stores a pointer that points to this function. It is equivalent to executing such a piece of pseudo code:

var a = 1;
function fun() {//此函数存储在堆中
    return this.a;
}
var obj = {
  a: 2,
  b: fun //b指向fun函数
}
var t = fun;//变量t指向fun函数
console.log(t());//1

At this time, t is a pointer to the fun function. Calling t is equivalent to calling fun directly. Applying the above rules, printing out 1 is naturally easy to understand.

使用apply，call

关于apply和call是干什么的怎么用本文不涉及，请移驾：apply，call

这是个万能公式，实际上上面直接调用的代码，我们可以看成这样的：

function fun() {
      return this.a;
}
fun();//1
//严格模式
fun.call(undefined)
//非严格模式
fun.call(window)

这时候我们就可以解释下，为啥说在非严格模式下，当函数this指向undefined的时候，会自动指向全局对象，如上，在非严格模式下，当调用fun.call(undefined)的时候打印出来的依旧是1，就是最好的证据。

为啥说是万能公式呢？再看函数作为对象的方法调用:

var a = 1;
var obj = {
  a: 2,
  b: function() {
    return this.a;
  }
}
obj.b()
obj.b.call(obj)

如上，是不是很强大，可以理解为其它两种都是这个方法的语法糖罢了，那么apply和call是不是真的万能的呢？并不是，ES6的箭头函数就是特例，因为箭头函数的this不是在调用时候确定的，这也就是为啥说箭头函数好用的原因之一，因为它的this固定不会变来变去的了。关于箭头函数的this我们稍后再说。

作为构造函数

何为构造函数？所谓构造函数就是用来new对象的函数，像Function、Object、Array、Date等都是全局定义的构造函数。其实每一个函数都可以new对象，那些批量生产我们需要的对象的函数就叫它构造函数罢了。注意，构造函数首字母记得大写。

function Fun() {
  this.name = 'Damonre';
  this.age = 21;
  this.sex = 'man';
  this.run = function () {
    return this.name + '正在跑步';
  }
}
Fun.prototype = {
  contructor: Fun,
  say: function () {
    return this.name + '正在说话';
  }
}
var f = new Fun();
f.run();//Damonare正在跑步
f.say();//Damonare正在说话

如上，如果函数作为构造函数用，那么其中的this就代表它即将new出来的对象。为啥呢？new做了啥呢？

伪代码如下：

function Fun() {
  //new做的事情
  var obj = {};
  obj.__proto__ = Fun.prototype;//Base为构造函数
  obj.name = 'Damonare';
  ...//一系列赋值以及更多的事
  return obj
}

也就是说new做了下面这些事:

• 创建一个临时对象
• 给临时对象绑定原型
• 给临时对象对应属性赋值
• 将临时对象return

也就是说new其实就是个语法糖，this之所以指向临时对象还是没逃脱上面说的几种情况。

当然如果直接调用Fun(),如下：

function Fun() {
  this.name = 'Damonre';
  this.age = 21;
  this.sex = 'man';
  this.run = function () {
    return this.name + '正在跑步';
  }
}
Fun();
console.log(window)

其实就是直接调用一个函数，this在非严格模式下指向window，你可以在window对象找到所有的变量。

另外还有一点，prototype对象的方法的this指向实例对象，因为实例对象的__proto__已经指向了原型函数的prototype。这就涉及原型链的知识了，即方法会沿着对象的原型链进行查找。

箭头函数

刚刚提到了箭头函数是一个不可以用call和apply改变this的典型。

我们看下面这个例子：

var a = 1;
var obj = {
  a: 2
};
var fun = () => console.log(this.a);
fun();//1
fun.call(obj)//1

以上，两次调用都是1。

那么箭头函数的this是怎么确定的呢？箭头函数会捕获其所在上下文的  this 值，作为自己的 this 值，也就是说箭头函数的this在词法层面就完成了绑定。apply，call方法只是传入参数，却改不了this。

var a = 1;
var obj = {
  a: 2
};
function fun() {
    var a = 3;
    let f = () => console.log(this.a);
      f();
};
fun();//1
fun.call(obj);//2

如上，fun直接调用，fun的上下文中的this值为window，注意，这个地方有点绕。fun的上下文就是此箭头函数所在的上下文，因此此时f的this为fun的this也就是window。当fun.call(obj)再次调用的时候，新的上下文创建，fun此时的this为obj，也就是箭头函数的this值。

再来一个例子：

function Fun() {
    this.name = 'Damonare';
}
Fun.prototype.say = () => {
    console.log(this);
}
var f = new Fun();
f.say();//window

有的同学看到这个例子会很懵逼，感觉上this应该指向f这个实例对象啊。不是的，此时的箭头函数所在的上下文是__proto__所在的上下文也就是Object函数的上下文，而Object的this值就是全局对象。

那么再来一个例子:

function Fun() {
    this.name = 'Damonare';
      this.say = () => {
        console.log(this);
    }
}
var f = new Fun();
f.say();//Fun的实例对象

如上，this.say所在的上下文，此时箭头函数所在的上下文就变成了Fun的上下文环境，而因为上面说过当函数作为构造函数调用的时候(也就是new的作用)上下文环境的this指向实例对象。

【相关推荐：javascript学习教程】

The above is the detailed content of What is this? An in-depth analysis of this in JavaScript. For more information, please follow other related articles on the PHP Chinese website!