阅读 81

JavaScript面试基础题解析

一. JS中使用typeof能得到哪些类型

type of undefined // undefined
type of 'abc' // string
type of 123 // number
type of true // boolean
type of {} // object
type of [] // object
type of null // object
type of console.log // function
复制代码

二. 何时使用=== 何时使用==?

1.强制类型转换

  • 字符串拼接

  • == 运算符

  • if语句

  • 逻辑运算

if (obj.a == null) {
    // 这里相当于 obj.a == null || obj.a === undefined 的简写形式
    // 这是jQuery源码中推荐的写法
}
其余全部用===
复制代码

三. JS中有哪些内置函数

Object
Array
Boolean
Number
String
Function
Date
RegRxp
Error
复制代码

四. JS变量按照存储方式区分为哪些类型,并描述其特点

  • 值类型:数字,字符串,boolean,undefined
    var a = 10
    var b = a
    a = 11
    console.log(b) // 10
复制代码
  • 引用类型:对象,数组,null,函数
    var obj1 = {x: 100}
    var obj2 = obj1
    obj1.x = 200
    console.log(obj2.x) // 200
复制代码

五. 如何理解json

JSON 只不过是一个JS对象而已
复制代码

常用的API就两个

 JSON.stringify({a: 10, b: 20})
 JSON.parse('{"a": 10, "b": 20}')
复制代码

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

var arr = []
arr instanceof Array // true
typeof arr // object, typeof 是无法判断是否是数组的
复制代码

七. 写一个原型链继承的例子

  • 基础版
// 动物
function Animal () {
    this.eat = function () {
        console.log('animal eat')
    }
}
// 狗
function Dog () {
    this.bark = function () {
        console.log('dog bark')
    }
}
Dog.prototype = new Animal()
// 哈士奇
var hashiqi = new Dog()
复制代码

八. 描述new一个对象的过程

function Foo (name, age) {
    this.name = name
    this.age = age
    this.class = 'class-1'
    // return this //默认有这一行
}
var f = new Foo ('zhangsan', 20)
// var f1 = new Foo ('lisi', 22) // 创建多个对象
复制代码
  • 创建一个新对象
  • this 指向这个新对象
  • 执行代码,即对this赋值
  • 返回this

九. zepto(或其他框架)源码中如何使用原型链

  • 写一个封装DOM查询的例子
function Elem (id) {
    this.elem = document.getElementById(id)
}
Elem.prototype.html = function (val) {
    val elem = this.elem
    if (val) {
        elem.innerHTML = val
        return this // 链式操作
    } else {
        return elem.innerHTML
    }
}
Elem.prototype.on = function (type, fn) {
    val elem = this.elem
    elem.addEventListener(type, fn)
}

var div1 = new Elem('div1')
console.log(div1.html())
div1.html('<p>hello world</p>')
div1.on('click', function () {
    alert('clicked')
})
复制代码

十. 说一下对变量提升的理解

十一. 说明this几种不同的使用场景

  • 作为构造函数执行
  • 作为对象属性执行
  • 作为普通函数执行
  • call apply bind

十二. 创建10个a标签,点击的时候弹出来对应的序号

var i
for (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)
        )
    })(i)
}
复制代码

十三. 如何理解作用域

  • 自由变量
  • 作用域链,即自由变量的查找
  • 闭包的两个场景

十四. 实际开发中闭包的应用

// 闭包实际应用中主要用于封装变量,收敛权限
function isFirstLoad() {
    var _list = []
    return function (id) {
        if (_list.indexOf(id) >= 0) {
            return false
        } else {
            _list.push(id)
            return true
        }
    }
}
// 使用
var firstLoad = isFirstLoad()
firstLoad(10) // true
firstLoad(10) // false
firstLoad(20) // true
firstLoad(20) // false
// 你在 isFirstLoad 

函数外面,根本不可能 _list 修改的值
复制代码