前端面试02(JS)

简介: 本文是前端面试系列的第二篇,主要涵盖了JavaScript的基础知识,包括JS的组成(ECMAScript、DOM、BOM)、内置对象(如String、Array、Math、Date等)、数组操作方法、数据类型检测方法(typeof、instanceof、constructor、Object.prototype.toString.call)、闭包的概念及其特点、前端内存泄漏的原因和类型、事件委托的优势、基本数据类型与引用数据类型的差异、原型链的工作原理以及JS实现继承的多种方式(原型链、构造函数、组合继承等)。文章结尾鼓励读者点赞和支持作者。

@[toc]

前端面试02(JS)

hello hello~ ,这里是 code袁~💖💖 ,欢迎大家点赞🥳🥳关注💥💥收藏🌹🌹🌹
💥个人主页:code袁
💥 所属专栏:前端知识

1、js的组成

1.ECMAscript:js的核心内容,描述了基础的语法。
2.文档对象模型(DOM):DOM把整个HTML页面划分为元素构成的文档。
3.浏览器对象模型(BOM):对浏览器窗口进行访问。

2、js内置对象

Sting Boolean  Number Array Object Function Math Data RegExp
Math-> abs(),sqrt() max(),min()
Data->new Data() getYear()
Arry->
String->concat() length,slice(),split()

3、操作数组的方法

push() pop() sort() splice() unshift() shift()concat() map()
filter() reduce() isArray()
那些方法会改变元素组
   pop() push() unshift() shift() sort()reverse()

4、数据类型的检测方法

typeof()对基本数据类型没问题,引用数据类型不适用
instanceof()只能判断引用数据类型,不能判断基本数据类型
constructor()基本和引用大概都能判断
Object.prototype.toString.call()  都能判断出来
<script>
    console.log(typeof 666);
    console.log([] instanceof Array);
    console.log("abc" instanceof String);
    console.log("abc".constructor == String);
    var abc = Object.prototype.toString;
    console.log(abc.call(2));
    console.log(abc.call("aaaa"));
  </script>

5、闭包是什么

闭包是指一个函数内部定义的函数,这个内部函数可以访问到外部函数的变量。换句话说,闭包是由函数和
与其相关的引用环境组合而成的实体。当一个函数返回了一个内部函数后,即使该函数已经执行结束,
但是内部函数引用的外部变量依然保存在内存中,这种行为称为闭包。
闭包可以用来实现函数式编程中的一些特性,如函数柯里化、延迟计算等.

闭包的特点
可以重复的利用变量,并且变量不会污染全局的一种机制这个变量一直保存在内存中。
缺点:闭包过多会消耗内存,导致性能下降。
使用场景:防抖,节流,函数嵌套

6、前端内存泄漏

JS里已经分配内存地址的对象,但是由于长时间没有释放或者消除,造成长期占用内存的现象。
由于一些错误的编码或者设计导致的内存无法被正确释放的问题。这可能会导致页面性能下降、
页面崩溃或者浏览器崩溃等严重后果。

常见类型

1.未及时清理不再使用的变量或对象:如果在代码中有一些变量或对象不再被使用,但是没有被及时清理,
这些变量或对象会一直占用内存,导致内存泄漏。
2.事件监听器未正确移除:如果在页面中添加了事件监听器,但是在元素被移除或者页面跳转时
未正确移除这些事件监听器,会导致内存泄漏。
3.循环引用:如果对象之间存在循环引用,即使这些对象不再被使用,由于彼此之间相互引用,
导致垃圾回收器无法正确识别这些对象为垃圾,从而无法释放内存。
4.定时器未清理:如果在代码中使用了定时器,但是在页面卸载或者不再需要定时器时未清理,
会导致定时器一直在运行,占用内存。

7、事件委托

事件委托是一种常见的前端开发技术,也称为事件代理。它利用事件冒泡的原理,将事件处理程序添加
到父元素而不是每个子元素上。当子元素触发事件时,事件会冒泡到父元素,然后由父元素统一处理。

好处

1.减少内存消耗:通过将事件处理程序添加到父元素,而不是每个子元素,可以减少内存消耗,
因为只需要一个事件处理程序。
2.简化代码:通过事件委托,可以减少重复的事件处理程序代码,使代码更加简洁和易于维护。
3.提高性能:减少了事件处理程序的数量,可以提高页面的性能,特别是在处理大量元素时。
总的来说,事件委托是一种优化前端开发的技术,可以简化代码、提高性能,并减少内存消耗。

8、基本数据类型和引用数据类型

在JavaScript中,数据类型可以分为基本数据类型和引用数据类型两种。

1. 基本数据类型(Primitive Data Types):
   - 数字(Number):整数和浮点数。
   - 字符串(String):文本数据。
   - 布尔值(Boolean):true 或 false。
   - undefined:表示未定义的值。
   - null:表示空值。
   - Symbol(ES6新增):唯一且不可改变的值。
   - BigInt(ES11新增):用来表示大整数。

2. 引用数据类型(Reference Data Types):
   - 对象(Object):包括普通对象、数组、函数等。
   - 函数(Function):一种特殊的对象,具有可调用的行为。
   - 数组(Array):一种特殊的对象,用于存储多个值。
   - 日期(Date):表示日期和时间。
   - 正则表达式(RegExp):用于匹配字符串的模式。

基本数据类型存储在栈内存中,而引用数据类型存储在堆内存中,并且在栈内存中存储的是引用数据类型的地址。
基本数据类型是按值访问的,而引用数据类型是按引用访问的。
在操作基本数据类型时,会直接操作其实际的值,而在操作引用数据类型时,
实际上是操作其在堆内存中的地址。

var obj = {
   
      name: "張三",
      age: 18,
    };
    var obj1 = obj;
    obj1.name = "李四";
    console.log(obj);
    console.log(obj1);

9、原型链

原型链是JavaScript中用于实现继承和对象属性查找的机制。它是为构造函数的实例共享属性和方法。
每个对象都有一个原型(prototype)属性,指向另一个对象,这个对象的原型又可以指向另一个对象,、
以此类推,形成了一个链式结构,即原型链。

 function person() {
   
      this.say = function () {
   
        console.log("说");
      };
    }
    person.prototype.look = function () {
   
      console.log("话");
    };
    var p1 = new person();
    var p2 = new person();
    p1.say();
    p2.say();
    p1.look();
    p2.look();
    console.log(p1.__proto__ === person.prototype);

当我们访问一个对象的属性或方法时,如果该对象本身没有这个属性或方法,JavaScript会沿着原型链向
上查找,直到找到对应的属性或方法,或者到达原型链的顶端(即Object.prototype)。这样就实现了属性和方法的继承。

在原型链中,每个对象都有一个原型对象(prototype),可以通过对象的__proto__属性来访问。
当我们创建一个对象时,该对象会自动关联到一个原型对象,可以通过构造函数的prototype属性来指定对象的
原型。子对象可以通过原型链继承父对象的属性和方法,实现代码的复用和继承。

原型链是JavaScript中非常重要的概念,它是实现对象之间继承关系的基础,也是理解JavaScript中对象属性查找机制的关键。

当我们访问一个对象的属性或方法时,如果对象本身没有该属性或方法,JavaScript会沿着原型链向上查找,
直到找到对应的属性或方法或者到达顶端的Object.prototype。

10、JS如何实现继承

在JavaScript中,实现继承的方式有多种,其中包括
1.原型链继承
function Parent() {
   
    this.name = 'Parent';
}

function Child() {
   
}

Child.prototype = new Parent();
Child.prototype.constructor = Child;

var child = new Child();
console.log(child.name); // 输出 'Parent'

2.构造函数继承
function Parent() {
   
    this.name = 'Parent';
}

function Child() {
   
    Parent.call(this);
}

var child = new Child();
console.log(child.name); // 输出 'Parent'

3.组合继承
function Parent() {
   
    this.name = 'Parent';
}

function Child() {
   
    Parent.call(this);
}

Child.prototype = new Parent();
Child.prototype.constructor = Child;

var child = new Child();
console.log(child.name); // 输出 'Parent'

4.原型式继承
5.寄生式继承
6.ES6中的class继承
class Parent {
   
    constructor() {
   
        this.name = 'Parent';
    }
}

class Child extends Parent {
   
    constructor() {
   
        super();
    }
}

let child = new Child   console.log(child.name); // 输出 'Parent'

🎉写在最后

🍻伙伴们,如果你已经看到了这里,觉得这篇文章有帮助到你的话不妨点赞👍或 Star ✨支持一下哦!手动码字,如有错误,欢迎在评论区指正💬~

你的支持就是我更新的最大动力💪~

目录
相关文章
|
5天前
|
存储 前端开发 JavaScript
前端面试题23-34
通过对 Promise 和 ECMAScript6 的深入理解,可以更好地应对现代 JavaScript 开发中的复杂异步操作和新特性,提升代码质量和开发效率。
10 2
|
3天前
|
前端开发 JavaScript 数据处理
前端新手指南:如何解决JavaScript导出CSV文件不完整的问题
【6月更文挑战第4天】在JavaScript中处理CSV文件时,需要特别注意一些特殊字符,例如逗号、双引号、换行符等。这些字符可能会影响CSV文件的解析,导致数据错乱。
17 0
|
20天前
|
前端开发 JavaScript Java
2024高频前端面试题合集(一)
JavaScript Bridge 是一种在 JavaScript 和其他语言(如 Java、Objective-C 等)间建立通信的技术,常用于混合应用开发,允许调用原生功能、获取数据、事件通知及优化性能。SSR(服务器端渲染)的单机 QPS 取决于服务器性能、应用复杂度、网络条件等因素。Egg.js 是基于 Node.js 的企业级框架,通过目录结构约定、启动流程、插件机制和核心组件来初始化应用。前端错误捕获可通过 try-catch、window.onerror、Promise.catch 和 unhandledrejection 事件等方式实现。
|
3天前
|
XML 前端开发 JavaScript
前端简介(HTML+CSS+JS)
前端简介(HTML+CSS+JS)
|
3天前
|
JavaScript 前端开发 网络协议
前端JS发起的请求能暂停吗?
在讨论前端JS发起的请求是否能暂停时,需要明确两个概念:什么状态可以被认为是“暂停”?以及什么是JS发起的请求?
59 1
前端JS发起的请求能暂停吗?
|
5天前
|
前端开发 JavaScript 虚拟化
前端面试题12-22
ES6(ECMAScript 2015)是 JavaScript 的重要版本,引入了许多新特性和语法,提升了语言的功能和可用性。ES6 的主要特性包括箭头函数、类、模板字符串、解构赋值、默认参数、Promise、模块化、Generator 函数、async 函数、Proxy 和 Reflect 等。这些特性不仅简化了代码的编写和维护,还为开发者提供了更多的编程范式和工具。了解和掌握 ES6 的特性是现代 JavaScript 开发的必备技能。
6 1
|
5天前
|
JSON 前端开发 JavaScript
前端面试题01-11
Map是ES6引入的一种新的键值对集合数据结构,类似于对象,但键的范围不限于字符串,还可以是任何类型的值。Map保持键值对的插入顺序,提供更灵活的键值对操作方法,如`set()`、`get()`、`delete()`、`has()`等。
5 1
|
6天前
|
前端开发 JavaScript 安全
TypeScript作为一种静态类型的JavaScript超集,其强大的类型系统和面向对象编程特性为微前端架构的实现提供了有力的支持
【6月更文挑战第11天】微前端架构借助TypeScript提升开发效率和代码可靠性。 TypeScript提供类型安全,防止微前端间通信出错;智能提示和自动补全加速跨代码库开发;重构支持简化代码更新。通过定义公共接口确保一致性,用TypeScript编写微前端以保证质量。集成到构建流程确保顺利构建打包。在微前端场景中,TypeScript是强有力的语言选择。
23 2
|
11天前
|
Web App开发 资源调度 JavaScript
【保姆级】前端使用node.js基础教程
【6月更文挑战第3天】Node.js 是基于 Chrome V8 引擎的 JavaScript 运行环境,用于服务器端编程。常用命令包括:安装 Node.js,通过 `node -v` 查看版本;使用 npm(Node 包管理器)进行初始化、安装/卸载包、查看版本和更新;运行 `.js` 脚本;使用 `node inspect` 调试;借助 nodemon 实现自动重启;通过 `npm list` 管理包;
5 0
|
14天前
|
前端开发 JavaScript API
Vue.js:渐进式JavaScript框架-前端开发
Vue.js:渐进式JavaScript框架-前端开发
21 3