最近学生面试比较多,关于JS部分的常见面试问题,做一个简单的总结
1.变量提升
JS里的很多代码规则和C,Java等有挺多不同的地方,在C等语言里,变量和函数的时候一定要先定义,然后在使用,如果没按照这个要求来做,会有报错,提示变量没有定义,或者函数不存在,但是在JS里不同,如果先使用变量然后在定义,这种情况下会打印undefined,而不是程序报错,这就是JS里的变量提升
console.log(a); // undefined
var a = 10;
JS里会把函数和变量的声明提升到最顶部,这样能避免在使用的时候因为变量或者函数不存在而报错,但是JS不会把变量的初始化赋值也进行提升,所以打印的结果是undefined而不是10
var a;
console.log(a);
a = 10;
上述代码就是变量提升的执行过程,附上一个例子
var a = 10;
function test(){
console.log(a); // undefined
var a = 20;
console.log(a); // 20
}
test();
这是一个最常见的变量提升的面试题,这个问题混淆的地方在函数外面有个变量和函数内的变量重名,函数调用之后,进入到函数test自己的作用域里,var a会提升到函数的顶部,即使重名,也会重新声明,所以第一次打印的时候结果是undefined,接下来进行赋值,所以第二次打印结果是20,理解变量作用域能帮助理解变量提升,但是函数的提升和变量的提升,有稍微不同的地方
test();
function test(){
alert("111"); // 正常调用
}
test1();
var test1 = function(){
alert("222"); // test1不是一个函数,报错
}
这两种写法区别就是第二个用一个变量接受了函数,从而提升的时候,还是var test1; 这时test1里的内容还是undefined,所以调用函数的时候会出问题,变量提升只是把变量声明过程进行了提升,函数则会提升函数定义和函数体,所以变量提升更确切讲应该是声明提升
2.事件冒泡
事件冒泡是事件触发和传递过程里常见问题,通过最上一层的元素触发事件,会把事件根据结构进行传递,子传父,直到传到document,如果在这个过程里各级元素也绑定了相同的事件,事件也会触发,比如:
点击蓝色div之后三个点击方法都会触发,这个过程就是事件冒泡,当然了也能阻止事件的传递,有两个方法,event.cancelBubble = true;和event.stopPropagation();,所以要清楚事件传递的顺序
跟事件冒泡的顺序相反的叫事件捕获,事件先从document开始触发,最后才触发子元素事件,但是使用onclick这种方式没办法设置,只能通过addEventLinster()完成绑定,要把这个方法里的第三个参数设置成true,但是只有父元素设置成true之后,才能使捕获.
3.事件委托
不是所有的事件冒泡都是不好的,事件委托就是通过冒泡的过程完成事件的触发.当某个元素内有很多子元素,而且子元素都需要触发相同的事件,可以找到子元素,然后循环绑定事件,但是这种方式虽然可以,但是效率非常低,需要把每个元素都绑定上方法,在这个时候可以使用事件委托来完成.
如果想所有li都有鼠标移动改背景颜色,可以把事件添加到ul上
var ul1 = document.getElementById("ul1");
ul1.onmouseover = function(){
event.target.style.background = "red";
}
ul1.onmouseout = function(){
event.target.style.background = "";
}
通过事件冒泡,事件会从li传到ul上,然后ul会触发对应的onmouseout和onmouseover事件,然后通过event,target找到触发事件的标签,也就是li,这样写完,大量的节省了代码,而且当添加了新的li,也不需要为新的li单独添加对象,省时省力,这是利用了事件冒泡,提高代码质量
4.面向对象
JS不是纯的面向对象语言,对于大家来讲,面向对象和之前面向过程区别太大,JS里的对象创建有几种,一种是写成JSON对象
var obj = {
name:"张三",
age:20
}
也可以通过构造函数来创建,能解决批量创建对象
function Student(name, age){
this.name = name;
this.age = age;
this.eat = function(){
alert("吃饭");
}
}
但是这里面有个比较有特色的东西,就是原型,prototype.每一个通过构造函数创建出来对象,都有一个公共的区域,这个区域里用来定义对象的预定义的属性或者方法.Student.prototype实际上就是一个JSON对象,通过原型添加的元素都会添加到这个对象上,这些原型上的属性和方法共用一块存储空间,节省空间.
对象的属性和方法由两部分组成,一部分是通过构造函数获得的,另外一部分是通过原型上获得的.所以当使用对象的某个属性的时候,先从构造函数获得的属性中查找,是否有对应属性,如果没有再去原型上查找,如果还没有到Object上去查找,如果Object上还没有,则返回null,这就是原型链
先总结这些吧