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结构渲染完成即执行，此时图片、视频可能没有加载完成
- window.onload是等
性能优化
- 多使用内存、缓存或者其他方法
- 减少CPU计算、减少网络
安全性
Snippets
发生类型转换的场景
- 字符串拼接
- == 运算符
- if语句
- 逻辑运算
原型规则
原型规则是学习原型链的基础
- 所有的引用类型都具有对象的特性，即可用自由扩展属性('null'除外)
- 所有的引用类型都有一个proto属性(隐式原型)，属性值是一个普通对象
- 所有的函数都有一个prototype属性(显式原型)，属性值是一个普通对象
- 所有引用类型的proto属性值指向它的构造函数的prototype属性值
- 当试图得到一个对象的某个属性时，如果这个对象本身没有这个属性，那么会去它的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操作，多个操作尽量合并在一起执行
- 事件节流
- 尽早执行操作
