前端面试题（JS）

Nini_ya

已于 2024-01-29 21:15:01 修改

阅读量75

点赞数 1

文章标签： javascript 前端原型模式

于 2023-08-24 21:34:26 首次发布

本文链接：https://blog.csdn.net/testycookie/article/details/132384320

版权

原型和原型链

什么是原型对象

每个函数在创建的时候，都会生成一个属性prototype，这个属性指向一个对象，这个对象就是此函数的原型对象。该原型对象中有个属性为constructor，指向该函数。这样原型对象和它的函数之间就产生了联系。

什么是 proto

每个通过构造函数创建出来的实例对象，其本身有个属性__proto__，这个属性会指向该实例对象的构造函数的原型对象

原型链

什么是原型链？
现在我们知道了，当访问一个对象的某个属性时，会先在这个对象本身属性上查找，如果没有找到，则会通过它的__proto__隐式属性，找到它的构造函数的原型对象，如果还没有找到就会再一层一层向上查找就会形成一个链式结构，我们称为原型链。

为什么要使用原型链呢？
1.为了实现继承，简化代码，实现代码重用！
2.只要是这个链条上的内容，都可以被访问和使用到！
使用原型链有什么作用？
实现基于原型的继承与属性的共享
避免了代码冗余，公用的属性和方法，可以放到原型对象中
减少了内存占用

闭包

闭包是什么？
闭包是有权限访问其他函数作用域的局部变量的一个函数
换而言之，闭包让开发者可以从内部函数访问外部函数的作用域。
闭包的工作原理是什么？
由于在JS中，变量的作用域属于函数作用域，在函数执行后作用域就会被清理、内存也随之被收回，但是由于闭包是建立在一个函数内部的子函数，由于其可访问上级作用域的原因，即使上级函数执行完，作用域也不会随之销毁，这时的子函数—也就是闭包，便拥有了访问上级作用域中的变量的权限

function init() {
  var name = "Mozilla"; // name 是一个被 init 创建的局部变量
  function displayName() {
    // displayName() 是内部函数，一个闭包
    alert(name); // 使用了父函数中声明的变量
  }
  displayName();
}
init();

闭包解决了什么？
在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。
作用：
1）一个是可以读取函数内部的变量；
2）另一个就是让这些变量的值始终保存在内存中。
闭包的特性？
1.函数内部嵌套函数
2.函数内部可以引用外部的变量
3.参数和变量不会被垃圾回收机制回收
闭包有哪些应用场景？
闭包随处可见， Ajax 请求的成功回调，事件绑定的回调方法，setTimeout 的延时回调。
使用闭包的注意点：
由于闭包会使得函数中的变量都保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，解决方法是，在退出函数之前，将不使用的局部变量全部删除。

ps:闭包的this指向的是window

GET和POST的区别

后退/刷新：GET无害，POST数据会被重新提交。
数据：GET一般是用来获取数据，POST提交数据。
数据类型：GET只允许ASCII字符,POST无限制。
数据大小：GET大小有限制,POST理论上来说没有大小限制。
安全性：GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息，POST放在请求体中
可见性：GET参数通过URL传递对所有人可见，POST数据不可见。
历史保留：GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。

== 和 ===的区别

== 和 !=：在比较前会进行强制类型转换，再确定操作符是否相等。
规则如下：

如果是Boolean，将其转换为数值再比较是否相等，false转换为0，true转换为1
如果是String，将其转换为数值
如果是{}，则调用对象的一个方法取得其原始值，再比较
null == undefined
null和undefined不能转换为其他类型值再比较
如果有一个操作数为NaN，则==返回false，!=返回true，NaN不等于NaN
如果都是对象，则比较是不是同一个对象，如果都指向同一个对象，则返回true，否则false。

==只比较值不比较类型
=== 会判断类型

请说一下你常用的数组方法(至少七个)

答案：
1）Array.push()：此方法是在数组的后面添加新加元素，此方法改变了数组的长度：
2）Array.pop()：此方法在数组后面删除最后一个元素，并返回数组，此方法改变了数组的长度：
3） Array.shift()：此方法在数组后面删除第一个元素，并返回数组，此方法改变了数组的长度：
4） Array.unshift()：此方法是将一个或多个元素添加到数组的开头，并返回新数组的长度：
5）Array.isArray()：判断一个对象是不是数组，返回的是布尔值
6） Array.concat()：此方法是一个可以将多个数组拼接成一个数组：
7）Array.toString() ：把数组作为字符串返回

js都有哪些数据类型？

基本数据类型：Number，String，Boolean，null，undefined，symbol，bigint
引用数据类型：object，function
可能的追加提问：两种数据类型有什么区别？
参考回答：
基本数据类型是直接存储在栈中的简单数据段，占据空间小、大小固定，运行速度快，属于被频繁使用的数据
引用数据类型是存储在堆内存中，占据空间大、大小不固定，运行速度更慢。

Vue中双向数据绑定的理解
通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调

如何理解Js中的this关键词

普通函数中的this：谁调用了函数或者方法，那么这个函数或者对象中的this就指向谁
匿名函数中的this：匿名函数的执行具有全局性，则匿名函数中的this指向是window，而不是调用该匿名函数的对象
（ps：箭头函数没有this，它的this继承而来，默认指向在定义它时所处的对象

map方法

let arr = [1,2,3,4,5]

let newArr = arr.map((item,index)=>{

// console.log(item) //1，2，3，4，5

// console.log('index',index) //0，1，2，3，4

return 2*item

})

console.log(newArr) //2，4，6，8，10