前端javascript面试题

不念不忘少年蓝@ 2022-01-14 07:29 361阅读 0赞

**JavaScript的组成**  
**节流函数**  
函数节流的原理挺简单的，估计大家都想到了，那就是定时器。当我触发一个时间时，先setTimout让这个事件延迟一会再执行，如果在这个时间间隔内又触发了事件，那我们就clear掉原来的定时器，再setTimeout一个新的定时器延迟一会执行，就这样。

*  JavaScript 由以下三部分组成：
    
     *  ECMAScript（核心）：JavaScript 语言基础
     *  DOM（文档对象模型）：规定了访问HTML和XML的接口
     *  BOM（浏览器对象模型）：提供了浏览器窗口之间进行交互的对象和方法

**JS的基本数据类型和引用数据类型**

*  基本数据类型：undefined、null、boolean、number、string、symbol
 *  引用数据类型：object、array、function

**JavaScript有几种类型的值？，你能画一下他们的内存图吗？**

*  栈：原始数据类型（Undefined，Null，Boolean，Number、String）
 *  堆：引用数据类型（对象、数组和函数）
 *  两种类型的区别是：存储位置不同；
 *  原始数据类型直接存储在栈(stack)中的简单数据段，占据空间小、大小固定，属于被频繁使用数据，所以放入栈中存储；
 *  引用数据类型存储在堆(heap)中的对象,占据空间大、大小不固定,如果存储在栈中，将会影响程序运行的性能；引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其
 *  在栈中的地址，取得地址后从堆中获得实体

![687474703a2f2f7777772e77337363686f6f6c2e636f6d2e636e2f692f63745f6a735f76616c75652e676966][]  
**介绍JS有哪些内置对象？**

*  数据封装类对象：Object、Array、Boolean、Number、String
 *  其他对象：Function、Arguments、Math、Date、RegExp、Error
 *  ES6新增对象：Symbol、Map、Set、Promises、Proxy、Reflect

**重绘和回流（重排）的区别和关系？**

*  重绘：当渲染树中的元素外观（如：颜色）发生改变，不影响布局时，产生重绘
 *  回流：当渲染树中的元素的布局（如：尺寸、位置、隐藏/状态状态）发生改变时，产生重绘回流
 *  注意：JS获取Layout属性值（如：offsetLeft、scrollTop、getComputedStyle等）也会引起回流。因为浏览器需要通过回流计算最新值
 *  回流必将引起重绘，而重绘不一定会引起回流

**解释JavaScript中的作用域与变量声明提升？**

*  JavaScript作用域：
    
     *  在Java、C等语言中，作用域为for语句、if语句或\{\}内的一块区域，称为作用域；
     *  而在 JavaScript 中，作用域为function()\{\}内的区域，称为函数作用域。
 *  JavaScript变量声明提升：
    
     *  在JavaScript中，函数声明与变量声明经常被JavaScript引擎隐式地提升到当前作用域的顶部。
     *  声明语句中的赋值部分并不会被提升，只有名称被提升
     *  函数声明的优先级高于变量，如果变量名跟函数名相同且未赋值，则函数声明会覆盖变量声明
     *  如果函数有多个同名参数，那么最后一个参数（即使没有定义）会覆盖前面的同名参数

**介绍JavaScript的原型，原型链？有什么特点？**

*  原型：
    
     *  JavaScript的所有对象中都包含了一个 \[**proto**\] 内部属性，这个属性所对应的就是该对象的原型
     *  JavaScript的函数对象，除了原型 \[**proto**\] 之外，还预置了 prototype 属性
     *  当函数对象作为构造函数创建实例时，该 prototype 属性值将被作为实例对象的原型 \[**proto**\]。
 *  原型链：
    
     *  当一个对象调用的属性/方法自身不存在时，就会去自己 \[**proto**\] 关联的前辈 prototype 对象上去找
     *  如果没找到，就会去该 prototype 原型 \[**proto**\] 关联的前辈 prototype 去找。依次类推，直到找到属性/方法或 undefined 为止。从而形成了所谓的“原型链”
 *  原型特点：
    
     *  JavaScript对象是通过引用来传递的，当修改原型时，与之相关的对象也会继承这一改变

**Javascript如何实现继承？**

*  构造函数绑定：使用 call 或 apply 方法，将父对象的构造函数绑定在子对象上

function Cat(name,color){ 
     　Animal.apply(this, arguments);
     　this.name = name;
     　this.color = color;
    }

*  实例继承：将子对象的 prototype 指向父对象的一个实例

Cat.prototype = new Animal();
    Cat.prototype.constructor = Cat;

*  拷贝继承：如果把父对象的所有属性和方法，拷贝进子对象

function extend(Child, Parent) { 
      　　　var p = Parent.prototype;
      　　　var c = Child.prototype;
      　　　for (var i in p) { 
      　　　   c[i] = p[i];
      　　　}
      　　　c.uber = p;
      　 }

*  原型继承：将子对象的 prototype 指向父对象的 prototype

function extend(Child, Parent) { 
            var F = function(){ };
          　F.prototype = Parent.prototype;
          　Child.prototype = new F();
          　Child.prototype.constructor = Child;
          　Child.uber = Parent.prototype;
        }

*  ES6 语法糖 extends：class ColorPoint extends Point \{\}

class ColorPoint extends Point { 
           constructor(x, y, color) { 
              super(x, y); // 调用父类的constructor(x, y)
              this.color = color;
           }
           toString() { 
              return this.color + ' ' + super.toString(); // 调用父类的toString()
           }
        }

**Javascript作用链域?**

*  全局函数无法查看局部函数的内部细节，但局部函数可以查看其上层的函数细节，直至全局细节
 *  如果当前作用域没有找到属性或方法，会向上层作用域查找，直至全局函数，这种形式就是作用域链

**谈谈this对象的理解**

*  this 总是指向函数的直接调用者
 *  如果有 new 关键字，this 指向 new 出来的实例对象
 *  在事件中，this指向触发这个事件的对象
 *  IE下 attachEvent 中的this总是指向全局对象Window

**eval是做什么的？**

**eval的功能是把对应的字符串解析成JS代码并运行**

*  应该避免使用eval，不安全，非常耗性能（先解析成js语句，再执行）
 *  由JSON字符串转换为JSON对象的时候可以用 eval(’(’+ str +’)’);

**事件的代理/委托**

*  事件委托是指将事件绑定目标元素的到父元素上，利用冒泡机制触发该事件
    
     *  优点：
        
         *  可以减少事件注册，节省大量内存占用
         *  可以将事件应用于动态添加的子元素上
     *  缺点：  
        使用不当会造成事件在不应该触发时触发
     *  示例：

ulEl.addEventListener('click', function(e){
        var target = event.target || event.srcElement;
        if(!!target && target.nodeName.toUpperCase() === "LI"){
            console.log(target.innerHTML);
        }
    }, false);

**请解释什么是事件代理**

*  事件代理（Event Delegation），又称之为事件委托。是 JavaScript 中常用绑定事件的常用技巧。顾名思义，“事件代理”即是把原本需要绑定的事件委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。使用事件代理的好处是可以提高性能

**什么是函数节流？介绍一下应用场景和原理？**

*  函数节流(throttle)是指阻止一个函数在很短时间间隔内连续调用。  
    只有当上一次函数执行后达到规定的时间间隔，才能进行下一次调用。  
    但要保证一个累计最小调用间隔（否则拖拽类的节流都将无连续效果）
 *  函数节流用于 onresize, onscroll 等短时间内会多次触发的事件
 *  函数节流的原理：使用定时器做时间节流。  
    当触发一个事件时，先用 setTimout 让这个事件延迟一小段时间再执行。  
    如果在这个时间间隔内又触发了事件，就 clearTimeout 原来的定时器，  
    再 setTimeout 一个新的定时器重复以上流程。
 *  函数节流简单实现：

**new 操作符具体干了什么？**

*  创建实例对象，this 变量引用该对象，同时还继承了构造函数的原型
 *  属性和方法被加入到 this 引用的对象中
 *  新创建的对象由 this 所引用，并且最后隐式的返回 this

\*\* JavaScript实现异步编程的方法？\*\*

*  回调函数
 *  事件监听
 *  发布/订阅
 *  Promises对象
 *  Async函数\[ES7\]

**Javascript如何实现继承？**

*  构造继承
 *  原型继承
 *  实例继承
 *  拷贝继承
 *  原型prototype机制或apply和call方法去实现较简单，建议使用构造函数与原型混合方式

function Parent(){
            this.name = 'wang';
        }
    
        function Child(){
            this.age = 28;
        }
        Child.prototype = new Parent();//继承了Parent，通过原型
    
        var demo = new Child();
        alert(demo.age);
        alert(demo.name);//得到被继承的属性
      }

**javascript创建对象的几种方式？**

> javascript创建对象简单的说,无非就是使用内置对象或各种自定义对象，当然还可以用JSON；但写法有很多种，也能混合使用

*  对象字面量的方式

person={firstname:"Mark",lastname:"Yun",age:25,eyecolor:"black"};

*  用function来模拟无参的构造函数

function Person(){}
        var person=new Person();//定义一个function，如果使用new"实例化",该function可以看作是一个Class
            person.name="Mark";
            person.age="25";
            person.work=function(){
            alert(person.name+" hello...");
        }
    person.work();

*  用function来模拟参构造函数来实现（用this关键字定义构造的上下文属性）

function Pet(name,age,hobby){
           this.name=name;//this作用域：当前对象
           this.age=age;
           this.hobby=hobby;
           this.eat=function(){
              alert("我叫"+this.name+",我喜欢"+this.hobby+",是个程序员");
           }
        }
        var maidou =new Pet("麦兜",25,"coding");//实例化、创建对象
        maidou.eat();//调用eat方法

*  用工厂方式来创建（内置对象）

var wcDog =new Object();
         wcDog.name="旺财";
         wcDog.age=3;
         wcDog.work=function(){
           alert("我是"+wcDog.name+",汪汪汪......");
         }
         wcDog.work();

*  用原型方式来创建

function Dog(){
    
         }
         Dog.prototype.name="旺财";
         Dog.prototype.eat=function(){
         alert(this.name+"是个吃货");
         }
         var wangcai =new Dog();
         wangcai.eat();

*  用混合方式来创建

function Car(name,price){
          this.name=name;
          this.price=price; 
        }
         Car.prototype.sell=function(){
           alert("我是"+this.name+"，我现在卖"+this.price+"万元");
          }
        var camry =new Car("凯美瑞",27);
        camry.sell();

**谈谈This对象的理解**

*  this总是指向函数的直接调用者（而非间接调用者）
 *  如果有new关键字，this指向new出来的那个对象
 *  在事件中，this指向触发这个事件的对象，特殊的是，IE中的attachEvent中的this总是指向全局对象Window

**eval是做什么的？**

*  它的功能是把对应的字符串解析成JS代码并运行
 *  应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）
 *  由JSON字符串转换为JSON对象的时候可以用eval，var obj =eval(’(’+ str +’)’)

**null，undefined 的区别？**

*  undefined 表示不存在这个值。
 *  undefined :是一个表示"无"的原始值或者说表示"缺少值"，就是此处应该有一个值，但是还没有定义。当尝试读取时会返回 undefined
 *  例如变量被声明了，但没有赋值时，就等于undefined
 *  null 表示一个对象被定义了，值为“空值”
 *  null : 是一个对象(空对象, 没有任何属性和方法)
 *  例如作为函数的参数，表示该函数的参数不是对象；
 *  在验证null时，一定要使用　=== ，因为 == 无法分别 null 和　undefined

**什么是闭包（closure），为什么要用它？**

*  闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域
 *  闭包的特性：
    
     *  函数内再嵌套函数
     *  内部函数可以引用外层的参数和变量
     *  参数和变量不会被垃圾回收机制回收

**说说你对闭包的理解**

*  使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。在js中，函数即闭包，只有函数才会产生作用域的概念
 *  闭包有三个特性：
    
     *  1.函数嵌套函数
     *  2.函数内部可以引用外部的参数和变量
     *  3.参数和变量不会被垃圾回收机制回收

**javascript 代码中的"use strict";是什么意思 ? 使用它区别是什么？**

*  use strict是一种ECMAscript 5 添加的（严格）运行模式,这种模式使得 Javascript 在更严格的条件下运行,使JS编码更加规范化的模式,消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为

**如何判断一个对象是否属于某个类？**

// 使用instanceof （待完善）
       if(a instanceof Person){
           alert('yes');
       }

**new操作符具体干了什么呢?**

*  创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型
 *  属性和方法被加入到 this 引用的对象中
 *  新创建的对象由 this 所引用，并且最后隐式的返回 this

var obj  = {};
    obj.__proto__ = Base.prototype;
    Base.call(obj);

**请解释一下 JavaScript 的同源策略**\*\*

*  这里的同源策略指的是：协议，域名，端口相同， 同源策略是浏览器的一个安全功能，不同源的客户端脚本(js)在没有明确授权的情况下，不能读写对方资源。

**不受同源策略限制的：**  
1、页面中的链接，重定向以及表单提交是不会受到同源策略限制的。  
2、跨域资源的引入是可以的。但是js不能读写加载的内容。如嵌入到页面中的，，，等。

**为什么要有同源限制？**

*  我们举例说明：比如一个黑客程序，他利用Iframe把真正的银行登录页面嵌到他的页面上，当你使用真实的用户名，密码登录时，他的页面就可以通过Javascript读取到你的表单中input中的内容，这样用户名，密码就轻松到手了。
 *  缺点
    
     *  现在网站的JS都会进行压缩，一些文件用了严格模式，而另一些没有。这时这些本来是严格模式的文件，被 merge后，这个串就到了文件的中间，不仅没有指示严格模式，反而在压缩后浪费了字节

[https://www.cnblogs.com/rockmadman/p/6836834.html][https_www.cnblogs.com_rockmadman_p_6836834.html]

**js延迟加载的方式有哪些？**

*  defer和async、动态创建DOM方式（用得最多）、使用setTimeout延迟方法  
    让JS最后加载  
    把js外部引入的文件放到页面底部，来让js最后引入，从而加快页面加载速度

**异步加载JS的方式有哪些？**

*  设置`<script>`属性 async=“async” （一旦脚本可用，则会异步执行）
 *  动态创建 script DOM：document.createElement(‘script’);
 *  XmlHttpRequest 脚本注入
 *  异步加载库 LABjs
 *  模块加载器 Sea.js

**Ajax 是什么? 如何创建一个Ajax？**

> ajax的全称：Asynchronous Javascript And XML

*  异步传输+js+xml
 *  所谓异步，在这里简单地解释就是：向服务器发送请求的时候，我们不必等待结果，而是可以同时做其他的事情，等到有了结果它自己会根据设定进行后续操作，与此同时，页面是不会发生整页刷新的，提高了用户体验
 *  创建XMLHttpRequest对象,也就是创建一个异步调用对象
 *  建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
 *  设置响应HTTP请求状态变化的函数
 *  发送HTTP请求
 *  获取异步调用返回的数据
 *  用JavaScript和DOM实现局部刷新

**同步和异步的区别?**

*  同步：浏览器访问服务器请求，用户看得到页面刷新，重新发请求,等请求完，页面刷新，新内容出现，用户看到新内容,进行下一步操作
 *  异步：浏览器访问服务器请求，用户正常操作，浏览器后端进行请求。等请求完，页面不刷新，新内容也会出现，用户看到新内容

**异步加载JS的方式有哪些？**

*  defer，只支持IE
 *  async：
 *  创建script，插入到DOM中，加载完毕后callBack

**documen.write和 innerHTML的区别**

*  document.write只能重绘整个页面
 *  innerHTML可以重绘页面的一部分

**DOM操作——怎样添加、移除、移动、复制、创建和查找节点?**

*  （1）创建新节点
    
     *  createDocumentFragment() //创建一个DOM片段
     *  createElement() //创建一个具体的元素
     *  createTextNode() //创建一个文本节点
 *  （2）添加、移除、替换、插入
    
     *  appendChild()
     *  removeChild()
     *  replaceChild()
     *  insertBefore() //在已有的子节点前插入一个新的子节点
 *  （3）查找
    
     *  getElementsByTagName() //通过标签名称
     *  getElementsByName() // 通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)
     *  getElementById() //通过元素Id，唯一性

**那些操作会造成内存泄漏？**

*  内存泄漏指任何对象在您不再拥有或需要它之后仍然存在
 *  垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收
 *  setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏
 *  闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

\*\* 列举一下JavaScript数组和对象有哪些原生方法？\*\*

*  数组：
    
     *  arr.concat(arr1, arr2, arrn);
     *  arr.join(",");
     *  arr.sort(func);
     *  arr.pop();
     *  arr.push(e1, e2, en);
     *  arr.shift();
     *  unshift(e1, e2, en);
     *  arr.reverse();
     *  arr.slice(start, end);
     *  arr.splice(index, count, e1, e2, en);
     *  arr.indexOf(el);
     *  arr.includes(el); // ES6
 *  对象：
    
     *  object.hasOwnProperty(prop);
     *  object.propertyIsEnumerable(prop);
     *  object.valueOf();
     *  object.toString();
     *  object.toLocaleString();
     *  Class.prototype.isPropertyOf(object);

**Array.splice() 与 Array.splice() 的区别？**

*  slice – “读取”数组指定的元素，不会对原数组进行修改
    
     *  语法：arr.slice(start, end)
     *  start 指定选取开始位置（含）
     *  end 指定选取结束位置（不含）
 *  splice
    
     *  “操作”数组指定的元素，会修改原数组，返回被删除的元素
     *  语法：arr.splice(index, count, \[insert Elements\])
     *  index 是操作的起始位置
     *  count = 0 插入元素，count > 0 删除元素
     *  \[insert Elements\] 向数组新插入的元素

**JavaScript 对象生命周期的理解？**

*  当创建一个对象时，JavaScript 会自动为该对象分配适当的内存
 *  垃圾回收器定期扫描对象，并计算引用了该对象的其他对象的数量
 *  如果被引用数量为 0，或惟一引用是循环的，那么该对象的内存即可回收

**哪些操作会造成内存泄漏？**

*  JavaScript 内存泄露指对象在不需要使用它时仍然存在，导致占用的内存不能使用或回收
 *  未使用 var 声明的全局变量
 *  闭包函数(Closures)
 *  循环引用(两个对象相互引用)
 *  控制台日志(console.log)
 *  移除存在绑定事件的DOM元素(IE)

[687474703a2f2f7777772e77337363686f6f6c2e636f6d2e636e2f692f63745f6a735f76616c75652e676966]: /images/20220114/e16d7bd0d9f24c6fbf0c649d856cb5c1.png
[https_www.cnblogs.com_rockmadman_p_6836834.html]: https://www.cnblogs.com/rockmadman/p/6836834.html