前端JS笔试面试题目

面试考察的是对整个知识体系的把握，所以要多多的总结，不要小看这些一个个的知识点，串在一起的时候，就是大问题了
1 JS中使用typeof能得到哪些类型
考点：JS的变量类型 number boolean string undefined object function

扩展：如何判读一个变量是数组类型

instanceof：判断一个函数是否是一个变量的构造函数

var arr=[1,2,3]
arr instanceof Array  //true

这个Array其实是一个构造函数，var arr=[1,2,3]其实就是一个语法糖，真实情况是这样子的var arr=new Array(1,2,3)

扩展：如何理解json

json是JS当中的一个内置对象，有两个常用的API，如下，他不是函数，和Math一样，是一个内置的对象，同时，json也是一种数据格式

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

扩展：JS当中的内置函数 Object Array Function Boolean String Number Date RegExp Error

2 何时使用 == ?，何时使用 ===?
考点：强制类型转换
扩展：什么时候发生强制类型转换

当你需要判断对象是否有某个属性的时候，就用==

obj.a==null 相当于  obj.a===undefined||obj.a===null

还有一种情况，判读函数的参数，是否有值

function find(a,b){
    if(a==null){
    }
}

其他的情况下，为了保证不发生强制类型转换，全部用===

什么时候发生强制类型转换?

1)字符串拼接

var a=100+'10' //10010
var a=100+10 //110

2)==符号

'1000'==100 //true
''==false //true
null==undefined //true

3) if 语句

if(100){
　　console.log("ok") //ok
}
if(''){
　　console.log("ok") //打印不出来
})

4)逻辑运算

var a="100"&&20 //20
var a=""||20 //20
var a='20'||30 //'20'

有一种方法，可以帮你快速的判读，这个值到底是真还是假

var a=100
console.log(!!a) //true
var b=''
console.log(!!b) //false

3 winow.onload和DOMContentLoaded的区别
考点：浏览器的渲染过程

4.用JS创建10个a标签，点击的时候弹出对应的序号
考点：作用域

5 简述如何实现一个模块加载器，实现类似require.js的基本功能
考点：JS的模块化

6 实现数组的随机排序
考点：JS数组的算法

7 描述一个new对象的过程

function Foo(name,age){
    this.name=name
    this.age=age
    this.class='class-1'
     //  return this
}
var f=new Foo('lucy',20)

第一步：

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

function Animal() {
　　this.eat = function() {
　　　　console.log("eat")
　　}
}

function Dog(name) {
　　this.bark = function() {
　　　　console.log(name)
　　}
}
Dog.prototype = new Animal
var dog = new Dog("泰迪")
dog.eat() //eat

这个只是一个演示的例子，但是，我们是不推荐这样子写的，这样子去面试，真的不是一个好的选择

我们来做一个绑定DOM操作的例子

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <a id="box"></a>
    <script type="text/javascript">
    function GetEle(elem) {
        this.elem = document.getElementById(elem)
    }
    GetEle.prototype.html=function(html){
        if(html){
           this.elem.innerHTML=html
           return this
        }else{
            return this.elem.innerHTML
        }
    }
    GetEle.prototype.on=function(type,fn){
        this.elem.addEventListener(type,fn)
    }
    var element=new GetEle("box")
    element.html("<p>点击我</p>").on('click',function(){
        console.log("ok")
    })
    </script>
</body>

</html>