当前位置: 首页 > news >正文

js 5秒钟后执行某个函数_前端面试题: (JavaScript 第5期)

eb45e8d62162d660b7fa3389a15dd6c5.png 1995cd9d35a2abe30fd9deb66132fc07.png

每期10个面试题,每天更新一期基础,持续15天后,推送框架类面试题(如:css,vue,node,webpack,less,react,reactNactive,php等),点击公众号查看其他语言基础

71c6d814bd13ef8eafd324177bedf565.png 2af41eaa5e63e40f9ee1b9d97cbb9826.png b7fcb9e04eb82c576a80ffda3227baa9.png

1.网页三种事件模型是什么?

86937490f50a4be41ab7ad398e662590.png 5397a189e42cbea8c3779369b0346d48.gif d0500c528b8fc419b876594f48fe79c0.gif

    事件是用户操作网页时发生的交互动作或者网页本身的一些操作,现代浏览器一共有三种事 件模型。 

    第一种事件模型是最早的 DOM 0级模型,这种模型不会传播,所以没有事件流的概念,但是现 在有的浏览器支持以冒泡的方式实现,它可以在网页中直接定义监听函数,也可以通过 js 属 性来指定监听函数。这种方式是所有浏览器都兼容的。 

    第二种事件模型是 IE 事件模型,在该事件模型中,一次事件共有两个过程,事件处理阶段, 和事件冒泡阶段。事件处理阶段会首先执行目标元素绑定的监听事件。然后是事件冒泡阶段,冒 泡指的是事件从目标元素冒泡到 document,依次检查经过的节点是否绑定了事件监听函数,如 果有则执行。这种模型通过 attachEvent 来添加监听函数,可以添加多个监听函数,会按顺 序依次执行。 

    第三种是 DOM2 级事件模型,在该事件模型中,一次事件共有三个过程,第一个过程是事件捕 获阶段。捕获指的是事件从 document 一直向下传播到目标元素,依次检查经过的节点是否绑 定了事件监听函数,如果有则执行。后面两个阶段和 IE 事件模型的两个阶段相同。这种事件 模型,事件绑定的函数是 addEventListener,其中第三个参数可以指定事件是否在捕获阶段 执行。  。

b7fcb9e04eb82c576a80ffda3227baa9.png

2. 事件委托是什么?

86937490f50a4be41ab7ad398e662590.png 5397a189e42cbea8c3779369b0346d48.gif d0500c528b8fc419b876594f48fe79c0.gif

      事件委托本质上是利用了浏览器事件冒泡的机制。因为事件在冒泡过程中会上传到父节点, 并且父节点可以通过事件对象获取到目标节点,因此可以把子节点的监听函数定义在父节点上, 由父节点的监听函数统一处理多个子元素的事件,这种方式称为事件代理。

    使用事件代理我们可以不必要为每一个子元素都绑定一个监听事件,这样减少了内存上的消耗。并且使用事件代理我 们还可以实现事件的动态绑定,比如说新增了一个子节点,我们并不需要单独地为它添加一个监 听事件,它所发生的事件会交给父元素中的监听函数来处理。

b7fcb9e04eb82c576a80ffda3227baa9.png

3. ["1", "2", "3"].map(parseInt) 答案是多少?

86937490f50a4be41ab7ad398e662590.png 5397a189e42cbea8c3779369b0346d48.gif d0500c528b8fc419b876594f48fe79c0.gif

    parseInt() 函数能解析一个字符串,并返回一个整数,需要两个参数 (val, radix),其中 radix 表示要解析的数字的基数。(该值介于 2 ~ 36 之间,并且字符串中的数字不能大于 radix 才能正确返回数字结果值)。

    此处 map 传了 3 个参数 (element, index, array), 默认第三个参数被忽略掉,因此三次传入的参数分别为 "1-0", "2-1", "3-2" 因为字符串的值不能大于基数,因此后面两次调用均失败,返回 NaN ,第一次基数为 0 ,按 十进制解析返回 1。

b7fcb9e04eb82c576a80ffda3227baa9.png

4.什么是闭包,为什么要用它?

86937490f50a4be41ab7ad398e662590.png 5397a189e42cbea8c3779369b0346d48.gif d0500c528b8fc419b876594f48fe79c0.gif

    闭包是指有权访问另一个函数作用域中变量的函数,创建闭包的最常见的方式就是在一个函 数内创建另一个函数,创建的函数可以访问到当前函数的局部变量。

    闭包有两个常用的用途:

        闭 包的第一个用途是使我们在函数外部能够访问到函数内部的变量。通过使用闭包,我们可以通过 在外部调用闭包函数,从而在外部访问到函数内部的变量,可以使用这种方法来创建私有变量。 

        函数的另一个用途是使已经运行结束的函数上下文中的变量对象继续留在内存中,因为闭包函数 保留了这个变量对象的引用,所以这个变量对象不会被回收。其实闭包的本质就是作用域链的一个特殊的应用,只要了解了作用域链的创建过程,就能够理解闭包的实现原理。

b7fcb9e04eb82c576a80ffda3227baa9.png

5.javascript 代码中的 "use strict"; 是什么意思 ? 使用它区别是什么?

86937490f50a4be41ab7ad398e662590.png 5397a189e42cbea8c3779369b0346d48.gif d0500c528b8fc419b876594f48fe79c0.gif
use strict 是一种 ECMAscript5 添加的(严格)运行模式,这种模式使得 Javascript 在 更严格的条件下运行。设立"严格模式"的目的,主要有以下几个:

   (1) 消除 Javascript 语法的一些不合理、不严谨之处,减少一些怪异行为; 

   (2)消除代码运行的一些不安全之处,保证代码运行的安全;

   (3)提高编译器效率,增加运行速度;

   (4)为未来新版本的 Javascript 做好铺垫。

    区别:

        1.禁止使用 with 语句。

        2.禁止 this 关键字指向全局对象。

        3.对象不能有重名的属性

        use strict 指的是严格运行模式,在这种模式对 js 的使用添加了一些限制。比如说禁 止 this 指向全局对象,还有禁止使用 with 语句等。设立严格模式的目的,主要是为了消除 代码使用中的一些不安全的使用方式,也是为了消除 js 语法本身的一些不合理的地方,以此 来减少一些运行时的怪异的行为。

        同时使用严格运行模式也能够提高编译的效率,从而提高代码 的运行速度。我认为严格模式代表了 js 一种更合理、更安全、更严谨的发展方向

b7fcb9e04eb82c576a80ffda3227baa9.png

6.如何判断一个对象是否属于某个类?

86937490f50a4be41ab7ad398e662590.png 5397a189e42cbea8c3779369b0346d48.gif d0500c528b8fc419b876594f48fe79c0.gif

        第一种方式是使用 instanceof 运算符来判断构造函数的 prototype 属性是否出现在对 象的原型链中的任何位置。

        第二种方式可以通过对象的 constructor 属性来判断,对象的 constructor 属性指向 该对象的构造函数,但是这种方式不是很安全,因为 constructor 属性可以被改写。

        第三种方式,如果需要判断的是某个内置的引用类型的话,可以使用 Object.prototype.toString() 方法来打印对象的 [[Class]] 属性来进行判断。。

b7fcb9e04eb82c576a80ffda3227baa9.png

7.instanceof 的作用?

86937490f50a4be41ab7ad398e662590.png 5397a189e42cbea8c3779369b0346d48.gif d0500c528b8fc419b876594f48fe79c0.gif
// instanceof 运算符用于判断构造函数的 prototype 属性是否出现在对象的原型链中的任何位置。// 实现: function myInstanceof(left, right) {    let proto = Object.getPrototypeOf(left),    // 获取对象的原型    prototype = right.prototype;    // 获取构造函数的 prototype 对象    // 判断构造函数的 prototype 对象是否在对象的原型链上    while (true) {      if (!proto) return false;     if (proto === prototype) return true;      proto = Object.getPrototypeOf(proto);    }   }          
b7fcb9e04eb82c576a80ffda3227baa9.png

8.new 操作符具体干了什么呢?如何实现?

86937490f50a4be41ab7ad398e662590.png 5397a189e42cbea8c3779369b0346d48.gif d0500c528b8fc419b876594f48fe79c0.gif
// (1)首先创建了一个新的空对象// (2)设置原型,将对象的原型设置为函数的 prototype 对象。// (3)让函数的 this 指向这个对象,执行构造函数的代码(为这个新对象添加属性) // (4)判断函数的返回值类型,如果是值类型,返回创建的对象。如果是引用类型,就返回 这个引用类型的对象。// 实现:   function objectFactory() {     let newObject = null,     constructor = Array.prototype.shift.call(arguments),     result = null;     // 参数判断     if (typeof constructor !== "function") {       console.error("type error");       return;     }    // 新建一个空对象,对象的原型为构造函数的 prototype 对象     newObject = Object.create(constructor.prototype);     // 将 this 指向新建对象,并执行函数     result = constructor.apply(newObject, arguments);     // 判断返回对象      let flag = result && (typeof result === "object" || typeof result === "function");     // 判断返回结果      return flag ? result : newObject;     }      // 使用方法          objectFactory(构造函数, 初始化参数);   
b7fcb9e04eb82c576a80ffda3227baa9.png

9.Javascript 中,有一个函数,执行时对象查找时,永远不会去查找原型, 这个函数是?

86937490f50a4be41ab7ad398e662590.png 5397a189e42cbea8c3779369b0346d48.gif d0500c528b8fc419b876594f48fe79c0.gif

        hasOwnProperty 所有继承了 Object 的对象都会继承到 hasOwnProperty 方法。

        这个方法可以用来检测一个对 象是否含有特定的自身属性,和 in 运算符不同,该方法会忽略掉那些从原型链上继承到的属性。

b7fcb9e04eb82c576a80ffda3227baa9.png

10.对于 JSON 的了解?

86937490f50a4be41ab7ad398e662590.png 5397a189e42cbea8c3779369b0346d48.gif d0500c528b8fc419b876594f48fe79c0.gif

    JSON 是一种数据交换格式,基于文本,优于轻量,用于交换数据。    JSON 可以表示数字、布尔值、字符串、null、数组(值的有序序列),以及由这些值(或数组、 对象)所组成的对象(字符串与值的映射)。 

    JSON 使用 JavaScript 语法,但是 JSON 格式仅仅是一个文本。文本可以被任何编程语言读 取及作为数据格式传递。

    回答:    

        格式来传递。在项目开发中,我们使用 JSON 作为前后端数据交换的方式。在前端我们通过将 一个符合 JSON 格式的数据结构序列化为 JSON 字符串,然后将它传递到后端,后端通过 JSON 格式的字符串解析后生成对应的数据结构,以此来实现前后端数据的一个传递。因为 JSON 的 语法是基于 js 的,因此很容易将 JSON 和 js 中的对象弄混,但是我们应该注意的是 JSON 和 js 中的对象不是一回事,JSON 中对象格式更加严格,比如说在 JSON 中属性值不能为函数, 不能出现 NaN 这样的属性值等,因此大多数的 js 对象是不符合 JSON 对象的格式的。 

    在 js 中提供了两个函数来实现 js 数据结构和 JSON 格式的转换处理,一个是 JSON.stringify 函数,通过传入一个符合 JSON 格式的数据结构,将其转换为一个 JSON 字 符串。如果传入的数据结构不符合 JSON 格式,那么在序列化的时候会对这些值进行对应的特 殊处理,使其符合规范。

    在前端向后端发送数据时,我们可以调用这个函数将数据对象转化为 JSON 格式的字符串。另一个函数 JSON.parse() 函数,这个函数用来将 JSON 格式的字符串转换为一个 js 数 据结构,如果传入的字符串不是标准的 JSON 格式的字符串的话,将会抛出错误。当我们从后 端接收到 JSON 格式的字符串时,我们可以通过这个方法来将其解析为一个 js 数据结构,以 此来进行数据的访问。

 

点击上方蓝字,我们一起过圣诞

9f57bc3796ea14cebe5c2dcc7c2a0701.png

相关文章:

  • SRA数据库及其数据的下载
  • wps如何在目录里面打省略号_Word中如何引用?3个实用小技巧帮你工作效率翻倍!...
  • asp.net图书管理系统源码_[源码和文档分享]基于B树实现的图书管理系统
  • SRA下载到分析
  • 多个子流程_协程工作流程的实现
  • Permission denied
  • wps交叉表_WPS文字小工具大用途—交叉引用的使用方法
  • 使用Trinity进行转录组组装
  • linux ssh连接交换机_【交换机】交换机如何配置ssh管理
  • python股票分析入门_学习用Python分析股票数据(入门)
  • Aspera 下载_SRA原始数据下载
  • keil5怎么配置程序风格_分享一个在Keil开发环境中配置代码格式化工具Astyle(美化代码风格)...
  • 01-rna-seq从头开始 卖萌哥
  • bc伐木机器人_BC教程之自动合成_我的世界BCmod教程 BCmod怎么玩__ 单机攻略_跑跑车单机游戏网...
  • FastQC或Trimmomatic去接头,低质量碱基
  • python3.6+scrapy+mysql 爬虫实战
  • 【跃迁之路】【477天】刻意练习系列236(2018.05.28)
  • Angular6错误 Service: No provider for Renderer2
  • crontab执行失败的多种原因
  • ES6, React, Redux, Webpack写的一个爬 GitHub 的网页
  • ES6系统学习----从Apollo Client看解构赋值
  • Spring思维导图,让Spring不再难懂(mvc篇)
  • 给新手的新浪微博 SDK 集成教程【一】
  • 关于Flux,Vuex,Redux的思考
  • 基于遗传算法的优化问题求解
  • 记一次删除Git记录中的大文件的过程
  • 今年的LC3大会没了?
  • 浅谈Golang中select的用法
  • 设计模式(12)迭代器模式(讲解+应用)
  • 微信开源mars源码分析1—上层samples分析
  • 小程序测试方案初探
  • 译自由幺半群
  • 【运维趟坑回忆录 开篇】初入初创, 一脸懵
  • ​HTTP与HTTPS:网络通信的安全卫士
  • ​软考-高级-信息系统项目管理师教程 第四版【第19章-配置与变更管理-思维导图】​
  • #数学建模# 线性规划问题的Matlab求解
  • $GOPATH/go.mod exists but should not goland
  • (4) PIVOT 和 UPIVOT 的使用
  • (k8s中)docker netty OOM问题记录
  • (办公)springboot配置aop处理请求.
  • (笔试题)合法字符串
  • (附源码)springboot 房产中介系统 毕业设计 312341
  • (算法设计与分析)第一章算法概述-习题
  • (小白学Java)Java简介和基本配置
  • (一)Dubbo快速入门、介绍、使用
  • (转)创业家杂志:UCWEB天使第一步
  • (转)视频码率,帧率和分辨率的联系与区别
  • .NET Framework 3.5中序列化成JSON数据及JSON数据的反序列化,以及jQuery的调用JSON
  • .NET Reactor简单使用教程
  • .Net Remoting常用部署结构
  • .net websocket 获取http登录的用户_如何解密浏览器的登录密码?获取浏览器内用户信息?...
  • .net6解除文件上传限制。Multipart body length limit 16384 exceeded
  • .net中我喜欢的两种验证码
  • .xml 下拉列表_RecyclerView嵌套recyclerview实现二级下拉列表,包含自定义IOS对话框...
  • :=