JavaScript基础面试题及答案

- 日理万妓 2022-11-16 15:13 192阅读 0赞

### JavaScript基础面试题及答案① ###

*   *  1 介绍JavaScript的基本数据类型
     *  3 jQurry使用建议
     *  4 Ajax使用
     *  5 JavaScript有几种类型的值？
     *  6 栈和堆的区别？
     *  7 JavaScript实现继承的几种方式
     *  8 JavaScript创建对象的几种方法：
     *  9JavaScript作用域
     *  9 JavaScript作用域链
     *  10 闭包
     *  11 谈谈你对this的理解
     *  12 什么是window对象，什么是document对象？
     *  13 null和undefined的区别
     *  14 什么事件流？IE与网景的事件机制有何区别？如何阻止冒泡
     *  15 e.target和this的区别
     *  16 如何判断一个对象是否属于某个类？
     *  17 DOM操作
     *  18 对call()和apply()的理解
     *  19 如何删除一个Cookie？
     *  20 渐进增强和优雅降级

## 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");

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

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

3）发送请求

xhr.send(date)

1.  接收返回值

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）组合使用构造函数和原型方法（推荐）

将构造函数方法和原型函数方法结合使用是最常用的定义类的方法。这种方法的好处就是实现了属性定义和方法定义的分离。比如我们创建了两个对象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）将系统时间设置为当前时间往前一点