Where does JavaScript this point to?

This points to: 1. Ordinary function or as an object attribute, pointing to the window object; 2. In event binding, pointing to the element of the bound event; 3. In the constructor, pointing to the instance of the class; 4. Arrow In the function, it points to this in its nearest parent context; 5. In call/apply/bind, it points to the first parameter passed in.

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer

JavaScript中thisPoints to the following situations:

• Ordinary function or as an object attribute
• Event binding
• Constructor
• Arrow function
• call/apply/bindSpecify

Let’s introduce one by one

Ordinary functions or as Object attributes

thisdepends on whether there is a "dot" before the method execution. If there is a "dot", whoever is in front of the "dot"thiswill be , if there is no dot,thispoints towindow

const fn = function () { console.log(this); }; const obj = { name: 'OBJ', fn }; fn(); obj.fn(); const fn1 = obj.fn; fn1();

answer:

1. window 2. {name: 'OBJ', fn: function() {console.log(this)}} // obj 3. window

You can see that when the function is called as a property of the object, Itsthispoints to the object that called the function, otherwise itsthispoints to thewindow

event binding

When performing event binding,thisin the event binding function is the element of the binding event:

// 假设页面中有id为button的button元素 // var x = 100; window.x = 100; const fn = function () { console.log(this.x); }; const obj = { x: 200, fn }; const $button = document.getElementById('button'); $button.x = 300; obj.fn(); const fn1 = obj.fn; fn1(); $button.addEventListener('click', fn); $button.addEventListener('mouseenter', obj.fn); $button.addEventListener('mouseleave', function () {obj.fn();});

answer:

1. 200 2. 100 3. 点击button时：300 4. 鼠标移入button时：300 5. 鼠标移出时：200

But you need to pay attention The thing is, here we are when the user clicks, the browser helps us point thethisof the click event to theDOMelement bound to the event. If the corresponding event is triggered through code, we can specify itsthis

$button.click.call() // this为window,打印结果为100

constructor through

call/apply/bind(new Fn)

The constructor (new Fn) is executed.thisin the function is an instance of the current class, which isThe newkeyword helps us do it:

var x = 100; const Fn = function () { this.x = 200; console.log(this.x); }; const fn = new Fn();

answer:

1. 200

arrow function

There is no own ## in the arrow function #this, thethisused isthis

const fn = function () { console.log(this); setTimeout(() => { console.log(this); }, 1000); setTimeout(function () { console.log(this); }); }; const obj = { x: 100, fn }; obj.fn();

answer:

1. {x:100, fn: function() {...}} // obj 2. window 3. {x:100, fn: function() {...}} // obj

## in its nearest parent context

#call/apply/bindChangethisto point toas the first parameter passed in to

call/apply/bind

i.e. is thethisof the function:

var x = 100; const obj = { x: 200, y: 200 }; const fn = function () { console.log(this.x); }; fn(); fn.call(obj); fn.apply(obj); const fixedThisFn = fn.bind(obj); fixedThisFn();

answer:

1. 100 2. 200 3. 200 4. 200

call
• When executed, the first parameter isthispoints to, and the subsequent parameters arefnThe parameters during execution
apply
• At execution time, the first parameter isthispoints to , the subsequent parameters are an array composed of parameters duringfnexecution. Each item in the array will correspond to each parameter offn
bind
• When executing, the first parameter is the pointer passed inthisin advance, and the subsequent parameters are the parameters passed in before the actual call tofn, and the return value is a functionfixedThisFn,fixedThisFnwill internally callfnand specify itsthisto point to
for a deeper understanding# How does ##call/apply/bind

change what

thispoints to in the function? Below we simulate and implement these three functions

call/apply/ bind

Source code implementationAccording to the previous introduction, we know that: when a function is called as an object property,this

points to the object that calls the function

const obj = { x: 100, fn () {console.log(this);} }; obj.fn(); // {x: 100, fn: function() {...}} => obj

Using this feature ofJavaScript

, we can use the executed function as the attribute of the first parameter

contextofcall/apply, and then passcontextTo call the function corresponding to this attribute, thethisof the function points to thecontextcall

source code simulation is as follows:

Function.prototype.myOwnCall = function (context, ...args) { const uniqueKey = new Date().getTime(); // this为调用call方法的函数 context[uniqueKey] = this; // 作为对象的方法被对象调用，this指向该对象context const result = context[uniqueKey](...args); delete context[uniqueKey]; return result; };

At this point, some friends may have discovered that what if thecontext

passed in to

call/applyis not an object?First let’s look atmdn

’s description of the first parameter of the

callmethod:Syntax:function.call(thisArg , arg1, arg2, ...)

* thisArg
Optional. The thisvalue used when the
function function is run. Note thatthis may not be the actual value seen by this method: if this function is in non-strict mode,then nullor undefinedis specified It will be automatically replaced to point to the global object, and the original value will be wrappedNext, we process the first parameter of the
myOwnCall

method as follows:

function translateToObject (context) { // 可以通过 == 进行判断 context == null // null == undefined => 2个等号是成立的 // null,undefined => window if (typeof context === 'undefined' || context === null) { context = window; } else if (typeof context === 'number') { // 原始值转换为包装对象 context = new Number(context); } else if (typeof context === 'string') { context = new String(context); } else if (typeof context === 'boolean') { context = new Boolean(context); } return context; }

calls this function in themyOwnCall

method: The implementation of

Function.prototype.myOwnCall = function (context, ...args) { context = translateToObject(context); const uniqueKey = new Date().getTime(); // this为调用call方法的函数 context[uniqueKey] = this; // 作为对象的方法被对象调用，this指向该对象context const result = context[uniqueKey](...args); delete context[uniqueKey]; return result; };

apply

is basically the same as

call, except for the second The parameter is an array:

Function.prototype.myOwnBind = function (context, paramsArray) { context = translateToObject(context); const uniqueKey = new Date().getTime(); // this为调用call方法的函数 context[uniqueKey] = this; // 作为对象的方法被对象调用，this指向该对象context const result = context[uniqueKey](...paramsArray); delete context[uniqueKey]; return result; };

相比于call/apply，bind函数并没有立即执行函数，而是预先传入函数执行时的this和参数，并且返回一个函数，在返回的函数中执行调用bind函数并将预先传入的this和参数传入

bind的源码模拟：

Function.prototype.myOwnBind = function (context, ...outerArgs) { const fn = this; return function (...innerArgs) { return fn.call(context, ...outerArgs, ...innerArgs); }; };

精简版如下：

Function.prototype.myOwnBind = (context, ...outerArgs) => (...innerArgs) => this.call(context, ...outerArgs, ...innerArgs);

这里并没有实现通过 new操作符来执行 fn.bind(context)的操作，如果想知道其详细的实现过程，可以看我的这篇文章: JS进阶-手写bind

在深入理解call/apply/bind的实现原理后，我们尝试完成下面的测试：

function fn1 () {console.log(1);} function fn2 () {console.log(2);} fn1.call(fn2); fn1.call.call(fn2); Function.prototype.call(fn1); Function.prototype.call.call(fn1);

answer:

1. 1 2. 2 3. 什么都不输出 4. 1

这里我们根据call的源码来进行推导一下Function.prototype.call.call(fn1)，其它的执行过程类似：

// 1. 首先会将Function.prototype.call作为一个函数来执行它原型上的call方法 // 所以call方法内部： // this => Function.prototype.call // context => fn1 // 通过对象的属性来执行方法改变this指向 // fn1[uniqueKey] = this(Function.prototype.call) // fn1[uniqueKey]() // 执行 Function.prototype.call方法，但是this是context // 2. 在this为fn1的情况下执行Function.prototype.call方法 // 所以call方法内部： // this => fn1 // context => window // 通过对象的属性来改变this指向 // window[uniqueKey] = fn1 // window[uniqueKey]() // 执行fn1()，但是this是window

更多编程相关知识，请访问：编程入门！！

The above is the detailed content of Where does JavaScript this point to?. For more information, please follow other related articles on the PHP Chinese website!