JavaScript 面试

JS基础篇

变量类型和计算

• JS中使用typeof能得到哪些类型
  -undefinded
  • string
  • number
  • boolean
  • object
  • function
• 何时使用 === 何时用 ==

    if (obj.a == null) {
        // 这里相当于obj.a === null || obj.a === undefined
    }

• JS中有哪些内置函数
  • Array
  • Object
  • RegExp
  • Date
  • Error
  • Function
  • Boolean
  • String
  • umber
• JS变量按照存储方式区分为哪些类型，并描述其特点

区分为值类型、引用类型。值类型的值复制之后不会相互干涉，引用类型的值复制是变量指针的复制，并不是真正的值的拷贝

• 如何理解JSON

JSON只不过是JS对象

原型和原型链

JS三座大山之一

• 如何准确判断一个变量是数组类型

instanceof。用于判断引用类型属于哪个构造函数的方法

• 写一个原型继承的例子

function Elem(id) {
    this.elem = document.getElementById(id)
}
Elem.prototype.html = function (val) {
    var elem = this.elem
    if (val) {
        elem.innerHtml = val
        return this
    } else {
        return elem.html()
    }
}
Elem.prototype.on = function (type, fn) {
    var elem = this.elem
    elem.addEventListener(type, fn)
    return this
}
var fuck = new Elem('fuck')
fuck.html('<p>hello</p>').on('click', function () {
    alert('clicked!')
})

• 描述new一个对象的过程
  • 创建一个新对象
  • this指向这个新对象
  • 执行代码，即对this赋值
  • 返回this
• zepto源码中如何使用原型链

作用域和闭包

• 说下对变量提升的理解

变量定义函数声明都会提前定义

• 说明this几种不同的使用场景
  • 作为构造函数执行
  • 作为对象属性执行
  • 作为普通函数执行
  • call apply bind
• 创建10个<a>标签，点击时弹出对应的序号

for (var i = 0; i < 10; i++) {
    (function (i) {
        var a = document.createElement('a')
        a.innerHTML = i + '<br>'
        a.addEventListener('click', function (e) {
            e.preventDefault()
            alert(i)
        })
        document.body.appendChild(a)
    })(i)
}

• 如何理解作用域
  • 自由变量
  • 作用域链
  • 闭包的两个场景 (函数作为值返回，函数作为参数传递)
• 实际开发中闭包的应用

封装变量，收敛权限

function isFirstLoad() {
    var _list = []
    // 保护了_list变量
    return function (id) {
        if (_list.indexOf(id) >= 0) {
            return false
        } else {
            _list.push(id)
            return true
        }
    }
}
var firstLord = isFirstLoad()
firstLord(10)   // true
firstLord(10)   // false
firstLord(20)   // true

异步和单线程

• 同步和异步的区别是什么

同步会阻塞代码执行，异步不会

• 一个关于setTimeout的笔试题
• 前端使用异步的场景有哪些
  • 定时任务：setTimeout、setInterval
  • 网络请求：ajax加载、动态<img>加载
  • 事件绑定

其他

• 获取2017-06-10格式的日期

function formateDate(dt) {
    if (!dt) {
        dt = new Date()
    }
    var year = dt.getFullYear()
    var month = dt.getMonth()
    var date = dt.getDate()
    if (month < 10) {
        month = '0' + month
    }
    if (date < 10) {
        date = '0' + date
    }
    return year + '-' + month + '-' + date
}

• 获取随机数，要求是长度一致的字符串格式
• 写一个能遍历对象和数组的通用forEach函数

function forEach(obj, fn) {
    var key
    if (obj instanceof Array) {
        obj.forEach(function (item, index) {
            fn(item, index)
        })
    } else {
        for (key in obj) {
            fn(key, obj[key])
        }
    }
}

webAPI

DOM操作

• DOM是哪种数据结构

树

• DOM操作的常用API有哪些
  • 获取DOM节点，以及节点的property和attribute
  • 获取父节点，获取子节点
  • 新增节点，删除节点
• DOM节点的attr和property有何区别
  • property只是一个JS对象的属性的修改
  • attribute是对html标签的修改

BOM操作

• 如何检测浏览器的类型

var ua = navigator.userAgent
var isChrome = ua.indexOf('Chrome')
console.log(isChrome)

• 拆解url的各部分

location....

事件

• 编写一个通用的事件监听函数

function bindEvent(elem, type, selector, fn) {
    if (fn == null) {
        fn = selector
        selector = null
    }
    elem.addEventListener(type, function (e) {
      var target
      if (selector) {
          target = e.target
          if (target.matches(selector)) {
              fn.call(target, e)
          }
      } else {
          fn(e)
      }  
    })
}

• 描述事件冒泡流程
  • DOM树形结构
  • 事件冒泡
  • 阻止冒泡
  • 冒泡的应用 ==> 事件代理
• 对于无限下拉加载图片的页面，如何给每个图片绑定事件

事件代理：代码简介、减小浏览器的压力

项目运行环境

页面加载

• 从输入url到得到html的详细过程
  • 浏览器根据DNS服务器得到域名的IP地址
  • 向这个IP的机器发送http请求
  • 服务器收到、处理并返回http请求
  • 浏览器得到返回的内容
• window.onload和DOMContentLoaded的区别
  • window.onload是等
    待全部资源都加载完毕才会执行，包括图片、视频
  • DOMContentLoaded是当DOM结构渲染完成即执行，此时图片、视频可能没有加载完成

性能优化

• 多使用内存、缓存或者其他方法
• 减少CPU计算、减少网络

安全性

Snippets

发生类型转换的场景

• 字符串拼接
• == 运算符
• if语句
• 逻辑运算

原型规则

原型规则是学习原型链的基础

1. 所有的引用类型都具有对象的特性，即可用自由扩展属性('null'除外)
2. 所有的引用类型都有一个proto属性(隐式原型)，属性值是一个普通对象
3. 所有的函数都有一个prototype属性(显式原型)，属性值是一个普通对象
4. 所有引用类型的proto属性值指向它的构造函数的prototype属性值
5. 当试图得到一个对象的某个属性时，如果这个对象本身没有这个属性，那么会去它的proto(即它的构造函数的prototype)中寻找

执行上下文

• 范围：一段<script>或者一个函数
• 全局：变量定义、函数声明
• 函数：变量定义、函数声明、this、arguments

this

this要在执行时才能确定值，定义时无法确认

var a = {
    name: 'A',
    fn: function () {
        console.log(this.name)
    }
}
a.fn()  // this ==> a
a.fn.call({name: 'B'})  // this ==> {name: 'B'}
var fn1 = a.fn
fn1()   // this ==> window

作用域

• 没有块级作用域
• 只有函数和全局作用域
• 自由变量：当前作用域未定义的变量

linux命令

• mkdir 创建新文件夹
• ls 查看当前文件夹内容
• pwd 查看当前文件夹路径
• rm -rf a 删除文件夹
• cp 拷贝文件
• mv 移动文件
• rm 删除文件
• vim 创建并编辑文件
• cat 查看文件内容
• head 查看文件前部内容
• tail 查看文件末尾内容

加载资源的形式

• 输入url（或跳转页面）加载html
• 加载html中的静态资源

加载资源的过程

• 浏览器根据DNS服务器得到域名的IP地址
• 向这个IP的机器发送http请求
• 服务器收到、处理并返回http请求
• 浏览器得到返回的内容

浏览器渲染页面的过程

• 根据HTML结构生成DOM tree
• 根据CSS生成CSSOM
• 将DOM和CSSOM整合成RenderTree
• 根据将DOM和CSSOM整合成RenderTree开始渲染和展示
• 遇到script时，会执行并阻塞渲染

加载资源优化

• 静态资源合并压缩
• 静态资源缓存
• 使用CDN让资源加载更快（不同区域的网络优化）
• 使用SSR后端渲染，数据直接输出到HTML中

渲染优化

• CSS放钱、JS放后面
• 懒加载（图片懒加载，下拉加载更多）
• 减少DOM查询，对DOM查询做缓存
• 减少DOM操作，多个操作尽量合并在一起执行
• 事件节流
• 尽早执行操作