Sorting out interview knowledge points in js

Write link content here1. What data types does JavaScript’s typeof return? First of all, JavaScript data types are divided into two categories: primitive types and reference types. I hope it can help everyone.

Primitive types: null, undefined, number, string, Boolean
Reference types: Object, symbol (ES6)
(As for the difference between primitive types and reference types, you can see one of my blog posts :Js basic syntax, variables, data types)
Then, the typeof operator can determine all primitive types. typeof returns seven possible values: "number", "string", "boolean", "object", "symbol", "function", and "undefined".

2. Please write the following operation results

alert(typeof null); //object 
alert(typeof undefined);//undefined 
alert(typeof NaN);//number 
alert(NaN == undefined);//false 
alert(NaN == NaN);//false 
var str = “123abc”; 
alert(typeof str++); 
alert(str);//string

3. Why is there an instanceof operator?

typeof is a unary operation, placed before an operand, and the operand can be of any type. A problem arises when using a reference type to store a value when using the typeof operator, which returns "object" regardless of the type of object being referenced. For special objects such as Array and Null, using typeof will always return object. This is the limitation of typeof.

instanceof is used to determine whether a variable is an instance of an object,

such as: <br/> var a=new Array(); <br/> alert(a instanceof Array); will return true, <br/> at the same time, <br/> alert(a instanceof Object) will also return true;

Another example: <br/> function test(){}; <br/> var a=new test(); <br/> alert(a instanceof test); will return true

In addition, the more important point is that instanceof can be used in an inheritance relationship to determine whether an instance belongs to its parent type. For example:

function Aoo(){} 
function Foo(){} 
Foo.prototype = new Aoo();//JavaScript 原型继承var foo = new Foo(); 
console.log(foo instanceof Foo)//true console.log(foo instanceof Aoo)//true

The above code determines the parent class in a one-level inheritance relationship. In a multi-level inheritance relationship, the instanceof operator is also applicable.

console.log(Object instanceof Object);//true console.log(Function instanceof Function);//true console.log(Number instanceof Number);//false console.log(String instanceof String);//false console.log(Function instanceof Object);//true console.log(Foo instanceof Function);//true console.log(Foo instanceof Foo);//false

Are you confused again after reading the above code? Why are Object and Function instanceof themselves equal to true, but instanceof themselves of other classes are not equal to true? How to explain? To fundamentally understand the mystery of instanceof, you need to start from two aspects: <br/>1. How is this operator defined in the language specification. <br/>2, JavaScript prototypal inheritance mechanism. <br/>JavaScript instanceof operator code:

function instance_of(L, R) {//L 表示左表达式，R 表示右表达式
 var O = R.prototype;// 取 R 的显示原型
 L = L.__proto__;// 取 L 的隐式原型
 while (true) { 
   if (L === null) 
     return false; 
   if (O === L)// 这里重点：当 O 严格等于 L 时，返回 true 
     return true; 
   L = L.__proto__; 
 } 
}

As for the complex usage of instanceof, you can refer to the following link: <br/>JavaScript instanceof operator in-depth analysis

3. Examples at least 3 types of forced type conversion and 2 types of implicit type conversion?

You can refer to my blog post: JS data type conversion

1. Forced type conversion: Explicit call Built-in function to force conversion of one type of value to another type. Forced type conversions mainly include: Boolean, Number, String, parseInt, parseFloat

2. Implicit type conversion: When using arithmetic operators, the data types on both sides of the operator can be arbitrary. For example, a string can be added to a number. The reason why operations can be performed between different data types is because the JavaScript engine will quietly perform implicit type conversions before performing operations. Implicit type conversions mainly include: +, –, ==,!

5. What are the event flow models of JavaScript?

Event flow describes the order in which events are received from the page. The DOM structure is a tree structure. When an element in the page triggers an event, the event will start from the top-level window object and propagate downward to the target element. The ancestor nodes in the path will trigger the corresponding event. If the current If the event of the node is bound to an event handling function, the function will be executed. When the event reaches the target element and the binding function is executed (if there is a binding), the event will be propagated upward to the window element, and the ancestor nodes of the path will Trigger the corresponding event

The event flow contains three stages:

Event capture stage<br/> In the target stage

<br/>

Event bubbling stage<br/>

Event capture stage: The event starts to be triggered by the top-level object, and then propagates downwards step by step until the target element; <br/>In the target stage: on the element bound to the event; <br/>Event bubbling stage: the event is first received by the specific element, and then propagated upwards step by step until the unspecific element;

Six ,What are the BOM objects? List the window objects?

1. The window object is the top-level object of JS, and other BOM objects are attributes of the window object;

2. Document object, document object;

3. Location object, browser current URL information;

4. Navigator object, browser itself information;

5. Screen object, client screen information;

6. History object, browser access history information;

7. Please briefly describe AJAX and its basic steps?

Refer to my blog post: Ajax

Reference answer:

Brief description AJAX: AJAX stands for "Asynchronous Javascript And XML" (asynchronous JavaScript and XML), which refers to a web development technology for creating interactive web applications. AJAX enables web pages to update asynchronously by exchanging small amounts of data with the server in the background. This means that parts of a web page can be updated without reloading the entire page.

AJAX basic steps:

Initialize ajax object<br/>Connection address, prepare data<br/>Send request<br/>Receive data (receiving, not yet completed) <br/>Receive data completed <br/>//Initialize the ajax object <br/>var xhr = new XMLHttpRequest(); <br/>//Connect the address and prepare the data <br/>xhr.open("method", "address", whether it is asynchronous); <br/>//Events triggered by completion of receiving data<br/>xhr.onload =function(){} <br/>//Sending data<br/>xhr.send();

8. HTTP What do the status messages 200 302 304 403 404 500 mean?

200: The request has been successful, and the response header or data body expected by the request will be returned with this response. <br/>302: The requested resource temporarily responded to the request from a different URI. Because such redirects are temporary, the client should continue to send future requests to the original address. This response is cacheable only if specified in the Cache-Control or Expires. <br/>304: If the client sends a conditional GET request and the request is allowed, but the content of the document (since the last access or according to the conditions of the request) has not changed, the server should return this status code . A 304 response MUST NOT contain a message body and therefore always ends with the first empty line after the message header. <br/>403: The server understood the request, but refused to execute it. <br/>404: The request failed. The resource requested was not found on the server. <br/>500: The server encountered an unexpected condition that prevented it from completing processing of the request. Generally speaking, this problem will occur when there is an error in the server-side source code.

9. What is the difference between synchronization and asynchronousness?

First of all, synchronization and asynchronous have nothing to do with blocking and non-blocking. Synchronization and asynchronous mainly focus on how to process things after they are done, or focus on a message communication mechanism.

Synchronization and asynchronousness can be said to be for the requested party, and what method the requested party uses to inform the processing results.

In the case of synchronization, the message handler waits for the message to be triggered; <br/>In the case of asynchronous, the trigger mechanism notifies the message handler;

Blocking is not Blocking is mainly for the requester. <br/>Blocking: Make a request and wait for the result to be returned, and then process subsequent things; <br/>Non-blocking: Make a request without waiting for the result to be returned, and you can continue to do subsequent things;

10. GET What is the difference between POST and POST? When to use POST?

GET: Generally used to query data, using URL to pass parameters. Since the browser has restrictions on the length of the address bar, there is a limit on the amount of information sent using the get method, and the browser will record it. Information about the requested address, including the data behind the address, will be retained in (history, cache). get can only send data in plain format (URL-encoded format).

POST: Generally used to send data to the server. There is theoretically no limit on the size of the data sent. The browser will cache the record address, but will not record the data submitted by post. post can send strings in plain text, URL-encoded format, and binary format in various forms.

In the following situations, please use POST requests:

Requests for submission (similar to semantics, get means request, post means submission); <br/>Send private data ( User name, password) (because of browser cache recording characteristics); <br/>Sending a large amount of data to the server (difference in data size limit); <br/>When uploading files and images (difference in data type);

11. Limitations of AJAX?

1. AJAX does not support the browser back button. <br/>2. Security issues AJAX exposes the details of interaction with the server. <br/>3. The support for search engines is relatively weak. It will not execute your JS script, but will only operate your web page source code; <br/>4. There are certain restrictions on cross-domain requests. Solution: jsonp;

12. What exactly does the new operator do?

1. Create a new object; <br/>2. Put the function in The context (scope) object this points to the object; <br/>3. Execute the code and add attributes or methods to the new object through this; <br/>4. Return the object;

Thirteen. null What is the difference between undefined and undefined?

null: null means a null value, which is 0 when converted to a numerical value;

undefined: undefined means "missing value", that is, there should be a value here, but it has not been defined yet .

When a variable is declared but not assigned a value, it is equal to undefined. <br/>The object has no assigned properties, and the value of this property is undefined. <br/>When the function does not return a value, it returns undefined by default.

See my blog post for details: JS determines the difference between data type, null and undefined?

14. JavaScript prototype, prototype chain? What are its characteristics? Scope chain?

作用域链的理解： <br/> 当执行一段JavaScript代码（全局代码或函数）时，JavaScript引擎会创建为其创建一个作用域又称为执行上下文（Execution Context），在页面加载后会首先创建一个全局的作用域，然后每执行一个函数，会建立一个对应的作用域，从而形成了一条作用域链。每个作用域都有一条对应的作用域链，链头是全局作用域，链尾是当前函数作用域。 <br/> 作用域链的作用是用于解析标识符，当函数被创建时（不是执行），会将this、arguments、命名参数和该函数中的所有局部变量添加到该当前作用域中，当JavaScript需要查找变量X的时候（这个过程称为变量解析），它首先会从作用域链中的链尾也就是当前作用域进行查找是否有X属性，如果没有找到就顺着作用域链继续查找，直到查找到链头，也就是全局作用域链，仍未找到该变量的话，就认为这段代码的作用域链上不存在x变量，并抛出一个引用错误（ReferenceError）的异常。

JavaScript 原型： 每创建一个函数，函数上都有一个属性为 prototype，它的值是一个对象。 这个对象的作用在于当使用函数创建实例的时候，那么这些实例都会共享原型上的属性和方法。

原型链： 在 JavaScript 中，每个对象都有一个指向它的原型（prototype）对象的内部链接（proto）。这个原型对象又有自己的原型，直到某个对象的原型为 null 为止（也就是不再有原型指向）。这种一级一级的链结构就称为原型链（prototype chain）。 当查找一个对象的属性时，JavaScript 会向上遍历原型链，直到找到给定名称的属性为止;到查找到达原型链的顶部（Object.prototype），仍然没有找到指定的属性，就会返回 undefined。

十五、JavaScript代理 <br/>当我们需要对很多元素添加事件的时候，可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。

比如我们需要向一个ul中动态添加很多个li，需要遍历li逐个添加点击事件

<ul id=&#39;list&#39;></ul> var count = 100; var ulList = document.getElementById("list"); //动态构建节点
 for(var i = count;i--;){  var liDom = document.createElement(&#39;li&#39;);
  ulList.appendChild(liDom);
 } //绑定点击事件
 var liNode = ulList.getElementByTagName("li"); for(var i=0, l = liNodes.length; i < l; i++){
  liNode[i].onClick = function(){
   //li点击事件
  }
 }

众所周知，DOM操作是十分消耗性能的。所以重复的事件绑定简直是性能杀手。而事件代理的核心思想，就是通过尽量少的绑定，去监听尽量多的事件。如何做呢？答案是利用事件冒泡机制,对其父节点ul进行事件绑定（Event Bubble),然后通过event.target来判断是哪个节点触发的事件，从而减少很多EventHandler的绑定。

“` 
var count = 100; 
var ulList = document.getElementById(“list”); 
//动态构建节点 
for(var i = count;i–;){ 

 var liDom = document.createElement(‘li’); 

 ulList.appendChild(liDom); 
} 
//绑定点击事件 
var liNode = ulList.getElementByTagName(“li”); 
liNode.onClick = function(e){ 

 if(e.target && e.target.nodeName.toUpperCase == “LI”) { 

  // li点击事件 

 } 
}

十六、如何理解闭包？
闭包

十七、call和apply的作用是什么？区别是什么？
call和apply的功能基本相同，都是实现继承或者转换对象指针的作用；
唯一不通的是前者参数是罗列出来的，后者是存到数组中的；
call或apply功能就是实现继承的；与面向对象的继承extends功能相似；但写法不同；
语法：
.call(对象[,参数1，参数2,….]);//此地参数是指的是对象的参数，非方法的参数；
.apply(对象,参数数组)//参数数组的形式:[参数1，参数2,……]

十八、JavaScript 如何实现继承？

(1)构造继承 (2)原型继承 (3)实例继承 (4)拷贝继承
 //原型prototype机制或apply和call方法去实现较简单，建议使用构造函数与原型混合方式。 function Parent()
 {  
     this.name = ‘song’; } function Child() {
     this.age = 28; } Child.prototype = new Parent(); //通过原型,继承了Parent var demo = new Child(); alert(demo.age); alert(demo.name); //得到被继承的属性

十九、JavaScript 有哪几种创建对象的方式？

To put it simply, creating objects in JavaScript is nothing more than using built-in objects or various custom objects. Of course, you can also use JSON; but there are many ways to write them, and they can also be mixed. //
(1) Object literal method
person={firstname:”Mark”,lastname:”Yun”,age:25,eyecolor:”black”};
(2) Use function to simulate the parameterless constructor function Person(){} var person = new Person();
//Define a function. If you use new "instantiation", the function can be regarded as a Class person.name =
"Xiaosong"; person.age = "23"; person.work = function() {
alert(“Hello ” + person.name); } person.work(); (3) Use function to simulate the parameter constructor (use the this keyword to define the context attribute of the construct) function
Person(name,age,hobby) {
This.name = name; //this scope: current object
This.age = age;
This.work = work;
This.info = function() {
alert(“My name is” + this.name + “This year” + this.age + “Years old” + this.work);
} } var Xiaosong = new Person("WooKong",23,"Programmer"); //Instantiate and create the object Xiaosong.info(); //Call the info() method (4) to create it using the factory method (built-in Object) var jsCreater = new
Object(); jsCreater.name = “Brendan Eich”; //Inventor of JavaScript
jsCreater.work = “JavaScript”; jsCreater.info = function() {
alert("I am the inventor of "+this.work+""+this.name); } jsCreater.info(); (5) Use prototype method to create function Standard(){} Standard.prototype.name =
"ECMAScript"; Standard.prototype.event = function() {
alert(this.name+"is the scripting language standard specification"); } var jiaoben = new Standard(); jiaoben.event(); (6) Use a mixed method to create function iPhone(name, event) {
This.name = name;
This.event = event; } iPhone.prototype.sell = function() {
alert("I am "+this.name+", I am iPhone5s "+this.event+"~ haha!"); } var SE = new iPhone("iPhone SE","Official Refurbished Machine"); SE.sell ();

20. In JavaScript, there is a function that never searches for the prototype when performing object search. Which function is this?

hasOwnProperty // hasOwnProperty in JavaScript
The function method returns a Boolean value indicating whether an object has a property with the specified name. This method cannot check whether the property is in the object's prototype chain; the property must be a member of the object itself.
//
Usage: object.hasOwnProperty(proName) where the parameter object is a required option, an instance of an object. proName is required, a string value of the attribute name.
// If the object has a property with the specified name, then the hasOwnProperty function method in JavaScript returns true, otherwise it returns
false.

21. What is Ajax? How to create an Ajax?

The full name of ajax: Asynchronous Javascript And XML, asynchronous transmission + js + xml.
The so-called asynchronous, a simple explanation here is: when sending a request to the server, we do not have to wait for the result, but can do other things at the same time. When the result is available, it will perform subsequent operations according to the settings. At the same time, the page A full page refresh will not occur, which improves user experience.
(1) Create an XMLHttpRequest object, that is, create an asynchronous calling object
(2) Create a new HTTP request and specify the method, URL and verification information of the HTTP request
(3) Set a function to respond to HTTP request status changes
(4) Get the data returned by the asynchronous call
(5) Use JavaScript and DOM to implement partial refresh

The above is the detailed content of Sorting out interview knowledge points in js. For more information, please follow other related articles on the PHP Chinese website!