JavaScript相关面试题:1.js数据类型;2.JavaScript 语句的基本规范;3.事件代理;4.全局变量;5.哪些操作会造成内存泄漏;6.bind, call,apply

简介: ★三者都可以改变函数的this对象指向★三者第一个参数都是this要指向的对象,如果如果没有这个参数或参数为undefined或null,则默认指向全局window★三者都可以传参,但是apply是数组,而call是参数列表,且apply和call是一次性传入参数,而bind可以分为多次传入★bind 是返回绑定this之后的函数,apply 、call 则是立即执行

文章目录

JavaScript 数据类型有哪些

请说几条书写 JavaScript 语句的基本规范

什么是事件代理(事件委托)?

什么是全局变量?这些变量如何声明?使用全局变 有哪些问题?

哪些操作会造成内存泄漏?

bind, call,apply 有什么区别?如何实现一个bind?

JavaScript 数据类型有哪些

值类型(基本类型):字符串(String)、数字(Number)、布尔(Boolean)、空(Null)、未定义(Undefined)、Symbol。


引用数据类型(对象类型):对象(Object)、数组(Array)、函数(Function),还有两个特殊的对象:正则(RegExp)和日期(Date)。


请说几条书写 JavaScript 语句的基本规范

(1)不要在同一行声明多个变量

(2)应使用=== / !==来比较 rue false 或者数值

(3)使用对象字面量替代 new Array 这种形式

(4)不要使用全局函数。

(5) switch 语句必须带有 default 分支

(6) 函数不应该有时有返回值,有时没有返回值

(7) for 循环必须使用大括号括起来

(8) if语句必须使用大括号括起来

(9) for-in 循环中的变量应该使用 var 关键字明确限定的作用域,从而避免作用域污染


什么是事件代理(事件委托)?

:事件代理( Event Delegation), 又称为事件委托,是JavaScript 中绑定事件的常用技巧。顾名思义,“事件代理”就是把原本需要绑定的事件委托给父元素,让父元素负责事件监听。事件代理的原理是DOM元素的事件冒泡。使用事件代理的好处是可以提高性能。


什么是全局变量?这些变量如何声明?使用全局变 有哪些问题?

:全局变量是整个代码中都可用的变量,也就是说,这些变量没有任何作用域。

var关键字用于声明局部变量,如果省略var关键字,则声明一个全局变量。

使用全局变量面临的问题是局部变量和全局变量名称的冲突。此外,很难调试和测试依赖于全局变量的代码。


哪些操作会造成内存泄漏?

内存泄漏指不再拥有或需要任何对象(数据)之后,它们仍然存在于内存中。

垃圾回收器定期扫描对象,并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为0(没有其他对象引用过该对象),或对该对象的唯一引用是循环的,那么该对象占用的内存立即被回收。

如果setTimeout 的第一个参数使用字符串而非函数,会引发内存泄漏。

闭包、控制台日志、循环(在两个对象彼此引用且彼此保留时,就会产生一个循环)等会造内存泄漏。


bind, call,apply 有什么区别?如何实现一个bind?

call 、apply 、bind 作用是改变函数执行时的上下文,简而言之就是改变函数运行时的this指向


apply

apply接受两个参数,第一个参数是this的指向,第二个参数是函数接受的参数,以数组的形式传入

改变this指向后原函数会立即执行,且此方法只是临时改变this指向一次


function fn(...args){

   console.log(this,args);

}

let obj = {

   myname:"张三"

}


fn.apply(obj,[1,2]); // this会变成传入的obj,传入的参数必须是一个数组;

fn(1,2) // this指向window

1

2

3

4

5

6

7

8

9

当第一个参数为null、undefined的时候,默认指向window(在浏览器中)


call

call方法的第一个参数也是this的指向,后面传入的是一个参数列表

跟apply一样,改变this指向后原函数会立即执行,且此方法只是临时改变this指向一次


function fn(...args){

   console.log(this,args);

}

let obj = {

   myname:"张三"

}


fn.call(obj,1,2); // this会变成传入的obj,传入的参数必须是一个数组;

fn(1,2) // this指向window

1

2

3

4

5

6

7

8

9

同样的,当第一个参数为null、undefined的时候,默认指向window(在浏览器中)


bind

bind方法和call很相似,第一参数也是this的指向,后面传入的也是一个参数列表(但是这个参数列表可以分多次传入)

改变this指向后不会立即执行,而是返回一个永久改变this指向的函数


function fn(...args){

   console.log(this,args);

}

let obj = {

   myname:"张三"

}


const bindFn = fn.bind(obj); // this 也会变成传入的obj ,bind不是立即执行需要执行一次

bindFn(1,2) // this指向obj

fn(1,2) // this指向window

1

2

3

4

5

6

7

8

9

10

小结

从上面可以看到,apply、call、bind三者的区别在于:

★三者都可以改变函数的this对象指向

★三者第一个参数都是this要指向的对象,如果如果没有这个参数或参数为undefined或null,则默认指向全局window

★三者都可以传参,但是apply是数组,而call是参数列表,且apply和call是一次性传入参数,而bind可以分为多次传入

★bind 是返回绑定this之后的函数,apply 、call 则是立即执行


实现bind的步骤,我们可以分解成为三部分:

修改this指向

动态传递参数


// 方式一:只在bind中传递函数参数

fn.bind(obj,1,2)()


// 方式二:在bind中传递函数参数,也在返回函数中传递参数

fn.bind(obj,1)(2)

1

2

3

4

5

整体实现代码如下:


Function.prototype.myBind = function (context) {

   // 判断调用对象是否为函数

   if (typeof this !== "function") {

       throw new TypeError("Error");

   }


   // 获取参数

   const args = [...arguments].slice(1),

         fn = this;


   return function Fn() {


       // 根据调用方式,传入不同绑定值

       return fn.apply(this instanceof Fn ? new fn(...arguments) : context, args.concat(...arguments));

   }

}


目录
相关文章
|
17天前
|
Web App开发 存储 监控
Node.js中的内存泄漏
【8月更文挑战第31天】Node.js中的内存泄漏
35 1
|
24天前
|
JavaScript 前端开发 Java
JavaScript内存泄露大揭秘!你的应用为何频频“爆内存”?点击解锁救星秘籍!
【8月更文挑战第23天】在Web前端开发中,JavaScript是构建动态网页的关键技术。然而,随着应用复杂度增加,内存管理变得至关重要。本文探讨了JavaScript中常见的内存泄露原因,包括意外的全局变量、不当使用的闭包、未清除的定时器、未清理的DOM元素引用及第三方库引发的内存泄露。通过了解这些问题并采取相应措施,开发者可以有效避免内存泄露,提高应用性能。
28 1
|
16天前
|
Java 数据库连接 数据库
从零到精通:揭秘 Hibernate 构建持久层服务的全过程,你离数据持久化大师还有多远?
【8月更文挑战第31天】本文详细介绍了如何从零开始使用 Hibernate 构建一个持久层服务。首先,通过在 Maven 项目中添加必要的依赖,确保项目具备使用 Hibernate 的条件。接着,配置 `hibernate.cfg.xml` 文件以连接 MySQL 数据库,并设置了基本属性。然后定义了一个简单的 `User` 实体类及其映射关系。此外,还创建了一个 `HibernateUtil` 工具类来管理 `SessionFactory`。
27 0
|
18天前
|
缓存 JavaScript 前端开发
Vue.js与JavaScript性能优化终极揭秘:掌握这些技巧,让你的Web应用飞一般地流畅!
【8月更文挑战第30天】随着前端应用复杂度的增加,性能优化变得至关重要。本文深入探讨了如何利用Vue.js和JavaScript实现高效的应用性能。主要内容包括:优化组件设计以减少不必要的渲染,采用异步组件与懒加载技术加速应用启动,利用虚拟滚动和分页处理大数据集,改进Vuex使用方式以及合理运用浏览器缓存等策略。通过具体示例和最佳实践,帮助开发者充分挖掘Vue.js潜力,打造高性能的前端应用。
31 0
|
18天前
|
设计模式 JavaScript 前端开发
从工厂到单例再到策略:Vue.js高效应用JavaScript设计模式
【8月更文挑战第30天】在现代Web开发中,结合使用JavaScript设计模式与框架如Vue.js能显著提升代码质量和项目的可维护性。本文探讨了常见JavaScript设计模式及其在Vue.js中的应用。通过具体示例介绍了工厂模式、单例模式和策略模式的应用场景及其实现方法。例如,工厂模式通过`NavFactory`根据用户角色动态创建不同的导航栏组件;单例模式则通过全局事件总线`eventBus`实现跨组件通信;策略模式用于处理不同的表单验证规则。这些设计模式的应用不仅提高了代码的复用性和灵活性,还增强了Vue应用的整体质量。
13 0
|
18天前
|
JavaScript 前端开发 API
揭秘Vue.js与JavaScript融合的神秘力量:如何一键解锁高效响应式Web应用的终极秘籍?
【8月更文挑战第30天】随着前端技术的发展,Vue.js凭借其轻量级、易上手和高度响应式的特性,在前端开发领域迅速崛起,成为构建现代Web应用的首选框架之一。Vue.js与JavaScript深度融合,使开发者能高效灵活地打造美观且功能强大的应用。本文将作为实战指南,带您深入了解Vue.js与JavaScript结合的奥秘,揭示构建高效响应式Web应用的秘籍。从Vue.js的基础开始,逐步介绍如何利用其数据驱动视图的特点,结合JavaScript的高级特性,如定时器、Promise、async/await等,提升应用的交互性和用户体验。
10 0
|
4月前
|
JavaScript 前端开发
JavaScript中call()与apply()的作用与区别?
JavaScript中call()与apply()的作用与区别?
|
3月前
|
JavaScript 前端开发 开发者
【JavaScript】JavaScript中call、apply与bind的区别:进阶特性与应用场景
【JavaScript】JavaScript中call、apply与bind的区别:进阶特性与应用场景
38 0
|
4月前
|
前端开发 JavaScript
【Web 前端】 js中call、apply、bind有什么区别?
【4月更文挑战第22天】【Web 前端】 js中call、apply、bind有什么区别?
【Web 前端】 js中call、apply、bind有什么区别?
|
4月前
|
JavaScript 前端开发
JavaScript中call()与apply()的作用与区别?
JavaScript中call()与apply()的作用与区别?
63 2

热门文章

最新文章