0

0

JavaScrip的常见面试题及答案总结

不言

不言

发布时间:2018-12-11 09:58:48

|

2422人浏览过

|

来源于segmentfault

转载

本篇文章给大家带来的内容是关于javascrip的常见面试题及答案总结,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

一、请解释 JavaScript 中 this 是如何工作的。

首先:this 永远指向函数运行时所在的对象,而不是函数被创建时所在的对象。匿名函数或不处于任何对象中的函数指向 window 。

1、 方法调用模式

当函数被保存为对象的一个属性时,成该函数为该对象的方法。函数中this的值为该对象。

立即学习Java免费学习笔记(深入)”;

var foo = {
    name: 'fooname',
    getName: function (){
        return this.name  
    }
}
foo.getName();  // this => foo

2、 函数调用模式

当函数并不是对象的属性。函数中this的值为全局对象
note:某个方法中的内部函数中的this的值也是全局对象,而非外部函数的this

function foo(){
    this.name = 'fooname';  
}
foo();  // this => window

3、构造器调用模式

即使用new调用的函数,则其中this将会被绑定到那个新构造的对象。

function Foo(){
    this.name = 'fooname';
}
var foo = new Foo();  // this => foo

4、使用apply或call调用模式

该模式调用时,函数中this被绑定到apply或call方法调用时接受的第一个参数。

function getName(name){
    this.name = name;
}
var foo = {};
getName.call(foo, name);  // this =>foo

改变this的值主要方法(目前想到的,欢迎评论添加):
apply或call方法调用时强制修改,使this指向第一个参数。
使用Function.bind方法创造新的函数,该新函数的中this指向所提供的第一个参数。

二、请解释原型继承 (prototypal inheritance) 的原理。

JavaScript没有“子类”和“父类”的概念,也没有“类”(class)和“实例”(instance)的区分,全靠“原型链”(prototype chain)模式,来实现继承。

每个函数Sub都有一个属性prototype,prototype指向一个原型对象,原型对象中也有一个指向函数的属性constructor,通过new一个函数Sub可以产生实例instance,调用这个instance的某个属性或方法时,instance会先查找自身是否有这个方法或者属性,没有的话就会去实例的构造函数Sub的原型prototype中查找,即Sub.prototype,如果给原型对象Sub.prototype赋予另一个类型的实例superInstance,则是在superInstance中查找的,这个superInstance中也有属性prototype指向某个原型对象,以此一级级往上最终到Object.prototype,这样就形成了原型继承。

利用此原理可以自己实现一个inherits函数:

function inherits(subType, superType){
    var _prototype = Object.create(superType.prototype);
    _prototype.constructor = subType;
    subType.prototype = _prototype;
}

三、解释为什么接下来这段代码不是 IIFE (立即调用的函数表达式):function foo(){ }(); 要做哪些改动使它变成 IIFE?

(function fn(){..})(),函数被包含在一个括号内,变成为一个表达式,随后跟着一个(),就立即执行这个函数。

IIFE的一些作用:

  1. 创建作用域,内部保存一些大量临时变量的代码防止命名冲突。

  2. 一些库的外层用这种形式包起来防止作用域污染。

  3. 运行一些只执行一次的代码。

四、(function fn(){..})(),函数被包含在一个括号内,变成为一个表达式,随后跟着一个(),就立即执行这个函数。

IIFE的一些作用:

  1. 创建作用域,内部保存一些大量临时变量的代码防止命名冲突。

  2. 一些库的外层用这种形式包起来防止作用域污染。

  3. 运行一些只执行一次的代码。

当某个函数调用时会创建一个执行环境以及作用域链,然后根据arguments和其它命名参数初始化形成活动对象。在外部函数调用结束后,其执行环境与作用域链被销毁,但是其活动对象保存在了闭包之中,最后在闭包函数调用结束后才销毁。简单的说,闭包就是能够读取其他函数内部变量的函数。在js中,闭包是指有权访问另一个函数作用域中的变量的函数。

如何使用:将A函数内部的B函数作为A函数的返回值返回。

为什么要:

1、匿名自执行函数

有的场景下函数只需要执行一次,例如init()之类的函数,其内部变量无需维护,我们可以使用闭包。 我们创建了一个匿名的函数,并立即执行它,由于外部无法引用它内部的变量,因此在函数执行完后会立刻释放资源,而且不污染全局对象。

2、封装

模拟面向对象的代码风格进行封装,使私有属性存在成为可能。

五、.call 和 .apply 的区别是什么?

.call和.apply的共同点是都是用来改变函数体内this对象的值。

区别是第二个参数不一样。apply()的第二个参数是一个类数组对象arguments,参数都是以数组的形式传入,而call(),传递给他的是一系列参数。例如

Math.max.call(null, 1, 2, 3, 4);
//4

Math.max.apply(null, [1, 2, 3, 4]);
//4

六、请解释 Function.prototype.bind?

Function.prototype.bind方法会创建一个新函数,当这个新函数被调用时,它的this值是传递给bind()的第一个参数, 它的参数是bind()的其他参数和其原本的参数.

七、请指出 JavaScript 宿主对象 (host objects) 和原生对象 (native objects) 的区别?

宿主对象是指DOM和BOM。
原生对象是Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、Math等对象。

八、请指出以下代码的区别:function Person(){}、var person = Person()、var person = new Person()?

function Person(){}

声明一个函数Person()。

var person = Person()

将函数Person()的结果返回给变量person,如果没有返回值则person为undefined。

var person = new Person()

new一个Person的实例对象。

九、请尽可能详尽的解释 Ajax 的工作原理。以及使用 Ajax 都有哪些优劣?

Ajax是无需刷新页面就能从服务器取得数据的一种方法。

Ajax通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM更新页面。

过程

  1. 创建XMLHttpRequest对象。

  2. 设置响应HTTP请求的回调函数。

  3. 创建一个HTTP请求,指定相应的请求方法、url等。

  4. 发送HTTP请求。

  5. 获取服务器端返回的数据。

  6. 使用JavaScript操作DOM更新页面。

缺点

  1. 对搜索引擎不友好

  2. 要实现Ajax下的前后退功能成本较大

  3. 跨域问题限制

    Texta
    Texta

    AI博客和文章一键生成

    下载

十、请解释变量声明提升 (hoisting)。

变量的声明前置就是把变量的声明提升到当前作用域的最前面。
函数的声明前置就是把整个函数提升到当前作用域的最前面(位于前置的变量声明后面)。

//变量的声明前置
console.log(num);//undefined
var num = 1;

等价于

//变量的声明前置
var num;
console.log(num);//undefined
num = 1;

十一、请描述事件冒泡机制 (event bubbling)。

事件冒泡(event bubbling),事件最开始时由触发的那个元素身上发生,然后沿着DOM树向上传播,直到document对象。如果想阻止事件起泡,可以使用e.stopPropagation()。

十二、什么是 “use strict”; ? 使用它的好处和坏处分别是什么?

优点

消除Javascript语法的一些不严谨之处,减少一些怪异行为;
消除代码运行的一些不安全之处,保证代码运行的安全;
提高编译器效率,增加运行速度;
为未来新版本的Javascript做好铺垫。

缺点

严格模式改变了语义。依赖这些改变可能会导致没有实现严格模式的浏览器中出现问题或者错误。

十三、请解释 JavaScript 的同源策略 (same-origin policy)。

同源策略限制了一个源(origin)中加载文本或脚本与来自其它源(origin)中资源的交互方式。同源指的是协议、域名、端口相同,同源策略是一种安全协议。

十四、请解释 JSONP 的工作原理,以及它为什么不是真正的 Ajax。

JSONP(JSON with Padding)是一种非官方跨域数据交互协议,它允许在服务器端集成标签返回至客户端,通过javascript回调的形式实现跨域访问。

因为同源策略的原因,我们不能使用XMLHttpRequest与外部服务器进行通信,但是可以访问外部资源,所以通过JSON与相结合的办法,可以绕过同源策略从外部服务器直接取得可执行的JavaScript函数。

原理

客户端定义一个函数,比如jsonpCallback,然后创建,src为url + ?jsonp=jsonpCallback这样的形式,之后服务器会生成一个和传递过来jsonpCallback一样名字的参数,并把需要传递的数据当做参数传入,比如jsonpCallback(json),然后返回给客户端,此时客户端就执行了这个服务器端返回的jsonpCallback(json)回调。

通俗的说,就是客户端定义一个函数然后请求,服务器端返回的javascript内容就是调用这个函数,需要的数据都当做参数传入这个函数了。

优点 - 兼容性好,简单易用,支持浏览器与服务器双向通信
缺点 - 只支持GET请求;存在脚本注入以及跨站请求伪造等安全问题

补充一点,JSONP不使用XMLHttpRequest对象加载资源,不属于真正意义上的AJAX。

十五、== 和 === 有什么不同?

通俗的说就是===比==要更为严格,===比较过程中没有任何的类型转换。

十六、什么是三元表达式 (Ternary expression)?“三元 (Ternary)” 表示什么意思?

如名字表示的三元运算符需要三个操作数。
语法是
条件 ? 结果1 : 结果2;
这里你把条件写在问号(?)的前面后面跟着用冒号(:)分隔的结果1和结果2。满足条件时结果1否则结果2。

十七、你怎么看 AMD vs. CommonJS?

浏览器端异步和服务器端同步的模块化编程规范

十八、请举出一个匿名函数的典型用例?

定义回调函数,立即执行函数,作为返回值的函数,使用方法var foo = function() {}定义的函数。

十九、描述以下变量的区别:null,undefined 或 undeclared?该如何检测它们?

未定义的属性、定义未赋值的为undefined,JavaScript访问不会报错;null是一种特殊的object;NaN是一种特殊的number;undeclared 是未声明也未赋值的变量,JavaScript访问会报错。

二十、在什么时候你会使用 document.write()?

DOM方法,可向文档写入 HTML 表达式或 JavaScript 代码。

二十一、如何实现下列代码:[1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5]

Array.prototype.duplicator = function(){
  var l = this.length,i;
  for(i=0;i<l;i++){
   this.push(this[i]) 
   }
}

二十二、解释 function foo() {} 与 var foo = function() {} 用法的区别

函数声明的两种方法:

  1. var foo = function () {}

这种方式是声明了个变量,而这个变量是个方法,变量在js中是可以改变的。
也:将一个匿名函数赋值给了变量。

  1. function foo() {}

这种方式是声明了个方法,foo这个名字无法改变

二十三、请解释可变 (mutable) 和不变 (immutable) 对象的区别。

在 JavaScript 中,对象是引用类型的数据,其优点在于频繁的修改对象时都是在原对象的基础上修改,并不需要重新创建,这样可以有效的利用内存,不会造成内存空间的浪费,对象的这种特性可以称之为 Mutable,中文的字面意思是「可变」。

Immutable 从字面上翻译成中文是「不可变」。每次修改一个 Immutable 对象时都会创建一个新的不可变的对象,在新对象上操作并不会影响到原对象的数据。

二十四、使用 Promises 而非回调 (callbacks) 优缺点是什么?

Promise是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现,ES6将其写进了语言标准,统一了用法,原生提供了Promise对象。

所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise是一个对象,从它可以获取异步操作的消息。Promise提供统一的API,各种异步操作都可以用同样的方法进行处理。

有了Promise对象,就可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。此外,Promise对象提供统一的接口,使得控制异步操作更加容易。

Promise也有一些缺点。

首先,无法取消Promise,一旦新建它就会立即执行,无法中途取消。
其次,如果不设置回调函数,Promise内部抛出的错误,不会反应到外部。
第三,当处于Pending状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)。

二十五、请解释同步 (synchronous) 和异步 (asynchronous) 函数的区别。

同步调用,在发起一个函数或方法调用时,没有得到结果之前,该调用就不返回,直到返回结果;

异步调用的概念和同步相对,在一个异步调用发起后,被调用者立即返回给调用者,但调用者不能立刻得到结果,被调用者在实际处理这个调用的请求完成后,通过状态、通知或回调等方式来通知调用者请求处理的结果。

简单地说,同步就是发出一个请求后什么事都不做,一直等待请求返回后才会继续做事;异步就是发出请求后继续去做其他事,这个请求处理完成后会通知你,这时候就可以处理这个回应了。

二十六、你使用哪些工具和技术来调试 JavaScript 代码?

1.javascript的debugger语句
需要调试js的时候,我们可以给需要调试的地方通过debugger打断点,代码执行到断点就会暂定,这时候通过单步调试等方式就可以调试js代码

if (waldo) {
    debugger;
}

这时候打开console面板,就可以调试了

2.DOM断点
DOM断点是一个Firebug和chrome DevTools提供的功能,当js需要操作打了断点的DOM时,会自动暂停,类似debugger调试。
使用DOM断点步骤:
选择你要打断点的DOM节点
右键选择Break on..
选择断点类型

另外的调试方法例如alert, console.log,查看元素等就不再赘述了。

二十七、你会使用怎样的语言结构来遍历对象属性 (object properties) 和数组内容?

for in 语句
一般for循环
数组forEach方法

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
JavaScript浏览器渲染机制与前端性能优化实践
JavaScript浏览器渲染机制与前端性能优化实践

本专题围绕 JavaScript 在浏览器中的执行与渲染机制展开,系统讲解 DOM 构建、CSSOM 解析、重排与重绘原理,以及关键渲染路径优化方法。内容涵盖事件循环机制、异步任务调度、资源加载优化、代码拆分与懒加载等性能优化策略。通过真实前端项目案例,帮助开发者理解浏览器底层工作原理,并掌握提升网页加载速度与交互体验的实用技巧。

23

2026.03.06

Rust内存安全机制与所有权模型深度实践
Rust内存安全机制与所有权模型深度实践

本专题围绕 Rust 语言核心特性展开,深入讲解所有权机制、借用规则、生命周期管理以及智能指针等关键概念。通过系统级开发案例,分析内存安全保障原理与零成本抽象优势,并结合并发场景讲解 Send 与 Sync 特性实现机制。帮助开发者真正理解 Rust 的设计哲学,掌握在高性能与安全性并重场景中的工程实践能力。

68

2026.03.05

PHP高性能API设计与Laravel服务架构实践
PHP高性能API设计与Laravel服务架构实践

本专题围绕 PHP 在现代 Web 后端开发中的高性能实践展开,重点讲解基于 Laravel 框架构建可扩展 API 服务的核心方法。内容涵盖路由与中间件机制、服务容器与依赖注入、接口版本管理、缓存策略设计以及队列异步处理方案。同时结合高并发场景,深入分析性能瓶颈定位与优化思路,帮助开发者构建稳定、高效、易维护的 PHP 后端服务体系。

162

2026.03.04

AI安装教程大全
AI安装教程大全

2026最全AI工具安装教程专题:包含各版本AI绘图、AI视频、智能办公软件的本地化部署手册。全篇零基础友好,附带最新模型下载地址、一键安装脚本及常见报错修复方案。每日更新,收藏这一篇就够了,让AI安装不再报错!

84

2026.03.04

Swift iOS架构设计与MVVM模式实战
Swift iOS架构设计与MVVM模式实战

本专题聚焦 Swift 在 iOS 应用架构设计中的实践,系统讲解 MVVM 模式的核心思想、数据绑定机制、模块拆分策略以及组件化开发方法。内容涵盖网络层封装、状态管理、依赖注入与性能优化技巧。通过完整项目案例,帮助开发者构建结构清晰、可维护性强的 iOS 应用架构体系。

113

2026.03.03

C++高性能网络编程与Reactor模型实践
C++高性能网络编程与Reactor模型实践

本专题围绕 C++ 在高性能网络服务开发中的应用展开,深入讲解 Socket 编程、多路复用机制、Reactor 模型设计原理以及线程池协作策略。内容涵盖 epoll 实现机制、内存管理优化、连接管理策略与高并发场景下的性能调优方法。通过构建高并发网络服务器实战案例,帮助开发者掌握 C++ 在底层系统与网络通信领域的核心技术。

29

2026.03.03

Golang 测试体系与代码质量保障:工程级可靠性建设
Golang 测试体系与代码质量保障:工程级可靠性建设

Go语言测试体系与代码质量保障聚焦于构建工程级可靠性系统。本专题深入解析Go的测试工具链(如go test)、单元测试、集成测试及端到端测试实践,结合代码覆盖率分析、静态代码扫描(如go vet)和动态分析工具,建立全链路质量监控机制。通过自动化测试框架、持续集成(CI)流水线配置及代码审查规范,实现测试用例管理、缺陷追踪与质量门禁控制,确保代码健壮性与可维护性,为高可靠性工程系统提供质量保障。

79

2026.02.28

Golang 工程化架构设计:可维护与可演进系统构建
Golang 工程化架构设计:可维护与可演进系统构建

Go语言工程化架构设计专注于构建高可维护性、可演进的企业级系统。本专题深入探讨Go项目的目录结构设计、模块划分、依赖管理等核心架构原则,涵盖微服务架构、领域驱动设计(DDD)在Go中的实践应用。通过实战案例解析接口抽象、错误处理、配置管理、日志监控等关键工程化技术,帮助开发者掌握构建稳定、可扩展Go应用的最佳实践方法。

62

2026.02.28

Golang 性能分析与运行时机制:构建高性能程序
Golang 性能分析与运行时机制:构建高性能程序

Go语言以其高效的并发模型和优异的性能表现广泛应用于高并发、高性能场景。其运行时机制包括 Goroutine 调度、内存管理、垃圾回收等方面,深入理解这些机制有助于编写更高效稳定的程序。本专题将系统讲解 Golang 的性能分析工具使用、常见性能瓶颈定位及优化策略,并结合实际案例剖析 Go 程序的运行时行为,帮助开发者掌握构建高性能应用的关键技能。

51

2026.02.28

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Node.js 教程
Node.js 教程

共57课时 | 12.8万人学习

CSS3 教程
CSS3 教程

共18课时 | 6.7万人学习

Vue 教程
Vue 教程

共42课时 | 9.3万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号