当前位置：网站首页>The interviewer asked: this point of JS

The interviewer asked: this point of JS

2022-06-28 01:47:00 【InfoQ】

Preface

Hello everyone , I am a
If Chuan
.
In order to help more interested in the source code 、 Want to learn to read the source code 、 Students who improve their front-end technical ability
. I tried my best to organize recently
Source code co reading activity
, Three months have passed , Let's exchange and study together , Common progress , Many people said they had gained a lot .

This is the fourth in the interviewer's question series , Designed to help readers improve
JS
Basic knowledge of , contain
new、call、apply、this、 Inherit
Related knowledge . 
Interviewer asks series
The article is as follows ： Interested readers can click to read . 1.
Interviewer asked ： Can we simulate it JS Of new The operator
 2.
Interviewer asked ： Can we simulate it JS Of bind Method
 3.
Interviewer asked ： Can we simulate it JS Of call and apply Method
 4.
Interviewer asked ：JS Of this Point to
 5.
Interviewer asked ：JS Inheritance

The interviewer asked a lot of questions , Basically, we will change the way of investigation

this

Point to , Look at the candidates

JS

Whether the basic knowledge is solid or not . Readers can pull to the bottom to see the summary , Google again （ Or technology platforms ） Search for several similar articles , Look at the difference between the author's article and others （ Welcome to comment on the differences in the comments area ）, By contrast , Verify whether there are blind spots with your existing knowledge , Read more , Nature will improve its knowledge .

Attach a paragraph from a previous article ： There has been a lot about
this
The article , Why should I write it again . Learning is like a mountain , People climb mountains along different roads , Share the scenery you see . You don't have to be able to see what others see , Feel the feelings of others . Only go climbing by yourself , To see different landscapes , Experience is more profound .

Functional

this

Bound at call time , It all depends on where the function is called （ That is, the calling method of the function ）. To find out

this

What is the direction of , You must know how related functions are called .

Global context

In non strict mode and strict mode this All point to the top-level object （ Browser is

window

）.

this === window // true
'use strict'
this === window;
this.name = ' If Chuan ';
console.log(this.name); //  If Chuan

Function context

Normal function call mode

//  Nonstrict mode 
var name = 'window';
var doSth = function(){
 console.log(this.name);
}
doSth(); // 'window'

You may mistakenly think

window.doSth()

It's called , So it points to

window

. Although in this case

window.doSth

Exactly equal to

doSth

name

be equal to

window.name

. In the above code, this is because in

ES5

in , Global variables are objects attached to the top level （ Browser is

window

） in . in fact , Not so .

//  Nonstrict mode 
let name2 = 'window2';
let doSth2 = function(){
 console.log(this === window);
 console.log(this.name2);
}
doSth2() // true, undefined

In this case

let

Not in the top-level object （ Browser is window） Add attribute ,

window.name2 and window.doSth

All are

undefined

In strict mode , In ordinary functions

this

The performance is different , Manifested as

undefined

//  Strict mode 
'use strict'
var name = 'window';
var doSth = function(){
 console.log(typeof this === 'undefined');
 console.log(this.name);
}
doSth(); // true,//  Report errors , because this yes undefined

Have seen 《 You don't know

JavaScript

》 Readers of the first volume , You should know that this is called default binding in the book . Yes

call

apply

Familiar readers will draw analogies to ：

doSth.call(undefined);
doSth.apply(undefined);

The effect is the same ,

call

apply

One of its functions is to modify

this

Point to... As the first parameter . The first parameter is

undefined

perhaps

null

, Non strict mode , It's pointing

window

. In strict mode , Is to point to the first parameter . It will be explained in detail later . There is often such code （ Callback function ）, In fact, it is also an ordinary function call mode .

var name = ' If Chuan ';
setTimeout(function(){
 console.log(this.name);
}, 0);
//  grammar 
setTimeout(fn | code, 0, arg1, arg2, ...)
//  It can also be a string of code . You can also pass other functions 
//  analogy  setTimeout Function internal call fn Or execute the code `code`.
fn.call(undefined, arg1, arg2, ...);

Function in object （ Method ） Call mode

var name = 'window';
var doSth = function(){
 console.log(this.name);
}
var student = {
 name: ' If Chuan ',
 doSth: doSth,
 other: {
 name: 'other',
 doSth: doSth,
 }
}
student.doSth(); // ' If Chuan '
student.other.doSth(); // 'other'
//  use call The analogy is ：
student.doSth.call(student);
//  use call The analogy is ：
student.other.doSth.call(student.other);

But there are often the following scenes , Assign the function in the object to a variable . This actually becomes an ordinary function again , So the rules for using ordinary functions （ The default binding ）.

var studentDoSth = student.doSth;
studentDoSth(); // 'window'
//  use call The analogy is ：
studentDoSth.call(undefined);

`call、apply、bind`

Call mode

Mentioned above

call

、

apply

, Here is a detailed interpretation of . Through the first

MDN

Understanding

call

and

apply

MDN file ：Function.prototype.call()

grammar

fun.call(thisArg, arg1, arg2, ...)

thisArg

stay

fun

Specified by function runtime

this

value . It should be noted that , designated

this

The value is not necessarily true when the function is executed

this

value , If this function is in

Nonstrict mode

Next , Is specified as

null

and

undefined

this

The value will automatically point to the global object ( In the browser

window

object ), The value is the original value ( Numbers , character string , Boolean value ) Of

this

An auto-wrapper object that points to the original value .

arg1, arg2, ...

List of specified parameters

Return value

The return value is the return value of the method you call , If the method does not return a value , Then return to

undefined

.

apply

and

call

similar . Just the parameters are different . Its parameters are arrays （ Or class array ）.

According to the parameters

thisArg

Description of , You can know ,

call

Is to change... In a function

this

Pointing to

thisArg

, And execute this function , This also makes

JS

A lot of flexibility . In strict mode ,

thisArg

Is the original value, is the value type , That is, the original value . Will not be wrapped as an object . for instance ：

var doSth = function(name){
 console.log(this);
 console.log(name);
}
doSth.call(2, ' If Chuan '); // Number{2}, ' If Chuan '
var doSth2 = function(name){
 'use strict';
 console.log(this);
 console.log(name);
}
doSth2.call(2, ' If Chuan '); // 2, ' If Chuan '

Although it is not common to put

thisArg

The parameter is written as a value type . But you still need to know this knowledge . I wrote an article before ：

Interviewer asked ： Can we simulate it

JS

call

and

apply

Method

Is to use the function on the object

this

Point to this object , To simulate the implementation

call

and

apply

Of . Interested readers think about how to achieve , Let's take a look at the author's implementation .

bind

and

call

and

apply

similar , The first parameter is also modified

this

Point to , It's just that the return value is a new function , The new function can also be used as a constructor （

new

） call .

MDN Function.prototype.bind

bind()
Method creates a new function , When this new function is called
this
The key value is the value provided , The first several values of its parameter list are the parameter sequence specified at creation . 
grammar ：
fun.bind(thisArg[, arg1[, arg2[, ...]]]) 
Parameters ：
thisArg
Call the binding function as this The value passed by the parameter to the objective function . If you use
new
Operator to construct binding functions , The value is ignored . When using
bind
stay
setTimeout
Create a function in the （ Provided as a callback ） when , As
thisArg
Any raw value passed will be converted to
object
. If no binding parameters are provided , Execute the of the scope
this
Considered a new function
thisArg
.
arg1, arg2, ...
When the binding function is called , These parameters are passed to the bound method before the arguments .
Return value
Returns the specified by
this
Value and initialization parameter modification of the original function copy .

I wrote an article before ：

Interviewer asked ： Can we simulate it

JS

bind

Method

Is the use

call

and

apply

Point to this

thisArg

Parameters , To simulate the implementation

bind

Of . Interested readers think about how to achieve , Let's take a look at the author's implementation .

Constructor call mode

function Student(name){
 this.name = name;
 console.log(this); // {name: ' If Chuan '}
 //  Equivalent to returning 
 // return this;
}
var result = new Student(' If Chuan ');

Use

new

Operator calls function , The following steps are automatically performed .

A new object is created .
This object will be executed
[[Prototype]]
（ That is to say
__proto__
） link .
The generated new object is bound to the function call
this
.
adopt
new
Each object created will eventually be
[[Prototype]]
Linked to this function
prototype
On the object .
If the function does not return an object type
Object
( contain
Functoin
,
Array
,
Date
,
RegExg
,
Error
), that
new
The function call in the expression automatically returns the new object .

So we can know ：

new

When the operator is called ,

this

Point to the generated new object .

A special reminder ,

new

Return value on call , If there is no explicit return object or function , Is to return the generated new object

function Student(name){
 this.name = name;
 // return function f(){};
 // return {};
}
var result = new Student(' If Chuan ');
console.log(result); {name: ' If Chuan '}
//  If the return function f, be result Is the function f, If it's an object {}, be result It's the object {}

Many people or articles ignore this point , Directly and simply use

typeof

Judge the object . Although the actual use will not show the return , But the interviewer will ask .

I also wrote an article before

Interviewer asked ： Can we simulate it

JS

new

The operator

, It's using apply Come and take this Point to the newly generated object . Interested readers think about how to achieve , Let's take a look at the author's implementation .

The call pattern in the prototype chain

function Student(name){
 this.name = name;
}
var s1 = new Student(' If Chuan ');
Student.prototype.doSth = function(){
 console.log(this.name);
}
s1.doSth(); // ' If Chuan '

You'll find this deja vu . This is the method invocation pattern on the object . Nature is pointing to the generated new object . If the object inherits from other objects . It will also find through the prototype chain . The above code USES

ES6

class

The rule of writing is ：

class Student{
 constructor(name){
 this.name = name;
 }
 doSth(){
 console.log(this.name);
 }
}
let s1 = new Student(' If Chuan ');
s1.doSth();

babel

es6

convert to

es5

Result , You can go to

babeljs Website conversion test

Try it yourself .

'use strict';

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (&quot;value&quot; in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(&quot;Cannot call a class as a function&quot;); } }

var Student = function () {
 function Student(name) {
 _classCallCheck(this, Student);

 this.name = name;
 }

 _createClass(Student, [{
 key: 'doSth',
 value: function doSth() {
 console.log(this.name);
 }
 }]);

 return Student;
}();

var s1 = new Student(' If Chuan ');
s1.doSth();

From that ,

ES6

class

It is also implemented through constructor simulation , It's a kind of grammar sugar .

Arrow function call mode

Let's first look at the important difference between arrow function and ordinary function ：

1、 There is no one's own
this
、
super
、
arguments
and
new.target
binding .2、 Out of commission
new
To call .3、 There is no prototype object .4、 Can't change
this
The binding of .5、 The formal parameter name cannot be duplicate .

Not in arrow function

this

binding , Its value must be determined by looking up the scope chain . If the arrow function is contained by a non arrow function , be

this

Binding is the latest non arrow function

this

, otherwise

this

The value of is set to the global object . such as ：

var name = 'window';
var student = {
 name: ' If Chuan ',
 doSth: function(){
 // var self = this;
 var arrowDoSth = () => {
 // console.log(self.name);
 console.log(this.name);
 }
 arrowDoSth();
 },
 arrowDoSth2: () => {
 console.log(this.name);
 }
}
student.doSth(); // ' If Chuan '
student.arrowDoSth2(); // 'window'

In fact, it is equivalent to... Outside the arrow function

this

Is the of the ordinary function on the upper layer of the cached arrow function

this

. If there is no ordinary function , Is the global object （ In the browser is

window

）. That is to say, it can't pass

call

、

apply

、

bind

Bound arrow function

this

( It doesn't have

this

). and

call

、

apply

、

bind

You can bind the cache arrow function to the upper layer of the ordinary function

this

. such as ：

var student = {
 name: ' If Chuan ',
 doSth: function(){
 console.log(this.name);
 return () => {
 console.log('arrowFn:', this.name);
 }
 }
}
var person = {
 name: 'person',
}
student.doSth().call(person); // ' If Chuan ' 'arrowFn:' ' If Chuan '
student.doSth.call(person)(); // 'person' 'arrowFn:' 'person'

`DOM`

Event handler function call

addEventerListener、attachEvent、onclick

<button class=&quot;button&quot;>onclick</button>
<ul class=&quot;list&quot;>
 <li>1</li>
 <li>2</li>
 <li>3</li>
</ul>
<script>
 var button = document.querySelector('button');
 button.onclick = function(ev){
 console.log(this);
 console.log(this === ev.currentTarget); // true
 }
 var list = document.querySelector('.list');
 list.addEventListener('click', function(ev){
 console.log(this === list); // true
 console.log(this === ev.currentTarget); // true
 console.log(this);
 console.log(ev.target);
 }, false);
</script>

onclick

and

addEventerListener

Is the element that points to the binding event . Some browsers , such as

IE6~IE8

Next use

attachEvent

this

The point is

window

. By the way ： Interviewers also often examine

ev.currentTarget

and

ev.target

The difference between .

ev.currentTarget

Is the element that binds the event , and

ev.target

Is the element that currently triggers the event . For example, the difference here is

ul

and

li

. But it's also possible to click

ul

, At this time

ev.currentTarget

and

ev.target

It's equal .

Inline event handler function call

<button class=&quot;btn1&quot; onclick=&quot;console.log(this === document.querySelector('.btn1'))&quot;> Point me </button>
<button onclick=&quot;console.log((function(){return this})());&quot;> Order me again </button>

The first is

button

In itself , So it is

true

, The second is

window

. This has nothing to do with strict patterns . Of course, we won't use it like this now , But sometimes it's written like this , You also need to understand .

Actually

this

There are many usage scenarios , Example object

object

Medium

getter

、

setter

this

new Function()

、

eval

. But master the above , To analyze other , It will be solved naturally . Use more or ordinary function calls 、 Object's function call 、

new

call 、

call、apply、bind

call 、 Arrow function call . So what are their priorities .

priority

And the arrow function

this

Is the upper level of ordinary functions

this

Or global objects （ Browser is

window

）, So exclude , Not a priority .

var name = 'window';
var person = {
 name: 'person',
}
var doSth = function(){
 console.log(this.name);
 return function(){
 console.log('return:', this.name);
 }
}
var Student = {
 name: ' If Chuan ',
 doSth: doSth,
}
//  Ordinary function call 
doSth(); // window
//  Function calls on objects 
Student.doSth(); // ' If Chuan '
// call、apply  call 
Student.doSth.call(person); // 'person'
new Student.doSth.call(person);

Just imagine , If it is

Student.doSth.call(person)

In case of execution first , that

new

Execute a function . There is no problem . But in fact , This code is wrong .

Operator priority

yes

new

Lower than the dot , So it's execution

new (Student.doSth.call)(person)

and

Function.prototype.call

, Although it's a function （

apply

、

bind

Is also a function ）, Like the arrow function , Out-of-service

new

call . That's why I made a mistake .

Uncaught TypeError: Student.doSth.call is not a constructor

This is because there are two different methods inside the function ：

[[Call]]

and

[[Constructor]]

. When using ordinary function calls ,

[[Call]]

Will be performed . When called using a constructor ,

[[Constructor]]

Will be performed .

call

、

apply

、

bind

And the arrow function has no

[[Constructor]]

Method .

As can be seen from the above example, ordinary function calls have the lowest priority , The second is the function on the object .

call（apply、bind）

Call mode and

new

Priority of calling method , stay 《 You don't know JavaScript》 It's the contrast

bind

and

new

, Refer to the

mdn

bind

ployfill

Realization ,

new

Invocation time bind The function after that , Will ignore

bind

The first parameter of the binding ,(

mdn

In fact, there are still some problems in the implementation of , Interested readers , You can read my previous article ：

Interviewer asked ： Can we simulate it

JS

bind

Method

), explain

new

The highest priority of the call is . So their priority is

new

call >

call、apply、bind

call > Function calls on objects > Ordinary function call .

summary

If you want to judge the

this

binding , You need to find the direct call location of this function . Once found, you can apply the following four rules in order to judge

this

Binding object of .

new
call ： Bind to the newly created object , Be careful ： Show
return
Function or object , The return value is not a newly created object , It's an explicit return function or object .

call
perhaps
apply
（ perhaps
bind
） call ： In strict mode , Bind to the first parameter specified . Non strict mode ,
null
and
undefined
, Point to global object （ Browser is
window
）, The rest of the values point to
new Object()
Wrapped object .

Function calls on objects ： Bind to that object .

Ordinary function call ： To bind in strict mode
undefined
, Otherwise, bind to the global object .

ES6

Arrow function in ： The four standard binding rules above will not be used , It depends on the current lexical scope

this

, say concretely , The arrow function inherits the outer function , Called this binding （ No matter what this Binding to what ）, No outer functions , Is bound to the global object （ Browser is

window

）. This is actually the same as

ES6

In the previous code

self = this

The mechanism is the same .

DOM

Event function ： Generally, it points to the binding event

DOM

Elements , But in some cases, bind to global objects （ such as

IE6~IE8

attachEvent

）.

Be sure to pay attention to , Some calls may inadvertently use normal function binding rules . If you want to “ More secure ” To ignore

this

binding , You can use an object , such as

ø = Object.create(null)

, To protect global objects .

The interviewer examines

this

You can investigate

new、call、apply、bind

, Arrow function, etc . So as to extend the scope 、 Closure 、 Prototype chain 、 Inherit 、 Strict mode, etc . That's why interviewers enjoy it .

The reader finds something wrong or can be improved , Welcome to point out . In addition, I think it's well written , You can like it , It is also a kind of support for the author .

Examination questions

this

Pointing questions are often combined with some operators . Look at the end of this article , You might as well pass the following two interview questions .

Little sea ： An often despised front end JS Interview questions

From these two sets of questions , Reunderstanding JS Of this、 Scope 、 Closure 、 object