Shulou(Shulou.com)05/31 Report--

Today, the editor will share with you the relevant knowledge points about how to use this in Javascript. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look.

Start with the call method

The call method allows you to switch the context (context) in which the function executes, that is, the object bound by this.

Most articles that introduce this include the call method in the * introduction, but in this article, we will introduce the call method in the * * bit and study this from the call method. Because the call function is the point of explicitly binding this, let's take a look at how it simulates the implementation (regardless of passing in null, undefined and original values):

Function.prototype.call = function (thisArg) {var context = thisArg; var arr = []; var result; context.fn = this; for (let I = 1, len = arguments.length; I

< len; i++) { arr.push('arguments[' + i + ']'); } result = eval("context.fn(" + arr + ")"); delete context.fn; return result; } 从以上代码我们可以看到，把调用 call 方法的函数作为***个参数对象的方法，此时相当于把***个参数对象作为函数执行的上下文环境，而 this 是指向函数执行的上下文环境的，因此 this 就指向了***个参数对象，实现了 call 方法切换函数执行上下文环境的功能。 对象方法中的this 在模拟 call 方法的时候，我们使用了对象方法来改变 this 的指向。调用对象中的方法时，会把对象作为方法的上下文环境来调用。 既然 this 是指向执行函数的上下文环境的，那我们先来研究一下调用函数时的执行上下文情况。 下面我门来看看调用对象方法时执行上下文是如何的： var foo = { x : 1, getX: function(){ console.log(this.x); } } foo.getX(); 从上图中，我们可以看出getX方法的调用者的上下文是foo，因此getX方法中的 this 指向调用者上下文foo，转换成 call 方法为foo.getX.call(foo)。 下面我们把其他函数的调用方式都按调用对象方法的思路来转换。 构造函数中的this function Foo(){ this.x = 1; this.getX = function(){ console.log(this.x); } } var foo = new Foo(); foo.getX(); 执行 new 如果不考虑原型链，只考虑上下文的切换，就相当于先创建一个空的对象，然后把这个空的对象作为构造函数的上下文，再去执行构造函数，***返回这个对象。 var newMethod = function(func){ var context = {}; func.call(context); return context; } function Foo(){ this.x = 1; this.getX = function(){ console.log(this.x); } } var foo = newMethod(Foo); foo.getX(); DOM事件处理函数中的this DOMElement.addEventListener('click', function(){ console.log(this); }); 把函数绑定到DOM事件时，可以当作在DOM上增加一个函数方法，当触发这个事件时调用DOM上对应的事件方法。 DOMElement.clickHandle = function(){ console.log(this); } DOMElement.clickHandle(); 普通函数中的this var x = 1; function getX(){ console.log(this.x); } getX(); 这种情况下，我们创建一个虚拟上下文对象，然后普通函数作为这个虚拟上下文对象的方法调用，此时普通函数中的this就指向了这个虚拟上下文。 那这个虚拟上下文是什么呢?在非严格模式下是全局上下文，浏览器里是 window ，NodeJs里是 Global ;在严格模式下是 undefined 。 var x = 1; function getX(){ console.log(this.x); } [viturl context].getX = getX; [viturl context].getX(); 闭包中的this var x = 1; var foo = { x: 2, y: 3, getXY: function(){ (function(){ console.log("x：" + this.x); console.log("y：" + this.y); })(); } } foo.getXY(); 这段代码的上下文如下图： 这里需要注意的是，我们再研究函数中的 this 指向时，只需要关注 this 所在的函数是如何调用的， this 所在函数外的函数调用都是浮云，是不需要关注的。因此在所有的图示中，我们只需要关注红色框中的内容。 因此这段代码我们关注的部分只有: (function(){ console.log(this.x); })(); 与普通函数调用一样，创建一个虚拟上下文对象，然后普通函数作为这个虚拟上下文对象的方法立即调用，匿名函数中的 this 也就指向了这个虚拟上下文。

This in parameter

Var x = 1; var foo = {x: 2, getX: function () {console.log (this.x);}} setTimeout (foo.getX, 1000)

Function parameters are passed by values, so the above code is equivalent to the following code:

Var getX = function () {console.log (this.x);}; setTimeout (getX, 1000)

Then we return to the question of ordinary function calls.

This in the global

The this in the global points to the global context

Var x = 1; console.log (this.x)

This in complex situations

Var x = 1; var a = {x: 2, b: function () {return function () {return function foo () {console.log (this.x);}; (function () {var x = 3; a.b ();}) ()

We can see that there are many functions in the above situation, but we only need to pay attention to how the function this is called. First of all, let's simplify it as follows:

Var x = 1; (function () {var x = 3; var foo = function () {console.log (this.x);} foo ();})

The function foo where this is located is a normal function. We create a virtual context object, and then the ordinary function is called immediately as a method of the virtual context object. So the this points to the virtual context. It is the global context in non-strict mode, window in browser, Global in NodeJs, and undefined in strict mode.

These are all the contents of the article "how to use this in Javascript". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.