前端开发面试题之 JavaScript（二）

最新推荐文章于 2024-09-11 18:04:04 发布

Hello，C++！

最新推荐文章于 2024-09-11 18:04:04 发布

阅读量305

点赞数

[“1”,“2”,“3”].map(parseInt) 的答案是多少？

[1,NaN,NaN]
因为 parseInt 需要两个参数(val,radix)，其中 radix 表示解析时用的基数。
map 传了3个(element,index,array)，对应的 radix 不合法导致解析失败。

事件是什么？IE与火狐的事件机制有何区别？如何阻止冒泡？

(1)我们在网页中的某个操作（有的操作对应多个事件）。例如：当我们点击一个按钮就会产生一个事件。是可以被 JavaScript 侦测到的行为。
(2)事件处理机制：IE是事件冒泡、Firefox同时支持两种事件模型，也就是：捕获型事件和冒泡型事件；
(3)ev.stopPropagation();（旧ie的方法 ev.cancelBubble = true;）

什么是闭包(closure)，为什么要用它？

闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量，利用闭包可以突破作用链域，将函数内部的变量和方法传递到外部。
//
闭包特性：
(1)函数内再嵌套函数
(2)内部函数可以引用外层的参数和变量
(3)参数和变量不会被垃圾回收机制回收
//li节点的onclick事件都能正确的弹出当前被点击的li索引
<ul>
    <li> index = 0 </li>
    <li> index = 1 </li>
    <li> index = 2 </li>
    <li> index = 3 </li>
</ul>
<script type="text/javascript">
    var nodes = document.getElementsByTagName('li');
    for(i = 0;i<nodes.length;i+=1) {
        nodes[i].onclick = function() {
            console.log(i+1); //不使用闭包的话，值每次都是4
        }(4);
    }
</script>

JavaScript 代码中的 “use strict”; 是什么意思？使用它的区别是什么？

use strict是一种ECMAscript 5 添加的（严格）运行模式,这种模式使得 Javascript 在更严格的条件下运行,使JS编码更加规范化的模式,消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为。
默认支持的糟糕特性都会被禁用，比如不能用with，也不能在意外的情况下给全局变量赋值;
全局变量的显示声明,函数必须声明在顶层，不允许在非函数代码块内声明函数,arguments.callee也不允许使用；
消除代码运行的一些不安全之处，保证代码运行的安全,限制函数中的arguments修改，严格模式下的eval函数的行为和非严格模式的也不相同;
提高编译器效率，增加运行速度；
为未来新版本的Javascript标准化做铺垫。

new 操作符具体干了什么呢？

(1)创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
(2)属性和方法被加入到 this 引用的对象中。
(3)新创建的对象由 this 所引用，并且最后隐式的返回 this 。
//
var obj = {};
obj.__proto__ = Base.prototype;
Base.call(obj);

用原生的 JavaScript 实现过什么功能吗？
JavaScript 中，有一个函数，执行对象查找时，永远不会去查找原型，这个函数是哪个？

hasOwnProperty
//
JavaScript 中 hasOwnProperty 函数方法是返回一个布尔值，指出一个对象是否具有指定名称的属性。此方法无法检查该对象的原型链中是否具有该属性；该属性必须是对象本身的一个成员。
//
使用方法：
object.hasOwnProperty(proName)
其中参数object是必选项，一个对象的实例。
proName是必选项，一个属性名称的字符串值。
//
如果 object 具有指定名称的属性，那么JavaScript中hasOwnProperty函数方法返回 true，反之则返回 false。

你对 JSON 了解吗？

JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。
它是基于JavaScript的一个子集。数据格式简单，易于读写，占用带宽小。
如：
{"age":"12", "name":"back"}

js延迟加载的方式有哪些？

defer和async、动态创建DOM方式（用得最多）、按需异步载入js

Ajax 是什么？如何创建一个 Ajax ？

ajax的全称：Asynchronous Javascript And XML。
异步传输+js+xml。
所谓异步，在这里简单地解释就是：向服务器发送请求的时候，我们不必等待结果，而是可以同时做其他的事情，等到有了结果它自己会根据设定进行后续操作，与此同时，页面是不会发生整页刷新的，提高了用户体验。
//
(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象
(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
(3)设置响应HTTP请求状态变化的函数
(4)发送HTTP请求
(5)获取异步调用返回的数据
(6)使用JavaScript和DOM实现局部刷新

同步和异步的区别？

同步的概念应该是来自于操作系统中关于同步的概念:
不同进程为协同完成某项工作而在先后次序上调整(通过阻塞,唤醒等方式)。同步强调的是顺序性，谁先谁后；异步则不存在这种顺序性。
//
同步：浏览器访问服务器请求，用户看得到页面刷新，重新发请求,等请求完，页面刷新，新内容出现，用户看到新内容,进行下一步操作。
//
异步：浏览器访问服务器请求，用户正常操作，浏览器后端进行请求。等请求完，页面不刷新，新内容也会出现，用户看到新内容。

如何解决跨域问题？

jsonp、iframe、window.name、window.postMessage、服务器上设置代理页面

页面编码和被请求的资源编码如果不一致如何处理？
谈一谈你对 ECMAScript6（ES6）的了解？

ECMAScript 6 是JavaScript语言的下一代标准，已经在2015年6月正式发布了。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。
标准的制定者有计划，以后每年发布一次标准，使用年份作为标准的版本。因为当前版本的ES6是在2015年发布的，所以又称ECMAScript 2015。也就是说，ES6就是ES2015

ECMAScript 6 怎么写 class ，为何会出现 class？

ES6的class可以看作只是一个语法糖，它的绝大部分功能，ES5都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。
//定义类
class Point {
    constructor(x,y) {  //构造方法
        this.x = x;  //this关键字代表实例对象
        this.y = y;
    }
    toString() {
        return '(' + this.x + ',' + this.y + ')';
    }
}

异步加载 JS 的方式有哪些？

(1)defer，只支持 IE
(2)async:
(3)创建 script，插入到 DOM 中，加载完毕后 callBack

document.write 和 innerHTML 有何区别？

document.write 只能重绘整个页面
innerHTML 可以重绘页面的一部分

DOM 操作——怎样添加、移除、移动、复制、创建和查找节点？

(1)创建新节点
  createDocumentFragment()    //创建一个DOM片段
  createElement()   //创建一个具体的元素
  createTextNode()   //创建一个文本节点
(2)添加、移除、替换、插入
  appendChild()
  removeChild()
  replaceChild()
  insertBefore() //在已有的子节点前插入一个新的子节点
(3)查找
  getElementsByTagName()    //通过标签名称
  getElementsByName()    //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)
  getElementById()    //通过元素Id，唯一性

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

内存泄漏是指任何对象在您不再拥有或需要它之后任然存在。
垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量，如果一个对象的引用数量为0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。
//
setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。
闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

是否看过 jQuery 的源码？能否简单概括一下它的实现原理？
jQuery.fn 的 init 方法返回的 this 指的是什么对象？为什么要返回 this ？
jQuery 中如何将数组转化为 json 字符串，然后再转化回来？

jQuery 中没有提供这个功能，所以需要先编写两个 jQuery 的扩展：
$.fn.stringifyArray = function(array) {
    return JSON.stringify(array)
}
$.fn.parseArray = function(array) {
    return JSON.parse(array)
}
//
然后调用:
$("").stringifyArray(array)

jQuery 的属性拷贝（extend）的实现原理是什么？如何实现深拷贝？

jQuery.extend 与 jQuery.fn.extend 有何区别？

jQuery 的队列是如何实现的？队列可以用在哪些地方？

jQuery 中一个对象可以同时绑定多个事件，这是如何实现的？

是否了解针对 jQuery 性能的优化方法？

基于Class的选择性的性能相对于Id选择器开销很大，因为需遍历所有DOM元素。
//
频繁操作的DOM，先缓存起来再操作。用Jquery的链式调用更好。
 比如：var str=$("a").attr("href");
 //
for (var i = size; i < arr.length; i++) {}
for 循环每一次循环都查找了数组 (arr) 的.length 属性，在开始循环的时候设置一个变量来存储这个数字，可以让循环跑得更快：
for (var i = size, length = arr.length; i < length; i++) {}

jQuery 与 jQuery UI 有何区别？

`jQuery`是一个js库，主要提供的功能是选择器，属性修改和事件绑定等等。
`jQuery UI`则是在jQuery的基础上，利用jQuery的扩展性，设计的插件。提供了一些常用的界面元素，诸如对话框、拖动行为、改变大小行为等等

jQuery UI 如何自定义组件？
如何判断当前脚本运行在浏览器还是 node 环境中？（阿里）

通过判断 Global 对象是否为 window ，如果不为 window ，当前脚本没有运行在浏览器中

前端 MVC、MVVM
1、MVC
在这里插入图片描述

模型（Model）：数据保存
视图（View）：用户界面
控制器（Controller）：业务逻辑
(1)View 传送指令到 Controller
(2)Controller 完成业务逻辑后，要求 Model 改变状态
(3)Model 将新的数据发送到 View ，用户得到反馈
所有通信都是单向的。

2、MVVM
在这里插入图片描述

模型（Model）
视图（View）
视图模型（ViewModel）
(1)各部分间都是双向通信
(2)View 与 Model 不发生联系，都通过 ViewModel 传递
(3)View 非常薄，不部署任何业务逻辑，称为“被动视图”（Passive View），即没有任何主动性；而 ViewModel 非常厚，所有逻辑都部署在那里
采用双向绑定（data-binding）：View 的变动，自动反映在 ViewModel ，反之亦然。