原生面试题系列02

柔情只为你懂 2022-09-16 12:25 176阅读 0赞

### 11、原型和原型链 ###

1）、原型：

每个函数都会有一个属性prototype。这个属性就是原型属性。JavaScript在实现面向对象时，会经常使用原型。每个对象（实例）的有一个属性（ \_\_ proto \_\_）指向构造函数的prototype属性（prototype指向的内存区域）。prototype属性里保存着所有对象（实例）共享的属性和方法。

2）、原型链：当访问一个对象的某个属性时，会先在这个对象本身属性上查找，如果没有找到，则会去它的 \_\_ proto \_\_ 隐式原型上查找，即它的构造函数的prototype，如果还没有找到就会再在构造函数的prototype的 \_\_ proto \_\_中查找，这样一层一层向上查找就会形成一个链式结构，我们称为原型链。

### 12、作用域和作用域链 ###

[原生js面试题：作用域和作用域链，let声明的全局变量不是window对象的属性\_jiang7701037的博客-CSDN博客\_let不影响作用域链][js_let_window_jiang7701037_-CSDN_let]

作用域，就是变量起作用的区域（范围）。或者说，js代码执行时，查找变量的范围。

作用域链是指：当js编译器在寻找变量时，先在最近的作用域（花括号）里找，如果找不到，则朝上一级作用域（花括号）里找，依次类推，直到找到或者找不到为止。这就是作用域链。

### 13、Ajax的步骤与封装 AJAX中的200和4分别是什么意思 ###

**1）、AJAX的步骤：**

ajax的流程，readyState和status的意思
    
    1、创建XMLHttpRequest
    
        let xhr = new XMLHttpRequest() 
    
    2、设置（请求方式，请求路径，请求参数）
    
        xhr.open("get", "regSave.php?username=jzm&userpass=123", true) 
    
    3、设置回调函数（后端有响应时，调用的回调函数） 
    
        xhr.onreadystatechange = function() {
    
            if (xhr.readyState == 4 && xhr.status == 200) {
                  xhr.responseText //后端响应的内容，如：php中的echo 后面跟的内容
            }
        } 
    
    4、发送
        xhr.send(); 
    
    //readyState:请求响应的状态（请求响应进行到哪一步了）
    
    //status:响应结果的描述，是个状态码（数字）

**2）、封装ajax的代码：**

3）、200和4分别是什么意思

**readyState属性：**表示ajax从请求到响应过程中的状态，即：请求响应过程中进行到了哪一步？readyState的取值是0 ---- 4。

0：表示刚创建好对象XMLHttpRequest

1：open函数调用完毕后，

2：表示后端接收到了响应

3：表示后端正在处理

4：表示后端处理完毕（即：请求响应的过程结束了）

readyState==4：表示请求响应的过程完毕

**status属性：** 这是表示http的响应状态码。200表示执行成功。关于其它HTTP状态码，可以查看文章：

[HTTP请求响应系列02\_响应报文的详解\_jiang7701037的博客-CSDN博客][HTTP_02_jiang7701037_-CSDN]

### 14、深浅拷贝 区别以及如何进行深拷贝 ###

[面试题：深拷贝和浅拷贝(超级详细，有内存图)\_jiang7701037的博客-CSDN博客\_深拷贝和浅拷贝][jiang7701037_-CSDN]

**场景：**

说深拷贝和浅拷贝，特指引用类型。

**区别：**

深拷贝： 把引用类型的地址及其它的数据都拷贝一份

浅拷贝： 只拷贝了引用类型的地址

**如何进行深拷贝：**

深拷贝的思路：

创建空对象，循环原对象的每个键，一一 赋值给空对象，并使用递归的方式，把对象属性也进行复制，以下为示例代码：

// 功能：封装一个深拷贝的函数
    // 参数：被拷贝的对象
    // 返回值：拷贝的对象
    
    function copyObj(obj){
        let newObj ={};
        for(let key in obj){        
            if(typeof obj[key] == "object"){ //如果说当前属性是对象的话，那么再做深拷贝
                newObj[key] = copyObj(obj[key]);
            }else{
                newObj[key] = obj[key];
            }
        }
        return newObj;
    }
    
    var obj1= {
        name:"张三疯",
        sex:"男",
        address:{
            province:"陕西",
            city:"西安"
        }
    }
    
    let obj2 = copyObj(obj1);

[面试题：深拷贝和浅拷贝(超级详细，有内存图)\_jiang7701037的博客-CSDN博客\_深拷贝和浅拷贝][jiang7701037_-CSDN]

### 15、promise都有哪几种状态 其执行状态 ###

**概述：**

Promise是异步编程的一种解决方案，从语法上讲，Promise是一个对象，可以获取异步操作的消息

**作用：**

（1）、避免回调地狱的问题

（2）、Promise对象提供了简洁的API，使得控制异步操作更加容易

**Promise有三种状态：**

pendding ：正在进行中，

rejected ：失败，

resolved ： 成功

基础用法：

new Promise(function(resolve,reject)\{

异步代码

\})

### 16、数组去重的方法 ###

**①利用数组indexof方法**

**②ES6的Set**

function unique(arr){
        return [...new Set(arr)]
    }
    
    console.log(unique([1,2,1,2,2,3,2,1]));

数组去重的方法比较多，大家可以自行再思考

### 17、js如何创建数组，js数组都有哪些方法？ ###

**1、有两种创建方式：**

①字面量创建： var arr=\[\]；

②构造函数创建： var arr1=new Array();

**2、js数组的方法：**

push 尾增

pop 尾删

unshift 头增

shift 头删

concat 数组拼接

join 数组转字符串

reverse 逆序

sort 按字符串UniCode码排序

map 对数组的每个元素做某个处理,参数是回调函数，并且有返回值

slice 复制

indexOf 查找数组中的元素，找到返回该元素下标, 没找到返回-1

splice 截取

filter 过滤

every 对数组中的每一项进行判断，若都符合则返回true，否则返回false

some 对数组中的每一项进行判断，若都不符合则返回false，否则返回true

reduce:将数组所有数值进行叠加返回

forEach 对数组的每个元素做某个处理,参数是回调函数

### 18、同一个数组，同样的限制条件，map和filter find返回值有什么区别 ###

相同点：都不会改变原数组

不同点：

map返回值是一个新的数组，新数组中的元素为原始数组中的元素调用函数处理后的值。

find返回值：方法返回数组中满足提供的测试函数的第一个元素的值，否则返回 undefined。返回值不是数组!

const array1 = [5, 12, 8, 130, 44];
    
    const found = array1.find(element => element > 10);
    
    console.log(found);//12

filter返回值：返回一个新数组 是原数组中符合条件的所有元素。

### 19、延时器（宏任务微任务） ###

[javascript的事件循环(event loop)\_jiang7701037的博客-CSDN博客][javascript_event loop_jiang7701037_-CSDN]

**1）、宏任务（macrotask ）**

宏任务一般包括： setTimeout，setInterval，I/O 操作（包括AJAX请求）。

**2）、微任务（microtask ）**

微任务一般包括：promise.then() 里的操作

### 20、闭包 什么情况下会使用闭包 ###

**概念：**定义在一个函数内部的**函数**，并且这个内部函数能够访问到外层函数中定义的变量

**作用：**

①让外部访问函数内部变量成为可能

②局部变量会常驻在内存中

③可以避免使用全局便变量，防止全局变量污染

**缺点：**

会造成内存泄露（内存空间长期被占用，而不被释放）

**场景：**

1）、只有一个方法的对象

因为闭包允许将函数与其所操作的某些数据（环境）关联起来。这显然类似于面向对象编程。在面向对象编程中，对象允许我们将某些数据（对象的属性）与一个或者多个方法相关联。

因此，通常你使用只有一个方法的对象的地方，都可以使用闭包。

示例：

//面向对象的类
    // class Person{
    //     constructor(){
    //         this.name = "陈琳"
    //     }
    
    //     eat(){
    //         console.log(this.name+"在吃，天在看……");
    //     }
    // }
    
    // let p1 = new Person();
    
    // p1.eat();
    
    //使用闭包
    function person(str){
        var name = str;
        return function(){
            console.log(name+"在吃，天在看……");
        }
    }
    
    let eat = person("陈琳");
    eat();

**2）、如果某些数据，只希望某些函数操作使用**

3）、用闭包模拟私有方法

编程语言中，比如 Java，是支持将方法声明为私有的，即它们只能被同一个类中的其它方法所调用。

而 JavaScript 没有这种原生支持，但我们可以使用闭包来模拟私有方法。私有方法不仅仅有利于限制对代码的访问：还提供了管理全局命名空间的强大能力，避免非核心的方法弄乱了代码的公共接口部分

[js_let_window_jiang7701037_-CSDN_let]: https://blog.csdn.net/jiang7701037/article/details/101314293
[HTTP_02_jiang7701037_-CSDN]: https://blog.csdn.net/jiang7701037/article/details/118501073
[jiang7701037_-CSDN]: https://blog.csdn.net/jiang7701037/article/details/98738487
[javascript_event loop_jiang7701037_-CSDN]: https://blog.csdn.net/jiang7701037/article/details/95887439