JavaScript基础面试题及答案

1 介绍JavaScript的基本数据类型

Number、String、Boolean、Null、Undefined
Object是JavaScript中所有对象的父元素
数据封装类对象：Object、Array、Boolean、Number和String
其他对象：Function、Arguments、Array、Math、Date、RegExp、Error
新类型：Symbol

##2 说说书写JavaScript的基本规范
1）不要在同一行声明多个变量
2）使用 === 或 !== 来比较true/false或者数值
3）switch必须带有default分支
4）函数应该有返回值
5）for if else 必须使用大括号
6）语句结束打分号

3 jQurry使用建议

1、尽量减少对Dom元素的访问和操作
2、尽量减少给dom元素绑定多个相同类型的事件处理函数，可以将多个想同类型事件处理函数合并到一个处理函数，通过数据状态来处理分支
3、尽量避免使用toggle事件

4 Ajax使用

全称：Asynchornous JavaScript And XML
所谓异步，就是局部向服务器发送请求，全局不用等待，而是可以同时做其他的事情，等到有了结果他会自己根据设定进行后续操作，与此同时，页面不会发生整体刷新，局部刷新，提高了用户的整体体验

创建Ajax的过程：
1）创建XMLHttpRequest对象（异步调用对象）

var xhr = new XMLHttpRequest()||new ActiveXobject("Microsoft.XMLHTTP");

2. 建立连接（方法、URL、是否异步）

xhr.open("get","请求路径",true);

3）发送请求

xhr.send(date)

4. 接收返回值

xhr.onreadyStatechange = function(){
	if(xhr.readyState == 4){
	if(xhr.status == 200){
	//获取数据
	var txt = xhr.responseText;
	console.log(txt)
}else{
	console.log("error")
}

5 JavaScript有几种类型的值？

基本数据类型 存储在栈中
复合数据类型（对象） 存储在堆中

6 栈和堆的区别？

栈（stack）：由编译器自动分配释放，存放函数的参数值，局部变量等；
堆（heap）：一般由程序员分配释放，若程序袁不释放，程序结束是可能有操作系统数释放

7 JavaScript实现继承的几种方式

1. 构造函数继承

//构造函数的核心思想是
    //通过call()或apply()方法在子构造函数的内部调用父构造函数，从而获取到父对象中的属性和方法
    function Person(name){
        this.legs = 2;
        this.mouse = 1;
        this.name = name;
        this.walk = function(){
            console.log(this.name+"有"+this.legs+"条腿");
        }
    }

    //中国人
    function Chinese(name){
        Person.call(this,name);
    }

    //实例化对象
    var Chinese = new Chinese("zs");
    //调用对象方法
    Chinese.walk();
}

2）组合继承

3）利用空对象作为中介继承

8 JavaScript创建对象的几种方法：

1） 工厂方法

function creatPerson(name, age) {
            
    var obj = new Object();

    obj.name = name;
    obj.age = age;

    obj.sayName = function() {
        window.alert(this.name);
    };
            
    return obj;
}

2）构造函数方法

function Person(name, age) {

    this.name = name;
    this.age = age;

    this.sayName = function() {
        window.alert(this.name);
    };
}

3）原型方法

function Person() {
        
}
        
Person.prototype = {
    constructor : Person,
    name : "Ning",
    age : "23",
    sayName : function() {
        window.alert(this.name);
    }
};

这种方法有些缺陷，类里属性的值都是在原型里给定的

4）组合使用构造函数和原型方法（推荐）

function Person(name, age) {
    this.name = name;
    this.age = age;
}
        
Person.prototype = {
    constructor : Person, 
    sayName : function() {
        window.alert(this.name);
    }
};

将构造函数方法和原型函数方法结合使用是最常用的定义类的方法。这种方法的好处就是实现了属性定义和方法定义的分离。比如我们创建了两个对象person1和person2，它们分别传入各自的name值和age值，但sayName()方法可以同时使用原型里定义的。

9JavaScript作用域

1）变量作用域
 1、变量作用域就是变量的可访问范围
 2、变量作用域可以减少变量的命名冲突，提高程序的可靠性
 3、变量作用域可以分为全局作用域和局部作用域
  全局作用域：
     1.全局作用域中的变量全局可以使用（函数内外都可以访问）
     2.在函数外部定义的变量成为全局变量
     3.在函数内部没有使用var声明的变量直接赋值的变量也为全局变量
     4.全局变量只有在浏览器关闭时才会注销，比较占用资源

var num1 = 10;
function fun1(){
	console.log(num1);
}
fun1();
console.log(num1)

  局部作用域：
     1.局部作用域中的变量只能在作用域内部使用（函数内部使用）
     2.在函数内部通过var定义的变量为局部变量
     3.函数的形参实际上也是局部变量
     4.局部变量在函数执行结束后会销毁，比较节省内存空间

function fun1(){
	var num = 20;
	console.log(num);
}
fun1();
console.log(num)

9 JavaScript作用域链

1）只要是代码，就至少有一个作用域
2）函数内部为局部作用域
3）内部函数可以访问外部函数的变量
4）但外部函数无法访问内部函数的变量
5）内部函数访问的外部函数中的变量，采取的是链式查找的方式来决定取哪个值，这种方式成为作用域链（就近原则）

作用域链的原理和原型链很类似，如果这个变量在自己的作用域中没有，那么他会寻找父级的，直到最顶层。

注意：JS没有块级作用域，若要形成块级作用域可以通过（function(){ {}}）立即执行的形式实现。

10 闭包

1）闭包（closure）指能够读取到其他函数内部变量的函数
2）闭包的实现：在函数内部在定义一个函数，把内部函数作为返回值
3）闭包的优点：避免全局变量污染
4）闭包的缺点：容易造成内存泄漏

function  a(){
	var num = 20;
	return function(){
		console.log(num);
	}
}
var b = a();
b();

3）闭包的作用
1、延伸变量作用范围，可以在函数外部访问到内部局部变量
2、可以让局部变量在函数执行结束后不释放，保存在内存中

function  a(){
	var num = 20;
	return function(){
		console.log(num++);
	}
}
var b = a();
b();
b();

4）闭包的缺点：
1、闭包会使得函数中的变量都被保存在网页中，内存消耗很大，所以不能滥用闭包，可能导致内存泄漏
2、闭包会在函数外部，改变函数内部变量的值

11 谈谈你对this的理解

1）this总是指向函数的直接调用者（而非间接调用者）
2）如果有new关键字，this指向new出来的那个对象
3）在事件中this指向目标元素，特殊的是IE的attachEvent中的this总是指向全局对象window。

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

1）window对象代表浏览器中打开的一个窗口。
2）document对象代表整个html文档。
实际上document对象是window对象的一个属性。

13 null和undefined的区别

1）null表示一个对象被定义了，但存放了空指针，转换为数值时值为0。
 typeof(null) – object;

2）undefined表示声明的变量为初始化，转换为数值是为NAN。
 typeof(undefined) – undefined;

14 什么事件流？IE与网景的事件机制有何区别？如何阻止冒泡

1）事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流
DOM事件流分为三个阶段：捕获阶段 、当前目标阶段 、冒泡阶段

2）捕获阶段：IE最早提出，事件逐级向下传播
  冒泡阶段：网景最早提出，事件逐级向上传播

3）阻止冒泡：jQuery中使用event.stopPropagation() 方法；旧IE的方法ev.cancelBubble = true;
  reutrn false也能阻止默认行为没有兼容性问题（return false 只针对传统注册方式有效）

15 e.target和this的区别

1）this是事件绑定的元素（绑定这个事件处理函数的元素）
2）e.target是事件触发的元素
 **通常情况下target和this是一致的
 **但有一种情况不同，那就是在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行）
 **这是this指向的是父元素，因为它是绑定事件的元素对象
 **而target指向的是子元素，因为他是触发事件的那个具体元素对象
  ***比如给ul绑定了click事件，当点击里面的li时，this表示ul而e.target表示li

16 如何判断一个对象是否属于某个类？

使用instanceof 即if(a instanceof Person){alert(‘yes’);}

17 DOM操作

1）创建节点对象：
**creatDocumentFragment() // 创建一个DOM片段
**creatElement() // 创建一个具体的元素
**creatTextNode() // 创建一个文本节点

2）添加、移除、替换、插入
**appendChild()
**removeChild()
**repliceChild()
**insertBefore() // 在已有的子节点前插入一个新的子节点

3）查找
**getElementsByTagName() // 通过标签名称
**getElementsByName() // 通过元素的name属性值
**getElementById() // 通过元素id，具有唯一性

18 对call()和apply()的理解

call() 方法和apply() 方法的作用相同，动态改变某个类的某个方法的运行换寂静。他们的区别在于接收参数的方式不同。在使用call()方法时，传递给函数的的参数必须逐个列举出来。使用apply()时，传递给函数的是参数数组。

19 如何删除一个Cookie？

1）将Cookie的失效时间设置为过去的时间（expires）

document.cookie = "user = " + encodeURIComponent("name") + ';
expires = ' + new Date(0);

2）将系统时间设置为当前时间往前一点

var date = nwe Date();
date.setDate(date.getDate()-1);

20 渐进增强和优雅降级

渐进增强：针对浏览器低版本进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进，达到更好的用户体验。

优雅降级：一开始就构造完整的功能，然后在针对低版本浏览器进行兼容

感谢支持：@快乐养兔