某公司笔试题（1）

前言

上周有幸被一家公司邀请过去面试，面试结果不如人意，但对于爱总结的程序员，这家公司的面试题还是需要总结一下的，总结才能进步嘛。

正文

JavaScript中怎么判断String类型的数据，请写出具体函数实现

方法一：

function isString(str) {
  return typeof str === 'string'
}

• 这种方法最简单易懂，但是有一个致命的缺点通过new String（）创建的字符串不能正确判断
• 通过new String（）创建的字符串使用typeof得到的是Object
• 改进方法一得到如下的方法二

方法二：

function isString(str) {
  return str instanceof String || typeof str === 'string'
}

方法三：

function isString(str) {
  return str.constructor === String
}

方法四：

function isString(str) {
  return Object.prototype.toString.call(str) === '[object String]'
}

DOM操作中添加节点、查找节点、删除节点、替换节点、复制节点、创建节点的方法

//在父元素的最后添加新的节点
fatherNode.appendChild(newNode)
//在父元素的指定子元素前添加新的节点
fatherNode.insertBefore(newNode, existingNode)

//查找节点
document.getElementById('idName')
document.getElementsByClassName('className')
document.getElementsByTagName('tagName')
document.querySelectorAll('selector')

//删除节点
fatherNode.removeChild(removeNode)

//替换节点
fatherNode.replaceChild(newNode, oldNode)

//复制节点，deep为true复制所有子节点，为false只复制当前节点
node.cloneNode(deep)

//创建节点
document.createElement('tagName')

简述javaScript中垃圾回收机制和内存管理

• 垃圾回收（GC）处理程序运行中产生的垃圾
  • 在函数作用域中当函数执行完毕，在函数中声明的局部变量，将被当做垃圾回收
  • 全局变量将在程序关闭之前被当做垃圾回收
  • 一个对象不再被外部的任何一个变量引用，这个对象就会被当做垃圾回收
• 内存管理分为三个阶段
  • 内存分配：在申明变量、函数、对象的时候，系统会自动为分配内存
  • 内存使用：使用变量、函数等操作
  • 内存释放：使用完毕，内存被释放（垃圾回收机制）

什么是内存溢出和内存泄漏

• 内存溢出：是一种程序执行时出现的错误，当程序运行所需的内存超过剩余内存时就会抛出内存溢出的错误
• 内存泄漏：程序执行时，占用的内存没有及时释放，内存泄漏积累太多就会造成内存溢出，常见的内存泄漏包含以下三种
  • 意外的全局变量，指没有使用var、const、let声明的变量
  • 没有及时清除的定时器或回调函数
  • 没有及时释放的闭包

提升页面性能的方法

• 减少网络请求的次数，精灵图技术
• 合理使用本地缓存
• 使用图片懒加载，用字体图标代替某些图片
• 使用CDN加载资源
• 减少页面中的DOM操作，操作DOM是尽可能的使用id选择器

· · ·

什么是跨域，常见的跨域解决方法有哪些

• 跨域是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制。

• 常见的跨域解决方法

  • 通过jsonp跨域
  • document.domain + iframe跨域
  • location.hash + iframe
  • window.name + iframe跨域
  • postMessage跨域
  • 跨域资源共享（CORS）
  • nginx代理跨域
  • nodejs中间件代理跨域
  • Basketwork协议跨域

这么多跨域解决方案，我只会jsonp，太难了

ajax的原理及优缺点

• ajax的原理就是通过XMLHttpRequest对象来向服务器发送异步请求，从服务器获得数据，然后用javaScript来操作DOM而更新页面，ajax发送网络请求的步骤如下
  1. 使用XMLHttpRequest创建网络请求对象xhr
  2. 准备发送网络请求，包含设置网络请求的方式，请求地址，是否同步
  3. 发送网络请求，当请求方式为post时，需要传入请求参数
  4. 处理服务器返回的请求数据
• ajax的优点
  • 无刷新更新数据
  • 异步与服务器通信
  • 前端和后端负载平衡
  • 基于标准被广泛支持
  • 界面与应用分离
• ajax的缺点
  • 破坏了浏览器的回退机制
  • 暴露了更多的数据和服务器逻辑
  • 对搜索引擎的支持比较弱
  • 违背了 URL 与资源定位的初衷

jQuery中有那几种选择器

jQuery中包含9中类型的选择器

• 基本选择器
• 层级选择器
• 增强型基本选择器
• 内容选择器
• 可见性选择器
• 属性选择器
• 子元素选择器
• 表单选择器
• 表单对象属性选择器

$()的用法

• $(html)，参数是一段HTML代码，创建节点对象
• $(selector)，参数是一个选择器，选择页面中的元素
• $(function)，参数是一个函数，当DOM加载完之后执行函数，相当于$(document).ready()

this指向问题

//输出结果为浏览器环境下的输出
var name = 'Tom'
  var obj = {
    name: 'Jerry',
    bar: function () {
      var name = 'Spike'
      console.log(this.name)
    }
  }

var f1 = obj.bar
f1()        //Tom
obj.bar()   //Jerry

//输出结果为浏览器环境下的输出
var obj = {
  name: 'Tom',
  getName() {
    console.log(this.name)
  }
}
var foo = obj.getName
//输出不是undefine而是空，这是由于window对象中本来就包含有一个名为name的属性，且属性值为空
foo()	//''

手写一段简单的包含闭包的代码

function foo() {
  var a = 10
    return function() {
      return a
    }
}
var f = foo()
console.log(f())	//10

v-model的作用

• 用在表单元素上创建双向数据绑定
• 用在自定义输入组件上双向数据绑定

Vue-Router导航勾子有哪几类

• 全局前置守卫beforeEach

• 全局后置钩子afterEach

• 路由独享的守卫beforeEnter

• 组件内的守卫beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

• 全局解析守卫beforeResolve

注： 限于本人能力，题目答案不保证完全，希望大家给予指正