首页 / JAVASCRIPT / JavaScript面试

JavaScript面试

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript面试，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含11477字，纯文字阅读大概需要17分钟。

内容图文

面试

DOM事件类

JavaScript面试 - 文章图片

事件级别

事件处理程序就是响应某个时间的函数，DOM事件分为3个级别：DOM 0级事件处理，DOM2级事件处理，DOM3级事件处理

DOM0级事件

el.onclick=function(){}

var btn = document.getElementById('btn');
btn.onclick = function(){
    alert(this.innerHTML);
}

当希望为同一个元素/标签绑定多个同类型事件的时候(如给上面这个btn元素绑定三个点击事件),是不被允许的。DOM0级事件绑定，给元素的事件行为绑定方法，这些方法都是在当前元素事件行为的冒泡阶段(或者目标阶段)执行的

DOM 2级事件

el.addEventlistener(event-name,callback,useCapture)

event-name:事件名称，可以是标准的DOM事件

callback：回调函数，当事件触发时，函数会被注入一个参数为当前的事件对象event

userCapture：默认是false，代表事件句柄在冒泡阶段执行

var btn = document.getElement('btn');
btn.addEventListener("click",test,false);
function test(e){
   e = e || window.event
    alert(e.target|| e.srcElement.innerHTML);
    btn.removeListener("click",test)
}

IE9以下的IE浏览器不支持addEventListener()和removeListener()，使用attachEven()与detachEvent()代替，因为IE9以下不支持事件捕获的，所以也没有第三个参数，第一个事件名称前要加on。

DOM 3级事件

在DOM2级事件的基础上添加了更多的事件类型。
UI事件，当用户与页面上的元素交互时触发，如：load、scroll
焦点事件，当元素获得或失去焦点时触发，如：blur、focus
鼠标事件，当用户通过鼠标在页面执行操作时触发如：dblclick、mouseup
滚轮事件，当使用鼠标滚轮或类似设备时触发，如：mousewheel
文本事件，当在文档中输入文本时触发，如：textInput
键盘事件，当用户通过键盘在页面上执行操作时触发，如：keydown、keypress
合成事件，当为IME（输入法编辑器）输入字符时触发，如：compositionstart
变动事件，当底层DOM结构发生变化时触发，如：DOMsubtreeModified
同时DOM3级事件也允许使用者自定义一些事件。

DOM事件模型和事件流

DOM事件模型分为捕获和冒泡。一个事件发生后，会在子元素和父元素之间传播。这种传播分为三个阶段。

捕获阶段：事件从window对象自上而下向目标节点传播的阶段
目标阶段：真正的目标节点正在处理事件的阶段；
冒泡阶段：事件从目标节点自下而上向window对象传播的阶段

JavaScript面试 - 文章图片

描述DOM事件捕获的具体流程

JavaScript面试 - 文章图片

捕获是从上到下，事件先从window对象，然后再到document(对象)，然后是html标签(通过document.documentElement获取html标签)，然后是body标签(通过document.body获取body标签)，然后按照普通的html结构一层一层往下传，最后到达目标元素

而事件冒泡的流程刚好是事件捕获的逆过程。

事件代理(事件委托)

由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理子元素的事件。这种方法叫做事件对的代理

优点

减少内存消耗，提高性能
假设有一个列表，列表之中有大量的列表项，我们需要在点击每个列表项的时候响应一个事件
如果给每个列表项一一都绑定一个函数，那对于内存消耗是非常大的，效率上需要消耗很多性能。借助事件代理，我们只需要给父容器ul绑定方法即可，这样不管点击的是哪一个后代元素，都会根据冒泡传播的传递机制，把容器的click行为触发，然后把对应的方法执行，根据事件源，我们可以知道点击的是谁，从而完成不同的事。
动态绑定事件
在很多时候，我们需要通过用户操作动态的增删列表项元素，如果一开始给每个子元素绑定事件，那么在列表发生变化时，就需要重新给新增的元素绑定事件，给即将删去的元素解绑事件，如果用事件代理就会省去很多这样麻烦。

如何实现

//给父层元素绑定事件
document.getElementId('list').addEventListener('click',function(e){
    //兼容性处理
    var event =e||window.event
    var target =event.target ||event.srcElemnt;
    //判断是否匹配目标元素
    if(target.nodeName.toLocaleLowerCase === 'li'){
        console.log('this content is:',target.innerHTML)
    }
})

Event对象常见的应用

event.preventDefault()

如果调用这个方法，默认事件行为将不再触发。什么是默认事件呢？例如表单一点击提交按钮(suvmit)跳转页面，a标签默认页面跳转或是锚点定位等。

<a id="test" href="http://www.cnblogs.com">链接</a>
<script>
    var test=document.getElementById('test');
    test.onclick =function(e){
        e =e ||window.event;
        e.preventDefault();
    }
</script>

实现输入框最多只能输入六个字符

<input type="text" id="tempInp">
<script>
   var tempInp = document.getElementById('tempInp')
   tempInp.onkeydown  =function(ev){
       ev=ev||window.event;
       let val =this.value.trim();//trim去除字符串首位空格
       let len =val.length
       if(len>=6){
           this.value =val.substr(0,6);
           //阻止默认行为去除特殊按键
           let code =ev.which ||ev.keyCode;
           if(!/^(46|8|37|38|39|40)$/.test(code)){
               ev.preventDefault();
           }
       }
   }
</script>

event.stopPropagation()& stop.stopImmediatePropagation()

event.stopPropagation()方法阻止事件冒泡到父元素，阻止任何父事件处理程序被执行。

stop.stopImmediatePropagation()既能阻止事件向父元素冒泡，也能阻止元素同事件类型的其他监听器被触发。而stopPropagtion只能实现前者的效果。

<button id="btn">click me</button>
<script>
  var btn =document.querySelector('#btn');
  btn.addEventListener('click',function(event){
      console.log('btn click 1');
      event.stopImmediatePropagation();
  });
  btn.addEventListener('click',function(){
      console.log('btn click 2')
  })
  document.body.addEventListener('click',function(){
      console.log('body click')
  })
  //btn click 1  
</script>

使用stop.stopImmediatePropagation()后。点击按钮时，不仅仅body绑定事件不会触发，与此同按钮的另一个点击事件也不会触发。

event.target & event,currentTarget

event.target指向引起触发事件的元素，而event.currenttTarget则是事件绑定的元素，也就是说event.currentTarget始终是监听事件者，而event.target是事件的真正发出者

<div id="a">
    <div id="b">
        <div id="c">
            <div id="d">
            </div>	
        </div>	
    </div>
</div>
<script>
  document.getElementId('a').addEventListener('click',function(e){
      console.log('target:’+e.target.id+'&currentTarget:'+e.currentTarget.id)
  })
    document.getElementId('b').addEventListener('click',function(e){
      console.log('target:’+e.target.id+'&currentTarget:'+e.currentTarget.id)
  })
    document.getElementId('c').addEventListener('click',function(e){
      console.log('target:’+e.target.id+'&currentTarget:'+e.currentTarget.id)
  })
    document.getElementId('d').addEventListener('click',function(e){
      console.log('target:’+e.target.id+'&currentTarget:'+e.currentTarget.id)
  })
</script>

JavaScript面试 - 文章图片

当点击最里层的元素d的时候会依次输出

target:d&currentTarget:d
target:d&currentTarget:c
target:d&currentTarget:b
target:d&currentTarget:a

自定义事件

var eve =new event('custome');
ev.addEventListener('custome',function(){
    console.log('custome')
})
ev.dispatchEvent(eve);

原型链

JavaScript面试 - 文章图片

创建对象的方法

直接字面量创建

var objA ={};
objA.name ='a';
objA.sayname =function(){
    console.log('my name is'+this.name);
}
objA.sayName();
console.log(objA.__proto__ === Object.prototype);//true
console.log(objA instanceof Object) //true

构造函数创建

var B = function(name){
    this.name =name;
    this.sayname = function(){
        console.log('my name is'+this.name)
    }
}
var objB =new B('b');

Object.Create()

Object.create()方法创建一个新对象，使用现有的对象来提供新创建对象的__proro__

const person = {
    isHuman:false,
    printIntroduction:function(){
        console.log(`my name is ${this.name}. Am I human ${this.isHuman}`);
    }
};
const me = Object.create(person);
me.name = "Matthew";
me.isHuman =true;
me.printIntroduction();

Object.create(proto,[propertiesObject])

proto必填参数，是新对象的原型对象，如上面代码里新对象me的__proto__指向person。注意，如果这个参数是null，那新对象就彻彻底底是个空对象，没有继承Object.prototype上的任何方法和属性，如hasOwnProperty(),toString()等

var a = Object.create(null);
console.log(a);
console.log(a.__proto__);
console.log(a.__proto__ === Object.prototype);//false
console.log(a instanceof Object);false

propertiesObject是可选参数，指定要添加到新对象上的可枚举的属性(即其自定义的属性和方法，可用hasOwnProperty()获取的，而不是原型对象上的)的描述符及相应的属性名称。

var bb = Object.create(null,{
    a:{
        value:2,
        writable:true,
        configurable:true
    }
});
console.log(bb);
console.log(bb.__proto__);
console.log(bb.__proto__===Object.prototype);
console.log(bb instanceof Object);
//-----------------------------------------------------------------------
var cc =Object.create({b:1},{
    a:{
        value:3,
        writable:true,
        configurable:true
    }
});
console.log(cc);
console.log(cc.hasOwnProperty('a'),cc.hasOwnProperty('b'));
console.log(cc.__proto__);
console.log(cc.__proto__ === Object.prototype);
console.log(cc instanceof Object)

Object.create()创建的对象原型指向传入的对象。跟字面量和new关键字创建有区别

自己实现一个Object.create()

Object.mycreate = function(proto,properties){
    function F(){};
    F.prototype = proto;
    if(properties){
        Object.defineProperties(F,properties);
    }
    return new F();
}
var hh = Object.myCreate({a:11},{mm:{value:10}})
console.log(hh);

总结

字面量和new关键字创建的对象是Object的实例，原型指向Object.prototype，继承内置对象Object
Object.create(arg,pro)创建的对象的原型取决于arg，arg为null，新对象是空对象，没有原型，不继承任何对象;arg为指定对象，新对象的原型指向对象，继承指定对象

原型链

JavaScript面试 - 文章图片

instanceof原理

JavaScript面试 - 文章图片

instanceof的作用是用来做检测类型:

instanceof可以检测某个对象是不是另一个对象的实例：

var Person = function(){}
var student =new Person();
console.log(student instanceof Person);//true

instanceof可以检测父类型

function Person(){};
function Student(){};
var p =new Person();
Student.prototype = p; //继承原型
var s =new Student();
console.log(s instanceof Student);//true
console.log(s instanceof Person); //true

instanceof检测一个对象A是不是另一个对象B的实例的原理：

查看对象B的原型指向是否在对象A的原型链上。如果在，则返回true，如果不在返回false

实例对象属性查找属性顺序是：实例对象内部---->构造函数原型链----->实例对象父对象的原型链

new运算符

JavaScript面试 - 文章图片

var obj ={};
obj.__proto__ = F.prototype;
F.call(obj);

执行new操作符，构造函数会经历以下三个步骤：

创建一个空对象，并且this变量引用该对象，同时还继承了该函数的原型
属性和方法被加入到this引用的对象中
新创建的对象由this所引用，并且最后隐式的返回this

面向对象

类的申明

//在ES5中没有类的概念，开发者通过原型的方法，实现了类似于类的结构
function Person(name){
    this.name =name;
}
Person.prototype.sayName =function(){
    console.log(`my name is ${this.name}`)
}
var p = new Person('haha');
console.log(p.sayName)//haha

//ES6中提供了class方法，实现类
class Person(name){
    constructor(name){
        this.name =name;
    }
    //定义一个方法并且赋值给构造函数的原型
    sayName(){
        return this.name
    }
}
let p =new Person('haha');
console.log(sayName);

类的继承

借助构造函数继承

function Parent1(){
    this.name ='Parent1'
}
Parent1.prototype.say = function(){
    console.log('hello')
}
function Child1(){
    Parent1.call(this)
    this.type ='child1'
}
console.log(new Child1());

缺点：借助构造函数继承，不能继承父类的prototype原型上的方法

借助原型链实现继承

function Parent2(){
    this.name ='Parent2'
}
Parent2.prototype.say =function(){
    console.log('h1')
}
function Child2(){
    this.type ='child2'
}
Child2.prototype =new Parent2();
console.log(new Child2());
c1 =new Child2();
c2 =new Child2();

缺点：因为原型链中的对象都是公用的，导致子类改变继承父类中的属性和方法，父类下的所有子类继承的属性和方法都会改变

组合继承

function Parent3(){
    this.name ='parent3';
    this.play =[1,2,3]
}
function Child3(){
    Parent3.call(this);
    this.type ='child3'
}
Child3.prototype =new Parent3();
var c3 =new Child3();
var c4 =new Child4();
c3.play.push(4);
console.log(c3.play,c4.play)

缺点：父类创建执行了两次，浪费了内存空间,子类的prototype指向不再是子类自己，而是指向父类

function Parent5(){
    this.name ='parent5';
    this.play =[1,2,3]
}
function Child5(){
    Parent3.call(this);
    this.type ='child5'
}
Child5.prototype =Object.create(parent.prototype)
Child5.prototype.constructor = Child5

ES6继承

//ES6
class Parent{
    constructor(name){
        this.name =name;
    }
    static.sayHello(){
        console.log('hello')
    }
    sayName(){
       console.log('my name is' +this.name)
        return this.name
    }
}
class Child extends Parent{
    constructor(name,age){
        super(name);
        this.age =age;
    }
    sayAge(){
        console.log('my age is' +this.age);
        return this.age
    }
}
let parent = new Parent('Parent');
let child = new Child('Child', 18);
console.log('parent: ', parent); // parent:  Parent?{name: "Parent"}
Parent.sayHello(); // hello
parent.sayName(); // my name is Parent
console.log('child: ', child); // child:  Child?{name: "Child", age: 18}
Child.sayHello(); // hello
child.sayName(); // my name is Child
child.sayAge(); // my age is 18

内容总结

以上是互联网集市为您收集整理的JavaScript面试全部内容，希望文章能够帮你解决JavaScript面试所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/631818.html

来源：【匿名】

【上一篇】理解对象《JavaScript高级程序设计》【下一篇】javascript 怎么调用php方法

更多 ►

【JavaScript面试】教程文章相关的互联网学习教程文章

面试中关于JavaScript作用域的5个坑【代码】【图】

在 JavaScript 中，代码块、函数或模块为变量创建作用域。例如 if 代码块为变量 message 创建作用域：`if (true) { const message = ‘Hello‘; console.log(message); // ‘Hello‘ } console.log(message); // throws ReferenceError ` 在 if 代码块作用域内可以访问 message。但是在作用域之外，该变量不可访问。以下是 5 种有趣的情况，其中 JavaScript 作用域的行为与你预期的不同。你可能会研究这些案例以提高...

Javascript面试题

1、什么是JavaScript？（这是基本题，对很多程序员来说也是送分题！）JavaScript是客户端和服务器端脚本语言，可以插入到HTML页面中，并且是目前较热门的Web开发语言。同时，JavaScript也是面向对象编程语言。类似的基本题目还包括：JavaScript变量都有哪些类型? 5种原始类型（primitive type），即Undefined、Null、Boolean、Number和String2、列举Java和JavaScript之间的区别？Java是一门十分完整、成熟的编程语言。相比之下，Ja...

javascript面试--网络收集

史上最全的Javascript面试题总结（内附答案） - CSDN博客http://blog.csdn.net/u011277123/article/details/702087686、什么是未声明和未定义的变量？--为什么不是为赋值？未声明的变量是程序中不存在且未声明的变量。如果程序尝试读取未声明变量的值，则会遇到运行时错误。未定义的变量是在程序中声明但尚未给出任何值的变量。如果程序尝试读取未定义变量的值，则返回未定义的值。12、说明如何使用JavaScript提交表单？--jQ中有类...

前端JavaScript面试题个人总结【代码】

1、JS有哪些数据类型主要数据类型：Undefined、Null、Boolean、Number、String引用数据类型：object、array、function2、JS的组成ECMAScript（核心）：JavaScript 语言基础DOM（文档对象模型）：规定了访问HTML和XML的接口BOM（浏览器对象模型）：提供了浏览器窗口之间进行交互的对象和方法3、介绍JS有哪些内置对象数据封装类对象：Object、Array、Boolean、Number、String其他对象：Function、Arguments、Math、Date、RegExp、Err...

5个经典的JavaScript面试题【代码】

在IT界中公司对JavaScript开发者的要求还是比较高的，但是如果JavaScript开发者的技能和经验都达到了一定的级别，那他们还是很容易跳到优秀的公司的，当然薪水就更不是问题了。但是在面试之前，面试准备也应该足够的充分，毕竟不是每个优秀的开发者都能在短时间内表现自己。在这篇文章中，我将会列出5个常见的前端开发面试题。看到这里你证明你一定是个程序员或是HR了，不防把文章看完，了解一下自己还有什么不足之处，有什么问题希...

一道javascript算法面试题

实现一个数组内所有元素的和。代码如下:function add(runningTotal, currentValue) {return runningTotal + currentValue; } var nums = [1,2,3,4,5,6,7,8,9,10]; var sum = nums.reduce(add); console.log(sum); // 显示55请写出reduce的实现功能。答案如下：Array.prototype.reduce=function(callback){ var total=0; this.forEach(function(e){ total=callback(total,parseInt(e));}); return total; };原文：http:/...

JavaScript面试题总结系列（八）【代码】

8. JavaScript - this对象this对象this总是指向函数的直接调用者（而非间接调用者）如果有new关键字，this指向new出来的那个对象在事件中，this指向触发这个事件的对象，特殊的是，IE中的attachEvent中的this总是指向全局对象Window对于匿名函数或者直接调用的函数来说，this指向全局上下文（浏览器为window，NodeJS为global）当然还有es6的箭头函数，箭头函数的指向取决于该箭头函数声明的位置，在哪里声明，this就指向哪里this，...

前端面试问题（JavaScript）【代码】

JavaScript部分1.引起内存泄漏的操作有哪些1.全局变量引起2.闭包引起3.dom清空，事件未清除4.子元素存在引用5.被遗忘的计时器 2.如何实现ajax请求通过实例化一个XMLHttpRequest对象得到一个实例，调用实例的open方法为这次 ajax请求设定相应的http方法、相应的地址和以及是否异步，当然大多数情况下我们都是选异步，以异步为例，之后调用send方法ajax请求，这个方法可以设定需要发送的报文主体，然后通过监听readystatechange事件...

前端面试：基础javascript篇（二）

11. js的new操作符做了哪些事情new 操作符新建了一个空对象，这个对象原型指向构造函数的prototype，执行构造函数后返回这个对象。 12.改变函数内部this指针的指向函数（bind，apply，call的区别）通过apply和call改变函数的this指向，他们两个函数的第一个参数都是一样的表示要改变指向的那个对象，第二个参数，apply是数组，而call则是arg1,arg2...这种形式。通过bind改变this作用域会返回一个新的函数，这个函数不会马上执行。 ...

java Html&JavaScript面试题：判断第二个日期比第一个日期大

如何用脚本判断用户输入的的字符串是下面的时间格式2004-11-21 必须要保证用户的输入是此格式，并且是时间，比如说月份不大于12等等，另外我需要用户输入两个，并且后一个要比前一个晚，只允许用JAVASCRIPT，请详细帮助作答，提示：可用正则表达式提前判断一下格式，然后提取各时间字段内容写出js及html代码原文：https://www.cnblogs.com/qingyundian/p/8379630.html

前端javaScript经典面试题【代码】

1.alert(1&&2),alert(1||0) alert(1&&2)的结果是2 只要“&&”前面是false，无论“&&”后面是true还是false，结果都将返“&&”前面的值; 只要“&&”前面是true，无论“&&”后面是true还是false，结果都将返“&&”后面的值; 这个就是只有前面的为对，才能进行下去，而且必须有个返回值。这里主要是因为只有前面的为true，才会进行后面的运算，返回的就是后面的值。如果前面的是false,后面的也就没有意义，直接返回前面的结果...

JavaScript面试库【代码】

1、将一段字符串转成驼峰命名法。var str = "web-kit-index"; function to(str){var j = str.split("-");for(var i=1,len=j.length;i<len;i++){j[i] = j[i].charAt(0).toUpperCase()+j[i].substring(1);}return j.join(""); } console.log(to(str));或function to(str){var reg = /-(\w)/g;return str.replace(reg,function(a,b){return b.toUpperCase();})} console.log(to(str)); 2、判断一段字符串中出现最多的是哪个字符并且出...

前端面试-难点问题2-java和javascript的区别

经过多方面的参考，结合自己掌握的知识，总结了一下java和javascript的区别。欢迎大家评论！　　一、关系　　　　虽然java和javascript在名字和语法上有一点相似，并且有一些联系，javascript语法源自java。但其实他们是两个公司开发的不同的产品，两种完全不同的编程语言。Java是SUN公司推出的新一代面向对象的程序设计语言，特别适合于Internet应用程序开发，前身是Oak语言；而JavaScript是Netscape公司的产品，其目的是为了扩展...

前端面试题：JS篇【代码】

1.var let const区别var是ES5语法，let const是ES6语法；　　var有变量提升(不会报错，只会打印出undefined)var和let是变量可以修改，count是常量不可以修改let和count是块级作用域，var没有2.typeof能判断哪些类型undefined、string、number、boolean、symbol [值类型]　　object(注意 typeof null === ‘object’) [引用类型instanceof]　　function3.列举强制类型转换和隐式类型转换强制 parseInt parseFloat Number string toS...

关于一道JS面试题的思考【代码】【图】

题目：for (var i = 0; i < 5; i++) {setTimeout(function() {console.log(new Date, i);}, 1000); } console.log(new Date, i);　　1、面对这段代码时给出的结果也不尽相同，以下是典型的答案：　　A. 20% 的人会快速扫描代码，然后给出结果：0,1,2,3,4,5；　　B. 30% 的人会拿着代码逐行看，然后给出结果：5,0,1,2,3,4；　　C. 50% 的人会拿着代码仔细琢磨，然后给出结果：5,5,5,5,5,5；　　只要你对 JS 中同步和异步代码的区别、...

首页 / JAVASCRIPT / JavaScript面试

JavaScript面试

内容导读

内容图文

面试

DOM事件类

事件级别

DOM事件模型和事件流

描述DOM事件捕获的具体流程

事件代理(事件委托)

Event对象常见的应用

原型链

创建对象的方法

直接字面量创建

构造函数创建

Object.Create()

总结

原型链

instanceof原理

new运算符

面向对象

类的申明

类的继承

ES6继承

内容总结

内容备注

内容手机端

【JavaScript面试】教程文章相关的互联网学习教程文章

JAVASCRIPT - 相关标签

面试 - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程