JavaScript保姆级教程 ——— 重难点详细解析（万字长文，建议收藏

原创于 2024-04-21 14:29:57 发布 · 1.2k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

2024年程序员学习专栏收录该内容

300 篇文章

订阅专栏

本文详述JavaScript的关键概念，包括原型对象、call、apply、bind的区别、事件流模型、防抖节流技巧，以及虚拟DOM。文章还提供大厂面试经典题目解析，助你提升技能并了解面试要点。

先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新Web前端全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以添加V获取：vip1024c （备注前端）

正文

字符串也可以是一个对象
日期是一个对象
数学和正则表达式也是对象
数组是一个对象
函数也可以是对象
…

3.1 对象定义

对象是变量的容器
写法以键值对的方式（键名：键值）
键值对称之为对象的属性
循环对象一般用 for in

// 对象定义
let person = {
firstName:“ouyang”,
lastName:“xiu”,
age:18
};

// 循环对象
for(let key in person){
console.log(key); // 键名
console.log(person[key]) // 键值
}

3.2 大厂经典面试题分析

let obj = Object.create(null) 与 let obj = {} 有什么区别？

之前腾讯面试的时候，问了这个问题：对象字面量创建对象与 Object.create(null)创建对象有什么区别？
一开始是有点懵的，不都是创建对象么，能有啥不同，后面我去试了一下，结果发现还蛮有意思：

let obj = {};
let obj2 = Object.create(null);
console.log(obj);
console.log(obj2)

控制台打印
乍一看，好像没啥区别，都是一个花括号
然而，展开后，确实大有不同
Object.create(null)创建的对象是非常纯净的，没有任何其它元素
而另一个let创建的对象是带有_proto_的，下面有一些方法与属性，这便是js的原型链继承，它继承了Object的方法和属性。这便是区别。

所以这种区别导致了使用场景不同

如果需要对象的继承属性和方法，那就使用 let obj = {};
如果只需要一个纯净的对象，那就使用 Object.create(null)
比如说，我只需要用对象来保存一些数据，然后进行循环取用，提高循环效率。
这个时候如果对象有原型链，那便会在循环的时候去循环它的各个属性和方法
然而这不是必要的，我们只是要他里面的元素而已，前者会影响循环效率

4. JavaScript prototype（原型对象）

此属性是函数特有的
每个函数都会默认添加一个
用于继承属性和方法

// 创建构造函数
function Person(name, age) {
this.age = age;
this.name= name;
this.fn = function(){
console.log(this.name)
}
}

// 创建实例
let person1 = new Person(“小明”, 18);
let person2 = new Person(“小红”, 20);
person1.fn(); // 继承父级的方法
person2.fn();
console.log(person1)
console.log(person2)

执行结果
在这里插入图片描述

要添加一个新的属性需要在在构造器函数中添加：

function Person(name, age, sex) {
// sex为新属性
this.sex = sex;
this.age = age;
this.name= name;
this.fn = function(){
console.log(this.name)
}
}

4.1 prototype 继承

所有的 JavaScript 对象都会从一个 prototype（原型对象）中继承属性和方法：

Date 对象从 Date.prototype 继承
Array 对象从 Array.prototype 继承
Person 对象从 Person.prototype 继承

所有 JavaScript 中的对象都是位于原型链顶端的 Object 的实例

JavaScript 对象有一个指向一个原型对象的链
当试图访问一个对象的属性时，它不仅仅在该对象上搜寻，还会搜寻该对象的原型，以及该对象的原型的原型，依次层层向上搜索，直到找到一个名字匹配的属性或到达原型链的末尾（逐级查找）
Date 对象, Array 对象, 以及 Person 对象从 Object.prototype 继承。

4.2 添加属性和方法

function Person(name, age, sex) {
// sex为新属性
this.sex = sex;
this.age = age;
this.name= name;
this.fn = function(){
console.log(this.name)
}
}
Person.prototype.newVal = “我是新添加在原型上的值”;
let person1 = new Person(“小明”, 18);

console.log(person1)

一样可以通过继承拿到

5. call和apply及bind三者的区别（面试重点）

this指向，apply，call，bind的区别是一个经典的面试问题
同时在项目中会经常使用到的原生的js方法。
也是ES5中的众多坑的一个

5.1 从this说起

this指向 = 谁调用，指向谁（这是错误的！！！）
this永远指向最后一个调用它的那个对象（正解）

如何解决this指向问题？

在这里插入图片描述

使用ES6中箭头函数
函数内部使用_this = this
使用apply，call，bind方法
new实例化一个对象

5.2 谈谈apply，call，bind

apply()

let obj = {
name : “小明”,
func1: function () {
console.log(this.name)
},
func2: function () {
setTimeout( function () {
this.func1()
}.apply(name),1000);
}
};
obj.func2() // 小明

apply() 方法调用一个函数，其具有一个指定的this值，以及作为一个数组（或者类似数组的对象）提供的参数，fun.apply(thisArg, [argsArray])
thisArg：在fun函数运行时指定的this值。指定this的值并不一定是函数执行时真正的this值，如果是原始值的this会指向该原始值的自动包装对象。
argsArray：一个数组或者类数组对象，其中的数组元素将作为单独的参数传给fun函数。参数为null或者undefined，则表示不需要传入任何参数。

call()

let obj2 = {
name : “小红”,
func1: function () {
console.log(this.name)
},
func2: function () {
setTimeout( function () {
this.func1()
}.call(name),1000);
}
};
obj2.func2() // 小红

call() 调用一个函数，其具有一个指定的this值，以及若干个参数列表，fun.call(thisArg, arg1, arg2, …)
thisArg：在fun函数运行时指定的this值。指定this的值并不一定是函数执行时真正的this值，如果是原始值的this会指向该原始值的自动包装对象。
arg1, arg2, …：若干个参数列表

bind()

let obj3 = {
name : “小猪”,
func1: function () {
console.log(this.name)
},
func2: function () {
setTimeout( function () {
this.func1()
}.bind(name)(),1000);
}
};
obj3.func2() // 小猪

bind() 创建一个新的函数，当被调用时，将其this的关键字设置为提供的值，在调用新函数时，在任何提供一个给定的参数序列。
bind创建了一个新函数，必须手动去调用。

5.3 区别

apply和call基本类似，他们的区别只是传入的参数不同。
apply传入的参数是包含多个参数的数组
call传入的参数是若干个参数列表
bind方法会创建一个新的函数，当被调用的时候，将其this关键字设置为提供的值，我们必须手动去调用

6. Javascript的事件流模型（面试重点）

事件冒泡：事件开始由最具体的元素接受，然后逐级向上传播
事件捕捉：事件由最不具体的节点先接收，然后逐级向下，一直到最具体的（与上面相反）
DOM事件流：三个阶段：事件捕捉，目标阶段，事件冒泡

7. 防抖与节流（面试精选）

7.1 函数防抖

当持续触发事件时，一段时间内只能触发一次。将几次操作合并为一此操作进行。比如说有一条赛车通道，赛车通过的时间为5s，5s之后到达终点，执行领奖操作
这5s之内只允许一辆赛车在通道内，如果第一辆赛车还在通道内，此时第二辆赛车已经进来了，那么销毁第一辆赛车，从第二辆车入场重新计时5s执行领奖操作

应用场景（数据抖动问题）

let telInput = document.querySelector(‘input’);
telInput.addEventListener(‘input’, function(e) {
//如果直接每次发请求，会导致性能问题
//数据请求
let timeOut = null;
if(timeOut){
clearTimeout(timeOut)
}else{
timeOut = setTimeout(()=>{
$.ajax({})
},2000)
}
})

7.2 函数节流

当持续触发事件时，保证一定时间段内只调用一次事件处理函数。节流，顾名思义，节制流入或流出。
比如说水龙头放水，一旦打开开关，水流就会很快，我们要做的就是限制流出

应用场景（客运站问题）

把整个事件处理器比喻成客运站，如果客运大巴到站就走，那么路上肯定会发生交通拥堵，而且车大部分是空的
因为没给时间上客，虚假繁忙的情况肯定是不好的，那么怎么处理呢？
设置一个时间间隔，时间间隔内只允许执行一次，客运站大巴设定一个时间，到点才会走

8. JS中的虚拟DOM是什么？（面试重点）

在这里插入图片描述

8.1 为什么要有虚拟dom？

文档对象模型或 DOM 定义了一个接口，该接口允许 JavaScript 之类的语言访问和操作 HTML 文档
但是此接口需要付出代价，大量非常频繁的 DOM 操作会使页面速度变慢
虚拟dom的出现就是为了解决操作dom的性能问题

8.2 虚拟dom是什么？好处是？

本质就是JS对象
真实节点抽象成JS对象（文档结构树）
虚拟节点（VNode）表示 DOM 树中的节点。当需要操纵时，可以在虚拟 DOM的内存中执行计算和操作，而不是在真实 DOM 上进行操纵。
相对于直接操作dom，这自然会更快

9. 手写一个new，实现同等功能

function Person(name) {
this.name = name
this.sayName= function () {
console.log(我是 ${this.name}!)
}
}

function myNew(that, …args) {
const obj = Object.create(null)
obj.proto = that.prototype
const res = that.call(obj, …args)
return res instanceof Object ? res : obj
}
let person= myNew(Person, ‘小明’)
person.sayWorld(); // 我是小明

10. 获得页面url参数的值（常用）

function getQueryString(name) {
var reg = new RegExp(“(^|&)” + name + “=([^&]*)(&|$)”, “i”);
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]);
return null;
}