JavaScript Interview

Difficult Questions And

Code Implementation

@DimpleKumari
Forming a network of fantastic coders.
1.this keyword points to
this the keyword points to an object in the current execution context. Within a
function, this keywords usually point to the caller of the function.

Question: What does the following code output? Why?

@DimpleKumari
Forming a network of fantastic coders.
1.this keyword points to
Answer: undefined
Analysis: Because the internal function of the getName function is executed in
the global scope, this here points to window/global, and window/global does not
have a name attribute, so undefined is returned.
If you want the this of the internal function to also point to obj, you can use
the arrow function or bind to bind this:

@DimpleKumari
Forming a network of fantastic coders.
2. Implementation and application of closure
Question: Implement a counter factory function:

@DimpleKumari
Forming a network of fantastic coders.
2. Implementation and application of closure

Analysis:
The reason why different counters can be incremented
independently is because the characteristics of closure are
used. The createCounter function creates a closure that can
access the variable count in its outer scope. counter1 and
counter2 refer to different closure function instances,
thereby achieving counting independence.

@DimpleKumari
Forming a network of fantastic coders.
3. Event loop mechanism

Question: Give an explanatory note on the event loop mechanism.

Synchronous tasks are executed on the main thread, forming an
execution context stack.
Once all synchronous tasks in the execution stack have been
executed, the system will read the asynchronous tasks in the queue,
such as Promise.then(), setTimeout, AJAX callbacks, etc.
The asynchronous task will be added to the task queue
Once the execution stack is cleared, the system checks the task
queue. If it is not empty, the first task is taken out and placed on
the execution stack for execution.
The main thread repeats the process of alternating execution of the
stack and queue, thereby realizing queued execution of threads.

@DimpleKumari
Forming a network of fantastic coders.
4. Promise object
Problem: Implement a simple version of Promise:

The Promise object is an asynchronous programming solution for handling

asynchronous events. Promise objects can represent the status of an
asynchronous operation, including:

pending
fulfilled
rejected

@DimpleKumari
Forming a network of fantastic coders.
Analysis:

The MyPromise class is a custom Promise class whose constructor accepts an executor
function as a parameter.
The executor function in the constructor will be executed immediately and accepts two
parameters, resolve and reject, which are used to modify the state of the Promise.
The resolve method is used to modify the Promise's status from "pending" to "fulfilled" and
pass the value to subsequent handlers.
The reject method is used to modify the Promise's status from "pending" to "rejected" and
pass the reason to the subsequent handler.
The then method is used to register a callback function to be executed when the Promise is
completed or rejected. It accepts two parameters: onFulfilled and onRejected, which are
called when the Promise is completed or rejected respectively.
The then method returns a new MyPromise instance to support chained calls. If onFulfilled or
onRejected returns a value, it will be used as the resolved value for the next MyPromise
instance.
The catch method is the shorthand form of then(null, onRejected).
The isFulfilled method is used to check whether the Promise is in the fulfilled state.
The isRejected method is used to check whether the Promise is in the rejected state.
5.Class inheritance implementation
The prototype chain is a property of every object that points to the
prototype object of the object's constructor. The prototype object of
a constructor points to the prototype object of another constructor,
and so on.

Question: To implement a People class, objects can be

instantiated through constructors or new operators. At the same
time, it has a method that inherits the Person class. The Person
class has a sayHi method:

@DimpleKumari
Forming a network of fantastic coders.
5.Class inheritance implementation

Analysis:
The super inheritance
attribute is called through
the constructor, and the
prototype chain implements
method inheritance.

@DimpleKumari
Forming a network of fantastic coders.
6. MVC and MVVM patterns
Question: Briefly describe the concepts and differences
between MVC and MVVM?

In MVC pattern:
Model is responsible for managing data logic
View is responsible for displaying the interface
Controller connects Model and View and transfers data

In MVVM mode:
Model is responsible for managing data logic
View is responsible for displaying the interface
ViewModel serves as the interactive agent between View and Model,
synchronizing the model to the view and synchronizing the view changes
back to the model.

@DimpleKumari
Forming a network of fantastic coders.
7. Ajax implementation
Question: Implement an ajax request function:

@DimpleKumari
Forming a network of fantastic coders.
7. Ajax implementation

@DimpleKumari
Forming a network of fantastic coders.
 7. Ajax implementation
Implement an ajax request function that supports Promise:

1. Send a request using the XMLHttpRequest object

2. Initialize the open method, configure the request method and url
3. Add onload and onerror callback functions
4. onload determines whether the status code is within the range of 200–300
resolve, otherwise reject
5. onerror directly reject
6. After the request is successful, resolve returns response, and after failure,
reject reports an error.
7. Support options to configure request parameters and request body
8. Returns a Promise object, which can be processed externally using
then/catch

Analysis: Promise is used to encapsulate asynchronous ajax requests and

achieve a synchronous programming style.

@DimpleKumari
Forming a network of fantastic coders.
Dimple Kumari
Forming a network of fantastic coders.