前端面试02（JS）

文章目录

- 前端面试02（JS）
- - - 1、js的组成
    - 2、js内置对象
    - 3、操作数组的方法
    - 4、数据类型的检测方法
    - 5、闭包是什么
    - 6、前端内存泄漏
    - 7、事件委托
    - 8、基本数据类型和引用数据类型
    - 9、原型链
    - 10、JS如何实现继承
  - 🎉写在最后

前端面试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'