2017.8.20：JavaScript面试题

1.知识点

1.png

2.列如

2.png

3.变量类型和计算

1.变量类型
(1).值类型（null、undefined、boolean、number、string）
var a=100; 
var b=a;
 a=200;
console.log(b); //100
(2).引用类型(对象、数组、函数)
var a={age：20}；
var b=a;
b.age=21;
console.log(b); // 21
(3).typeof运算符详解
typeof undefined //undefined
typeof 'abc' // string
typeof 123 //number
typeof true // boolean
typeof {} // object
typeof [] // object
typeof null // object
typeof console.log // function
2.变量计算-强制类型转换
(1).字符串拼接
var a=100+10; // 110
var b=100+'10'; // '10010'
(2).==运算符
100 == '100'  // true
0 == ''  // true
null == undefined // true
(3).if语句
1.var a=true;
if(a){
   //....
}
2.var b=100;
if(b){
    //...
}
3.var c= '';
if(c){
    //..
}
(4).逻辑运算
console.log(10 && 0); // 0
console.log('' || 'abc'); // 'abc'
console.log(!window.abc); // true
3.何时使用===和==
if(obj.a == null){
      //这里相当于obj.a === null || obj.a===undefined,简写形式
      //这是jQuery源码中推荐的写法
}
4.JS中的内置函数
Object
Array
Boolean
Number
String
Function
Date
RegExp
Error
5.如何理解JSON
JSON.stringify({a:10,b:20})
JSON.parse('{"a":10,"b":20}')

4.原型和原型链

3.png 4.png

1.构造函数
function Foo(name,age){
      this.name=name;
      this.age=age;
      this.class="class-1;
      //return this //默认有这一行
}
var f = new Foo("小林"，20)；//创建多个对象
2.构造函数-扩展
(1).var a={}其实是var a=new Object()的语法糖。
(2).var a=[]其实是var a=new Array()的语法糖。
(3).function Foo(){....}其实是var Foo=new Fuction(...)
(4).使用instanceof判断一个函数是否是一个变量的构造函数。
3.原型规则和示例
(1).所有的引用类型（数组、对象、函数 ），都具有对象特性，即可自由扩展属性（除了"null"之外）。
var  obj={};obj.a=100;
var arr=[];arr.a=100;
function fn(){}  fn.a=100;
(2).所有的引用类型（数组、对象、函数 ），都有一个__proto__属性，属性值是一个普通的对象。
console.log(obj.__proto__);
console.log(arr.__proto__);
console.log(fn.__proto__);
(3).所有的函数，都有一个prototype属性，属性值也是一个普通的对象。
console.log(fn.prototype)
(4).所有的引用类型（数组、对象、函数 ）,__proto__属性值指向它的构造函数的"prototype"属性值。
console.log(obj.__proto__===Object.prototype);
(5).当试图得到一个对象的某个属性时，如果这个对象本身没有这个属性，那么会去它的__proto__（即它的构造函数的prototype）中寻找。
//构造函数
function Foo(name, age){
    this.name=name;
}
Foo.prototype.alertName = function(){
    alert(this.name);
}
//创建示例
var f=new F('小林');
f.printName=function(){
    console.log(this.name);
}
//测试
f.printName();
f.alertName();
f.toString();//要去f.__proto__.__proto__中查找。

6.png 5.png

5.instanceof

1.f instanceof Foo的判断逻辑是：
2.f的__proto__一层一层往上，能否对应到Foo.prototype。
3.再试着判断f instanceof Object。

7.png 8.png 9.png

6.原型继承实例

1.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.innerHTML;
            }
          }
          Elem.prototype.on = function (type, fn){
            var elem = this.elem;
            elem.addEventListener(type, fn);
          }
          var div1 = new Elem('box');
//        console.log(div1.html());
//         div1.html('<p>2222</p>');
//         div1.on("click", function(){
//             alert("111");
//         })
            div1.html('<p>2222</p>').on("click", function(){
               alert("this.text()");
           })

7.作用域和闭包

10.png 11.png

1.执行上下文
(1).范围:一段<script>或者一个函数。
(2).全局：变量定义、函数声明。一段<script>。
(3).函数：变量定义、函数声明、this、argument、函数
(4).函数声明和函数表达式的区别。
console.log(a);  //undefined
var a = 100;

fn('zhangsan')  // 'zhangsan'   20
function fn(name) {
      age=20;
      console.log(name,age);
      var age;
}
2.this指向
(1).this要执行时才能确认值，定义时无法确认
(2).场景
1.作为构造函数执行
function Foo(name){
    this.name=name;
}
var f=new Foo("小林")

2.作为对象属性执行
var obj = {
      name:"A",
      printName: function(){
            console.log(this.name);
     }
}
obj.printName()

3.作为普通函数执行
function fn(){
      console.log(this)//window
}
fn()

4.call、Apple、bind
function fn1(name, age){
      alert(name);
      console.log(this)//window
}
fn1.call({x:100}, "zhangsan", 20);//{x:100}this指向
fn1.call({x:100}, ["zhangsan", 20]);//{x:100}this指向
var fn2 = function(name, age){
      alert(name);
      console.log(this);
}.bind({y:200})
fn2('zhangsan', 20)


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
3.作用域
(1).没有块级作用域。
if(true){
     var name="zhangsan";
}
console.log(name);
(2).只有函数和全局作用域。
var a=100;
function fn(){
      var a=200;
      console.log('fn', a);
}
console.log('global', a);
fn();
(3).作用域链
var a=100;
function fn(){
    var b=200;
    console.log(a)//当前作用域没有定义的变量，即“自由变量”
    console.log(b)
}
4.闭包
(1).闭包的使用场景
1.函数作为返回值。
function f1(){
    var a=10;
    return function (){
         console.log(a)//自由变量，父作用域寻找
   }
}
var f =f1();
var a=2000;
f();// 10

2.函数作为函数传递。
function f1(){
    var a=10;
    return function (){
         console.log(a)//自由变量，父作用域寻找
   }
}
var f =f1();
function f2(fn){
    var a=200;
    fn();
}
f2(f1);

12.png 13.png

8.异步和单线程

14.png 15.png

1.何时需要异步
(1).在可能发生等待的情况。
(2).等待过程中不能像alert一样阻塞程序运行。
(3).因此，所以的'等待的情况'都需要异步。
2.异步的场景
(1).定时任务：setTimeout,setInverval。
(2).网络请求：ajax请求，动态<img>加载。
(3).事件绑定
3.同步和异步的区别是什么
(1).同步会阻塞代码执行，而异步不会。
(2).alert是同步，setTimeout是异步。

16.png

9.日期、Math、数组api、对象api

17.png

上面解答

21.png 22.png 23.png

1.日期

18.png

2.Math
(1).获取随机数Math.random()。
3.数组api

19.png

1.forEach
var arr=[1,2,3];
arr.forEach(function(item, index){
        //遍历数组的所有元素
         console.log(index, item);
})
2.every
var arr=[1,2,3];
var result=arr.every(function (item, index){
      //用来判断所有的数组元素，都满足一个条件
      if(item < 4){
                 return ture;
        }
})
console.log(result);
3.some
var arr=[1,2,3];
var result = arr.some(function (item, index){
     //用来判断所有的数组元素，只要有一个满足条件即可
     if(item < 2){
             return ture
      }
})
console.log(result);
4.sort
var arr=[1,4,2,3,5];
var arr2 = arr.sort(function(a, b){
        //从小到大排序
       return a-b;
       //从大到小排序
       // return b-a
})
console.log(arr2);
5.map
var arr=[1,2,3,4];
var arr2 = arr.map(function(item, index){
       //将元素重新组装，并返回
       return '<b>'+item+'</b>';
})
console.log(arr2);
6.filter
var arr=[1,2,3];
var arr2=arr.filter(function(item, index){
       //通过某一个条件过滤数组
       if(item >= 2){
              return true;
       }
})
console.log(arr2);

4.对象api

20.png

总结：

24.png

8.JS-WEB-API

25.png 26.png

1.DOM操作
(1).获取DOM节点。
(2). ()()()

27.png 28.png 29.png 30.png 31.png 32.png 33.png 34.png

9.BOM

35.png 36.png 37.png 38.png

10.事件

39.png 40.png

10.Ajax交互

41.png 42.png 43.png

1.状态码

44.png 45.png 46.png 47.png 48.png 49.png 50.png 51.png 52.png 53.png 54.png

11.存储

55.png 56.png 57.png 58.png

12.开发工具

59.png 60.png

13.模块化

61.png 62.png 63.png 64.png 65.png 66.png 67.png 68.png 69.png

14.前端运行环境

70.png 71.png 72.png 73.png 74.png 75.png

15.性能优化

76.png 77.png

16.安全性

1.XSS跨站请求攻击
2.XSRF跨站点请求伪造