当前位置:主页 > 查看内容

JavaScript基础面试题及答案

发布时间:2021-05-25 00:00| 位朋友查看

简介:JavaScript基础面试题及答案① 1 介绍JavaScript的基本数据类型 3 jQurry使用建议 4 Ajax使用 5 JavaScript有几种类型的值 6 栈和堆的区别 7 JavaScript实现继承的几种方式 8 JavaScript创建对象的几种方法 9JavaScript作用域 9 JavaScript作用域链 10 闭包……

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)组合继承

<script>
    /* 
    组合继承:因为原型链继承只能继承原型对象中的属性和方法,
    而构造函数又只能继承实例对象中的属性和方法,便有了组合继承

    组合继承也叫伪经典继承,其核心是:
    1、将原型链继承和构造函数继承组合在一起
    原型链实现对原型对象属性何方法的继承
    构造函数实现对实例对象的属性和方法的继承

    */

   function Person(name){
       this.legs = 2;
       this.mouse = 1;
       this.name = name ;
       this.walk = function(){
           console.log(this.name+"有"+this.legs+"条腿");
       }
   }
   Person.prototype.say = function() {
       console.log("我的名字叫"+this.name);
   }

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

   //实例化对象
   var chinese = new Chinese("张三")
   //调用对象方法
   chinese.walk();
   chinese.say();
</script>

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

<script>
    function Boss(){}
    Boss.prototype.money = 9999999;
    

    function fa(n,a){
        this.name = n;
        this.age = a;
    }
    //创建一个空的构造函数 通过空对象进行传值
    function Nul(){}
    Nul.prototype = Boss.prototype;

    //让fa的原型对象指向创建的空的构造函数
    fa.prototype = new Nul();
    //让fa的构造函数指向fa
    fa.prototype.constructor = fa;

    // 创建fa的实例对象
    var son = new fa("tom",16);
    console.log(son.name,son.age,son.money);

    //通过fa改变原型对象 但是Boss原型对象的值不能被修稿
    fa.prototype.money = 100;
    console.log(fa.prototype);
    
    var boss_ = new Boss();
    console.log(boss_.money);//999999
</script>

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);
    }
};

将构造函数方法和原型函数方法结合使用是最常用的定义类的方法。这种方法的好处就是实现了属性定义和方法定义的分离。比如我们创建了两个对象person1person2,它们分别传入各自的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 渐进增强和优雅降级

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

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

感谢支持:@快乐养兔

;原文链接:https://blog.csdn.net/qq_18835599/article/details/115492146
本站部分内容转载于网络,版权归原作者所有,转载之目的在于传播更多优秀技术内容,如有侵权请联系QQ/微信:153890879删除,谢谢!

推荐图文


随机推荐