前端面试指南(一面)

知识点梳理

变量类型

ECMAScript 中定义了 6 种原始类型:
6种: Boolean String Number Null Undefinded Symbol
注意:原始类型不包含 Object。
typeof
typeof xxx得到的值有以下几种类型:undefined boolean number string object function、symbol

instanceof
用于实例和构造函数的对应。例如判断一个变量是否是数组,使用typeof无法判断,
但可以使用[1, 2] instanceof Array来判断。
因为,[1, 2]是数组,它的构造函数就是Array。

值类型 vs 引用类型

值类型变量包括 Boolean、String、Number、Undefined、Null,
引用类型包括了 Object 类的所有,如 Date、Array、Function 等

// 引用类型
var a = {x: 10, y: 20}
var b = a
b.x = 100
b.y = 200
console.log(a)  // {x: 100, y: 200}
console.log(b)  // {x: 100, y: 200} 

提高题目

function foo(a){a = a * 10;
}
function bar(b){b.value = 'new';
}
var a = 1;
var b = {value: 'old'};
foo(a);
bar(b);
console.log(a); // 1 这里是因为 Number 类型的 a 是按值传递, 而 Object 类型的b是按照共享传递是
console.log(b); // value: new 

var obj = {a: 1,b: [1,2,3]
}
var a = obj.a
var b = obj.b
a = 2
b.push(4)
console.log(obj, a, b) 

输出

{ a: 1, b: [ 1, 2, 3, 4 ] }   
2     
[ 1, 2, 3, 4 ]

虽然obj本身是个引用类型的变量(对象),
但是内部的a和b一个是值类型一个是引用类型,
a的赋值不会改变obj.a,但是b的操作却会反映到obj对象上。

Symbol 类型

特点

  • 唯一性: 通过 Symbol() 创建的符号都是唯一的
  • 不可变性: 一旦创建就无法被更改
  • 私有性: Symbol 可以作为 对象私有属性键, 这些属性不会被 for…in 或者 Object.keys() 等迭代方法访问
    创建唯一的属性键
// 创建一个 Symbol
const myUniqueKey = Symbol('myUniqueKey');
// 使用 Symbol 作为对象的属性键
const myObject = {[myUniqueKey]: 'This value is unique'
};
// 访问这个属性
console.log(myObject[myUniqueKey]); // 输出: This value is unique
// 尝试使用常规字符串作为键访问这个属性
console.log(myObject['myUniqueKey']); // 输出: undefined

避免属性名冲突
当你在不同的地方扩展同一个对象时,使用 Symbol 可以避免属性名冲突。

const mySymbol = Symbol('myProperty');const obj1 = {[mySymbol]: 'Value from obj1'
};const obj2 = {[mySymbol]: 'Value from obj2'
};console.log(obj1[mySymbol]); // 输出: Value from obj1
console.log(obj2[mySymbol]); // 输出: Value from obj2// 这两个属性是唯一的,即使它们在不同的上下文中使用了相同的 Symbol

私有属性
在JavaScript中,没有真正的私有属性,但 Symbol 可以用来模拟私有属性。

const privateKey = Symbol('privateKey');class MyClass {constructor() {this[privateKey] = 'I am a private property';}getPrivateProperty() {return this[privateKey];}
}const myInstance = new MyClass();
console.log(myInstance.getPrivateProperty()); // 输出: I am a private property// 尝试直接访问这个属性会失败,因为它看起来像是一个普通属性
console.log(myInstance.privateKey); // 输出: undefined

使用 Symbol.for 和 Symbol.keyFor
Symbol.for 允许你创建或访问一个全局的 Symbol,而 Symbol.keyFor 可以获取一个 Symbol 对应的字符串键。

// 创建一个全局 Symbol
const globalSymbol = Symbol.for('globalSymbol');// 访问这个全局 Symbol
const retrievedGlobalSymbol = Symbol.for('globalSymbol');
console.log(globalSymbol === retrievedGlobalSymbol); // 输出: true// 获取 Symbol 的字符串描述
console.log(Symbol.keyFor(globalSymbol)); // 输出: 'globalSymbol'

原型与原型链

所有的引用类型(数组、对象、函数),都具有对象特性,即可自由扩展属性(null除外)
所有的引用类型(数组、对象、函数),都有一个__proto__属性,属性值是一个普通的对象
所有的函数,都有一个prototype属性,属性值也是一个普通的对象
所有的引用类型(数组、对象、函数),__proto__属性值指向它的构造函数的prototype属性值

// 要点一:自由扩展属性
var obj = {}; obj.a = 100;
var arr = []; arr.a = 100;
function fn () {}
fn.a = 100;// 要点二:__proto__
console.log(obj.__proto__);
console.log(arr.__proto__);
console.log(fn.__proto__);// 要点三:函数有 prototype
console.log(fn.prototype)// 要点四:引用类型的 __proto__ 属性值指向它的构造函数的 prototype 属性值
console.log(obj.__proto__ === Object.prototype) 

原型

// 构造函数
function Foo(name, age) {this.name = name
}
Foo.prototype.alertName = function () {alert(this.name)
}
// 创建示例
var f = new Foo('zhangsan')
f.printName = function () {console.log(this.name)
}
// 测试
f.printName()
f.alertName() 

执行printName时很好理解,但是执行alertName时发生了什么?
这里再记住一个重点
当试图得到一个对象的某个属性时,
如果这个对象本身没有这个属性,
那么会去它的__proto__(即它的构造函数的prototype)中寻找,
因此f.alertName就会找到Foo.prototype.alertName。

原型和原型链定义
继承的写法

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/848274.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

除visio以外的几款好用流程图绘制工具

流程图绘制软件在嵌入式软件开发中扮演着重要的角色,它们能够帮助用户清晰、直观地展示工作流程。以下是几款流行的流程图绘制软件及其特点的详细报告: 思维导图MindMaster MindMaster作为一款专业的思维导图软件,不仅具备强大的思维导图制作…

硕士课程 可穿戴设备之作业一

作业一 第一个代码使用的方法是出自于[1]。 框架结构 如下图,不过根据对代码的解读,发现作者在代码中省去了对SSR部件的实现,下文再说。 Troika框架由三个关键部件组成:信号分解,SSR和光谱峰值跟踪。(粗…

游戏缺失xinput1_3.dll怎么修复,总结几种有效的修复方法

在现代科技日新月异的时代,电脑已经成为我们生活和工作中不可或缺的工具。然而,由于各种原因,电脑可能会出现一些错误或问题,其中之一就是找不到xinput13.dll文件,这个问题会导致软件或者游戏无法正常启动运行&#xf…

面试 Redis 八股文十问十答第二期

面试 Redis 八股文十问十答第二期 作者:程序员小白条,个人博客 相信看了本文后,对你的面试是有一定帮助的!关注专栏后就能收到持续更新! ⭐点赞⭐收藏⭐不迷路!⭐ 1)redis 一般都用在什么场景…

搜维尔科技:使用Touch 触觉力反馈设备,用户可以完全沉浸在培训模拟、神经康复或远程的机器人操控中

使用Touch 触觉力反馈设备,用户可以完全沉浸在培训模拟、神经康复或远程的机器人操控中 搜维尔科技:使用Touch 触觉力反馈设备,用户可以完全沉浸在培训模拟、神经康复或远程的机器人操控中

文件编码概念

文件的读取 open()函数: 打开一个已存在的文件,或者创建一个新文件 open(name,mode,encoding) name:是要打开的目标文件名的字符串(可以包含文件所在的具体路径) mode:设置打开文件的模式(访问模式)&am…

C语言—字符函数和字符串函数

1.字符分类函数 C语言中有一系列的函数是专门做字符分类的,也就是一个字符是属于什么类型的字符的。 这些函数的使用都需要包含一个头文件 ctype.h。 例:将一句话中的小写字母改成大写字母。 2.字符转换函数 头文件:ctype.h C语言提供了2…

【数据集划分】假如你有超百万条oracle数据库数据(成真版)

【数据集划分】假如你有接近百万条oracle数据库数据(成真版) 写在最前面小结 数据集划分原因注意事项 1. 留出法(Hold-out Method)原理算法复杂度代码示例Scikit-learn的train_test_split分布式计算框架(如Apache Spar…

JVMの垃圾回收

在上一篇中,介绍了JVM组件中的运行时数据区域,这一篇主要介绍垃圾回收器 JVM架构图: 1、垃圾回收概述 在第一篇中介绍JVM特点时,有提到过内存管理,即Java语言相对于C,C进行的优化,可以在适当的…

DRIVEN|15分的CNN+LightGBM怎么做特征分类,适用于转录组

说在前面 今天分享一篇做深度学习模型的文章,这是一篇软硬结合的研究,排除转换实体产品,我们做生信基础研究的可以学习模仿这个算法,适用且不局限于临床资料,转录组数据,GWAS数据。 今天给大家分享的一篇文…

用香橙派AIpro部署大模型、安装宝塔搭建私有随身WEB开发环境

什么是香橙派 Orange Pi AI Pro 开发板是香橙派联合华为精心打造的高性能 AI 开发板,其搭载了昇腾 AI 处理器,可提供 8TOPS INT8 的计算能力,内存提供了 8GB 和 16GB两种版本。可以实现图像、视频等多种数据分析与推理计算,可广泛…

【路径规划】基于蚁群算法ACO促进水果检测数据集的获取附matlab代码

% 初始化蚁群算法参数 num_ants 20; % 蚂蚁数量 num_iterations 100; % 迭代次数 alpha 1; % 信息素重要程度参数 beta 2; % 启发式信息重要程度参数 rho 0.5; % 信息素挥发率 Q 1; % 信息素增加量 pheromone_initial 0.1; % 初始信息素浓度 num_nodes 100; % 图中节点…

JL-8B/2211电流继电器 带板前接线底座 约瑟JOSEF

JL-8集成电路电流继电器 系列型号 JL-8A/11集成电路电流继电器;JL-8B/11集成电路电流继电器; JL-8A/12集成电路电流继电器;JL-8B/12集成电路电流继电器; JL-8A/13集成电路电流继电器;JL-8B/13集成电路电流继电器; JL-8A/21集成电路电流继电器;JL-8B/21集成电路电流继电器; JL-…

Mamba v2诞生:1 儒(Transformers)释(SSD)道(Mamba)本是一家?!

大模型技术论文不断,每个月总会新增上千篇。本专栏精选论文重点解读,主题还是围绕着行业实践和工程量产。若在某个环节出现卡点,可以回到大模型必备腔调或者LLM背后的基础模型新阅读。而最新科技(Mamba,xLSTM,KAN)则提…

【前端每日基础】day44——vue2和vue3的区别

1. Composition API vs Options API Vue 2 (Options API) 在 Vue 2 中,组件的逻辑通常是通过 data、methods、computed 等选项来定义的。 // Vue 2 组件 export default {data() {return {count: 0}},computed: {doubleCount() {return this.count * 2;}},methods…

foreach、for in和for of之间区别?

foreach、for in和for of都是用于循环遍历数组或对象的方法,但它们之间有一些区别。 1. foreach:是数组的原生方法,可以遍历数组中的每个元素,但是无法中途中断循环或者跳出循环。它只接受一个回调函数作为参数,参数为…

RPA-UiBot6.0数据采集机器人(海量信息一网打尽)内附RPA师资培训课程

前言 友友们是否曾为海量的数据信息而头疼,不知道如何从中精准抓取你所需的数据?小北的这篇博客将为你揭晓答案,让我们一起学习如何运用RPA数据采集机器人,轻松实现海量信息的快速抓取与整理,助力你的工作效率翻倍! 诚邀各位友友参与小北博客的评论,共同开启自动…

传输大咖24|镭速传输揭秘:确保UDP数据完整性的先进策略

在现代网络通信中,UDP(User Datagram Protocol)因其低延迟和高效率的特点而受到青睐,尤其是在需要快速传输大量数据的场景中。然而,UDP协议本身并不保证数据的可靠性和一致性,这就要求使用UDP进行数据传输的…

【JAVASE】异常(下)

四:异常的处理 (2)try-catch捕获并处理 throws 对异常并没有处理,而是将异常报告给抛出异常方法的调用者,由调用者处理。如果真正要对异常进行处理,就需要try-catch 语法格式: 语法格式&#…

springcloud Feign调用拦截器(统一处理拷贝请求头实现透传信息、内部调用鉴权、打印feign调用)

springcloud Feign调用拦截器(统一处理拷贝请求头实现透传信息、内部调用鉴权、打印feign调用日志) 实现接口Feign.RequestInterceptor 实现接口 feign.RequestInterceptor 并注入到IOC容器即可生效 示范代码如下 拷贝请求头,将原请求信…