前端面试基本知识点——javascript

摘要：又到一年春招季，们又要奔波于一场又一场的面试。今天就先来小小总结一下方面的知识点，方便你我他。在发送请求前加上。在后面加上时间搓。这样页面的所有都会执行这条语句就是不需要保存缓存记录。如何解决跨域问题服务器上设置代理页面

又到一年春招季，coder们又要奔波于一场又一场的面试。今天就先来小小总结一下javascript方面的知识点，方便你我他。随时补充

js基本数据类型

Undefined、Null、Boolean、Number、String
ECMAScript2015新增了Symbol（创建后独一无二的数据类型）

js的内置对象

数据封装对象：Object,Array,Boolean,Number,String
其他对象：Function,Arguments,Math,Date,RegExp,Error

js基本规范

1.不要在同一行声明多个变量
2.请使用===／!==来比较Boolean或者数值
3.生命数组变量时，尽量使用[]代替new Array
4.拒绝全局函数
5.Switch语句必须带有default分支

js原型，原型链及其特点

每个对象都会有一个内部初始化的属性，就是原型（prototype），当我们寻找一个对象的属性，如果内部属性本身不存在，就到对象的原型里面去找，这个原型又会有自己的原型，就这样一步步地找下去，这就是所谓的原型链。

Javascript有几种类型的值？及关于他们的内存图

栈：原始数据类型（基本数据类型）
堆：引用数据类型（对象，数组，函数）
两种类型的区别：储存的位置不同

将字符串转换为数字？

1.‘12.3b’ parseFloat("12.3b");解析成浮点数
2."12b"   parseInt("12b");解析成整数

如何将浮点数小数点左边的每三位添加一个逗号

    function commafy(num){
       return num && num
                     .toString()
                     .replace(/(d)(?=(d{3})+./g,function($1, $2){
                     return $2 + ",";
                     });
    }

如何实现数组的随机排序？var arr = [1,2,3,4,5,6,7,8]

方法一
    
    function RandomSort(arr){
    for (var i = 0,len = arr.length;i < len;i++){
       var rand = parseInt(Math.random() * len);
        var a;
        a = arr[rand]; 
        arr[rand]  = arr[i];
        arr[i] = a;
    } 
     return arr;   
    }
        

方法二
    
    function RandomSort2(arr){
    var a = [];
    while(arr.length > 0){
    var rand = parseInt(Math.random() * arr.length);
    a.push(arr[rand]);
    arr.splice(rand,1);
    }
     return a;   
    }
        

方法三
    
    function RandomSort3(arr){
     function sortBy(){
         return Math.random() - 0.5;
     }
     arr.sort(sortBy());
    }
        

Javascript如何实现继承？
1.构造继承
2.原型继承
3.实力继承
4.拷贝继承
前两种比较简单，建议用前两种的组合方式
1.构造函数实现继承就是借助call或者apply把父类中的函数通过this指复制到子类创建的实例中。

function Parent() {
  this.colors = ["black","white"];
}
function Child() {
  Parent.call(this);
}
var child1 = new Child();
alert(child1.colors);//"black,white"

2.原型函数实现继承

function Parent(){
        this.name = "liuwen";
    }

    function Child(){
        this.age = 28;
    }
    Child.prototype = new Parent();//继承了Parent，通过原型

    var demo = new Child();
    alert(demo.age);
    alert(demo.name);//得到被继承的属性

javascript创建对象的几种方法
1.使用对象字面量

 var Cat  = {};//JSON
 Cat.name="kity";//添加属性并赋值
 Cat.age=2;
 Cat.sayHello=function(){
  alert("hello "+Cat.name+",今年"+Cat["age"]+"岁了");//可以使用“.”的方式访问属性，也可以使用HashMap的方式访问
 }
 Cat.sayHello();//调用对象的（方法）函数

2.用function来模拟无参的构造函数

function Person(){
   }
   var personOne=new Person();//定义一个function，如果有new关键字去"实例化",那么该function可以看作是一个类
   personOne.name="liuwen";
   personOne.hobby="coding";
   personOne.work=function(){
   alert(personOne.name+" is coding now...");
   }
   personOne.work();

3.用function来模拟有参构造函数（拓展性强，推荐使用）

function Pet(name,age,hobby){
  this.name=name;//this作用域：当前对象
  this.age=age;
  this.hobby=hobby;
  this.eat=function(){
     alert("我叫"+this.name+",我喜欢"+this.hobby+",也是个吃货");
  }
   }
   var maidou =new Pet("麦兜",5,"睡觉");//实例化/创建对象
maidou.eat();//调用eat方法(函数)

4.用工厂模式来创建（内置对象Object）

var liuWen = new Object();
liuWen.name = "刘雯";
liuWen.age = 21;
liuWen.work = function() {
  alert("i am" + liuWen.name);
}
liuWen.work();

5.用原型方式来创建

function Dog(){

}
Dog.prototype.name="旺财";
Dog.prototype.eat=function(){
alert(this.name+"是个吃货");
}
var liuwen =new Dog();
liuwen.eat();

6.用混合模式创建

function Car(name,price){
 this.name=name;
 this.price=price;
   }
Car.prototype.sell=function(){
  alert("我是"+this.name+"，我现在卖"+this.price+"万元");
 }
   var camry =new Car("liuwen",27);
   camry.sell();

this的理解

this指的是函数的直接调用者

this指的是new出来的实例对象

this指的是事件中触发事件的对象

特殊的，在IE的attachEvent中，this总是指全局对象window

什么是window对象？什么是document对象？

   window指的是浏览器窗口；document是文档（html），属于window的一个属性。

null和undefined的区别

   null是一个空值，表示一个对象为空值（我是空的）
   undefined表示一个声明过的变量没有赋予值（不知道我是谁）
   typeOf undefined;//"undefined"
   typeOf null; //"object"
   区别null和undefined用===；

事件是什么？火狐和IE事件机制的区别？以及如何阻止冒泡事件

事件是在网页中的某个操作，类似于（点击，键盘）

IE是事件冒泡，火狐事件捕获，事件冒泡都支持（事件冒泡是由子节点到父节点层层向外，捕获刚好相反）；

阻止冒泡事件 event.stopPropagation();

什么是闭包？为什么要用它

   闭包就是有权访问另一个函数作用域的函数，简单来做就是在一个函数的内部创建另外一个函数，通过这个内部函数访问外部函数的局部变量，将外部函数内部的方法变量传递到外部。   
   闭包的特性：
   1. 内部函数有权访问外部函数的作用域，变量及函数
   2. 函数内再嵌套函数
   3. 变量和函数不会被垃圾回收制回收

//li节点的onclick事件都能正确的弹出当前被点击的li索引

   
 index = 0
   
 index = 1
   
 index = 2
   
 index = 3





执行say667()后,say667()闭包内部变量会存在,而闭包内部函数的内部变量不会存在
使得Javascript的垃圾回收机制GC不会收回say667()所占用的资源
因为say667()的内部函数的执行需要依赖say667()中的变量
这是对闭包作用的非常直白的描述

 function say667() {
   // Local variable that ends up within closure
   var num = 666;
   var sayAlert = function() {
alert(num);
   }
   num++;
   return sayAlert;
}

var sayAlert = say667();
sayAlert()//执行结果应该弹出的667

Javascript中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是？

   hasOwnProperty
   javascript的hasOwnProperty返回的是一个布尔值，它可以检测到这个对象本身具有属性，不能检测到原型链上。
   object.hasOwnProperty(proName)
   其中参数object是必选项。一个对象的实例。
   proName是必选项。一个属性名称的字符串值。

JSON的了解

   JSON是javascript的一个子集，它是轻量级，简单，易操作的数据交换格式。
   1. 将JSON字符串转化为JSON对象；
   var obj =eval("("+ str +")");
   var obj = str.parseJSON();
   var obj = JSON.parse(str);
   2. JSON对象转换为JSON字符串：
   var str=obj.toJSONString();
   var str=JSON.stringify(obj);

js延迟加载

   defer和async，动态创建dom（最常用），按需异步载入js

Ajax是什么？如何创建Ajax？

   向服务器发送请求的时候我们不必等待，可以同时做其他事情，页面也不会整页刷新，提高用户效率。
   (1)创建XMLHttpRequest对象,也就是创建一个异步调用对象
   (2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
   (3)设置响应HTTP请求状态变化的函数
   (4)发送HTTP请求
   (5)获取异步调用返回的数据
   (6)使用JavaScript和DOM实现局部刷新   

Ajax 解决浏览器缓存问题？

   1、在ajax发送请求前加上 anyAjaxObj.setRequestHeader("If-Modified-Since","0")。
   
   2、在ajax发送请求前加上 anyAjaxObj.setRequestHeader("Cache-Control","no-cache")。
   
   3、在URL后面加上一个随机数： "fresh=" + Math.random();。
   
   4、在URL后面加上时间搓："nowtime=" + new Date().getTime();。
   
   5、如果是使用jQuery，直接这样就可以了 $.ajaxSetup({cache:false})。这样页面的所有ajax都会执行这条语句就是不需要保存缓存记录。

如何解决跨域问题?

   jsonp、 iframe、window.name、window.postMessage、服务器上设置代理页面