国外网站空间,中信建设有限责任公司深圳中信金融中心项目工期专业招标,app界面设计案例分析,朝阳做网站文章目录 前端面试02#xff08;JS#xff09;1、js的组成2、js内置对象3、操作数组的方法4、数据类型的检测方法5、闭包是什么6、前端内存泄漏7、事件委托8、基本数据类型和引用数据类型9、原型链10、JS如何实现继承 #x1f389;写在最后 前端面试02#xff08;JS#x… 文章目录 前端面试02JS1、js的组成2、js内置对象3、操作数组的方法4、数据类型的检测方法5、闭包是什么6、前端内存泄漏7、事件委托8、基本数据类型和引用数据类型9、原型链10、JS如何实现继承 写在最后 前端面试02JS hello hello~ 这里是 code袁~ 欢迎大家点赞关注收藏 个人主页code袁 所属专栏前端知识 1、js的组成 1.ECMAscriptjs的核心内容描述了基础的语法。 2.文档对象模型DOMDOM把整个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 shiftconcat map filter reduce isArray 那些方法会改变元素组pop push unshift shift sortreverse4、数据类型的检测方法 typeof对基本数据类型没问题引用数据类型不适用 instanceof只能判断引用数据类型不能判断基本数据类型 constructor基本和引用大概都能判断 Object.prototype.toString.call() 都能判断出来scriptconsole.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));/script5、闭包是什么 闭包是指一个函数内部定义的函数这个内部函数可以访问到外部函数的变量。换句话说闭包是由函数和 与其相关的引用环境组合而成的实体。当一个函数返回了一个内部函数后即使该函数已经执行结束 但是内部函数引用的外部变量依然保存在内存中这种行为称为闭包。 闭包可以用来实现函数式编程中的一些特性如函数柯里化、延迟计算等.闭包的特点 可以重复的利用变量并且变量不会污染全局的一种机制这个变量一直保存在内存中。 缺点闭包过多会消耗内存导致性能下降。 使用场景防抖节流函数嵌套6、前端内存泄漏 JS里已经分配内存地址的对象但是由于长时间没有释放或者消除造成长期占用内存的现象。 由于一些错误的编码或者设计导致的内存无法被正确释放的问题。这可能会导致页面性能下降、 页面崩溃或者浏览器崩溃等严重后果。常见类型1.未及时清理不再使用的变量或对象如果在代码中有一些变量或对象不再被使用但是没有被及时清理 这些变量或对象会一直占用内存导致内存泄漏。 2.事件监听器未正确移除如果在页面中添加了事件监听器但是在元素被移除或者页面跳转时 未正确移除这些事件监听器会导致内存泄漏。 3.循环引用如果对象之间存在循环引用即使这些对象不再被使用由于彼此之间相互引用 导致垃圾回收器无法正确识别这些对象为垃圾从而无法释放内存。 4.定时器未清理如果在代码中使用了定时器但是在页面卸载或者不再需要定时器时未清理 会导致定时器一直在运行占用内存。 7、事件委托 事件委托是一种常见的前端开发技术也称为事件代理。它利用事件冒泡的原理将事件处理程序添加 到父元素而不是每个子元素上。当子元素触发事件时事件会冒泡到父元素然后由父元素统一处理。好处1.减少内存消耗通过将事件处理程序添加到父元素而不是每个子元素可以减少内存消耗 因为只需要一个事件处理程序。 2.简化代码通过事件委托可以减少重复的事件处理程序代码使代码更加简洁和易于维护。 3.提高性能减少了事件处理程序的数量可以提高页面的性能特别是在处理大量元素时。 总的来说事件委托是一种优化前端开发的技术可以简化代码、提高性能并减少内存消耗。8、基本数据类型和引用数据类型 在JavaScript中数据类型可以分为基本数据类型和引用数据类型两种。1. 基本数据类型Primitive Data Types- 数字Number整数和浮点数。- 字符串String文本数据。- 布尔值Booleantrue 或 false。- undefined表示未定义的值。- null表示空值。- SymbolES6新增唯一且不可改变的值。- BigIntES11新增用来表示大整数。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); // 输出 Parent2.构造函数继承 function Parent() {this.name Parent; }function Child() {Parent.call(this); }var child new Child(); console.log(child.name); // 输出 Parent3.组合继承 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); // 输出 Parent4.原型式继承 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 ✨支持一下哦手动码字如有错误欢迎在评论区指正~ 你的支持就是我更新的最大动力~