前端JavaScript知识点

1,介绍js的基本数据类型。    

Undefined、Null、Boolean、Number、String


2,介绍js有哪些内置对象?    

Object 是 JavaScript 中所有对象的父对象   

数据封装类对象:Object、Array、Boolean、Number 和 String    

其他对象:Function、Arguments、Math、Date、RegExp、Error


3,JavaScript原型,原型链 ? 有什么特点? 

每个对象都会在其内部初始化一个属性,就是prototype(原型),当我们访问一个对象的属性时,如果这个对象内部不存在这个属性,那么他就会去prototype里找这个属性,这个prototype又会有自己的prototype,于是就这样一直找下去,也就是我们平时所说的原型链的概念。

关系:instance.constructor.prototype = instance.__proto__

特点:

JavaScript对象是通过引用来传递的,我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时,与之相关的对象也会继承这一改变。

当我们需要一个属性的时,Javascript引擎会先看当前对象中是否有这个属性,如果没有的话,就会查找他的Prototype对象是否有这个属性,如此递推下去,一直检索到 Object 内建对象。 


4,JavaScript有几种类型的值?,你能画一下他们的内存图吗?

栈:原始数据类型(Undefined,Null,Boolean,Number、String)

堆:引用数据类型(对象、数组和函数)

两种类型的区别是:存储位置不同;

1,原始数据类型直接存储在栈(stack)中的简单数据段,占据空间小、大小固定,属于被频繁使用数据,所以放入栈中存储;

2,引用数据类型存储在堆(heap)中的对象,占据空间大、大小不固定,如果存储在栈中,将会影响程序运行的性能;引用数据类型在栈中存储了指针,该指针指向堆中该实体的起始地址。当解释器寻找引用值时,会首先检索其在栈中的地址,取得地址后从堆中获得实体



5,JavaScript继承的几种实现方式?

1,构造函数继承,使用call和apply两个方法的特性可以实现,改变方法中的this

2,原型链继承

3,组合式继承


6,javascript创建对象的几种方式?

javascript创建对象简单的说,无非就是使用内置对象或各种自定义对象,当然还可以用JSON;但写法有很多种,也能混合使用。

1、对象字面量的方式       

person={firstname:"Mark",lastname:"Yun",age:25,eyecolor:"black"}; 

2、用function来模拟无参的构造函数

            function Person(){} 

                        var person=new Person();//定义一个function,如果使用new"实例化",该function可以看作是一个Class 

                        person.name=“Mark"; 

                        person.age="25"; 

                        person.work=function(){ 

                        alert(person.name+" hello..."); 

            } 

            person.work(); 

3、用function来模拟参构造函数来实现(用this关键字定义构造的上下文属性)

            function Pet(name,age,hobby){ 

                        this.name=name;//this作用域:当前对象 

                        this.age=age; 

                        this.hobby=hobby; 

                        this.eat=function(){ 

                                    alert("我叫"+this.name+",我喜欢"+this.hobby+",是个程序员"); 

                         } 

             } 

            var maidou =new Pet("麦兜",25,"coding");//实例化、创建对象 

            maidou.eat();//调用eat方法 

4、用工厂方式来创建(内置对象)

                       var wcDog =new Object(); 

                       wcDog.name="旺财"; 

                       wcDog.age=3; 

                       wcDog.work=function(){ 

                                    alert("我是"+wcDog.name+",汪汪汪......"); 

                         } 

            wcDog.work(); 

5、用原型方式来创建

            function Dog(){ } 

            Dog.prototype.name="旺财"; 

            Dog.prototype.eat=function(){alert(this.name+"是个吃货");} 

            var wangcai =new Dog(); 

            wangcai.eat(); 


5、用混合方式来创建

            function Car(name,price){ 

                        this.name=name; 

                        this.price=price; 

            } 

            Car.prototype.sell=function(){ 

                        alert("我是"+this.name+",我现在卖"+this.price+"万元"); 

             } 

             var camry =new Car("凯美瑞",27); 

            camry.sell(); 


7,Javascript作用链域?

首先在js中有作用域的概念,指的就是一个变量的活动范围,分为全局作用域和局部作用域,全局作用域指的是window,局部作用域指的是每一个函数内部,在作用域中查找一个变量首先在自己当前作用域查找找不到向上级查找,逐层向上找到window为止,找不到就会抛出一个错误,这个查找的过程就叫作用域链,作用域链的作用是保证执行环境里有权访问的变量和函数是有序的,作用域链的变量只能向上访问,变量访问到window对象即被终止,作用域链向下访问变量是不被允许的。作用域链有一个需要要注意的问题就是变量提升,当一个变量的使用在定义之前的时候就会得到一个undefined值,在es6中则不会出现这个问题,es6不允许在定义之前使用


8,谈谈This对象的理解。

this分为几个不同的使用场景,在function中this指的的是window,如果是使用new 调用的话this指的是当前的实例化对象,在事件调用函数中this指的调用事件的window特殊的是在IE中的attachEvent中的this总是指向全局对象Window;,在定时器中this指的是window,在es6中有一个箭头函数,在箭头函数中this永远指向的是父级对象


9,什么是window对象? 什么是document对象? 

window:它是一个顶层对象,而不是另一个对象的属性,即浏览器的窗口。

document:代表整个HTML 文档,可用来访问页面中的所有元素

Window 对象表示当前浏览器的窗口,是JavaScript的顶级对象。我们创建的所有对象、函数、变量都是 Window 对象的成员。

Window 对象的方法和属性是在全局范围内有效的。

Document 对象是 HTML 文档的根节点与所有其他节点(元素节点,文本节点,属性节点, 注释节点)

Document 对象使我们可以通过脚本对 HTML 页面中的所有元素进行访问

Document 对象是 Window 对象的一部分,可通过 window.document 属性对其进行访问


10,null,undefined 的区别? 

null        表示一个对象被定义了,值为“空值”; 

undefined   表示不存在这个值。 


typeof undefined                      //"undefined" 

undefined :是一个表示"无"的原始值或者说表示"缺少值",就是此处应该有一个值,但是还没有定义。当尝试读取时会返回 undefined; 

例如变量被声明了,但没有赋值时,就等于undefined


typeof null        //"object" 

null : 是一个对象(空对象, 没有任何属性和方法); 

例如作为函数的参数,表示该函数的参数不是对象;


注意:

在验证null时,一定要使用 === ,因为 == 无法分别 null 和 undefined 

undefined表示"缺少值",就是此处应该有一个值,但是还没有定义。典型用法是:

1)变量被声明了,但没有赋值时,就等于undefined。

2) 调用函数时,应该提供的参数没有提供,该参数等于undefined。 

3)对象没有赋值的属性,该属性的值为undefined。

4)函数没有返回值时,默认返回undefined。


null表示"没有对象",即该处不应该有值。典型用法是:

1)作为函数的参数,表示该函数的参数不是对象。

2)作为对象原型链的终点。


11,事件是?IE与火狐的事件机制有什么区别?如何阻止冒泡?

1. 我们在网页中的某个操作(有的操作对应多个事件)。例如:当我们点击一个按钮就会产生一个事件。是可以被 JavaScript 侦测到的行为。 

2. 事件处理机制:IE是事件冒泡、Firefox同时支持两种事件模型,也就是:捕获型事件和冒泡型事件; 

3. ev.stopPropagation();(旧ie的方法 ev.cancelBubble = true;) 


12,什么是闭包(closure),为什么要用它?

闭包是指有权访问另一个函数作用域中变量的函数,创建闭包的最常见的方式就是在一个函数内创建另一个函数,通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域,将函数内部的变量和方法传递到外部。

闭包的特性:

1,函数内再嵌套函数

2,内部函数可以引用外层的参数和变量

3,参数和变量不会被垃圾回收机制回收

闭包的使用场景

常见的闭包的使用场景就是模块化,用来做模块内部的实现通过接口的扩展供其他模块使用

在就是闭包可以用来缓存值,减少不必要的技术,例如vue里面的计算属性


13,javascript 代码中的"use strict";是什么意思 ? 使用它区别是什么? 

use strict是一种ECMAscript 5 添加的(严格)运行模式,这种模式使得 Javascript 在更严格的条件下运行, 


使JS编码更加规范化的模式,消除Javascript语法的一些不合理、不严谨之处,减少一些怪异行为。

默认支持的糟糕特性都会被禁用,比如不能用with,也不能在意外的情况下给全局变量赋值;

全局变量的显示声明,函数必须声明在顶层,不允许在非函数代码块内声明函数,arguments.callee也不允许使用;

消除代码运行的一些不安全之处,保证代码运行的安全,限制函数中的arguments修改,严格模式下的eval函数的行为和非严格模式的也不相同;


提高编译器效率,增加运行速度;

为未来新版本的Javascript标准化做铺垫。


14,如何判断一个对象是否属于某个类?

1,使用instanceof

if(a instanceof Person){ alert('yes’); }


15,Javascript中,有一个函数,执行时对象查找时,永远不会去查找原型,这个函数是?

hasOwnProperty

 javaScript中hasOwnProperty函数方法是返回一个布尔值,指出一个对象是否具有指定名称的属性。此方法无法检查该对象的原型链中是否具有该属性;该属性必须是对象本身的一个成员。


使用方法:

object.hasOwnProperty(proName)

其中参数object是必选项。一个对象的实例。

proName是必选项。一个属性名称的字符串值。


如果 object 具有指定名称的属性,那么JavaScript中hasOwnProperty函数方法返回 true,反之则返回 false。 



16,JSON 的了解? 

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。 

它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小 

如:{"age":"12", "name":"back"}

JSON字符串转换为JSON对象:

var obj =eval('('+ str +')');

var obj = str.parseJSON();

var obj = JSON.parse(str);


JSON对象转换为JSON字符串:

var last=obj.toJSONString();

var last=JSON.stringify(obj);


17,document.write和 innerHTML的区别 

document.write只能重绘整个页面

innerHTML可以重绘页面的一部分


18,DOM操作——怎样添加、移除、移动、复制、创建和查找节点?

1)创建新节点

createDocumentFragment()    //创建一个DOM片段 

createElement()   //创建一个具体的元素 

createTextNode()   //创建一个文本节点 

2)添加、移除、替换、插入

appendChild()

removeChild()

replaceChild()

insertBefore() //在已有的子节点前插入一个新的子节点

3)查找

getElementsByTagName()    //通过标签名称 

getElementsByName()    //通过元素的Name属性的值(IE容错能力较强,会得到一个数组,其中包括id等于name值的) 

getElementById()    //通过元素Id,唯一性 


19,.call() 和 .apply() 的区别? 

同:都能够改变方法的执行上下文(执行环境),将一个对象的方法交给另一个对象来执行,并且是立即执行

异:call方法从第二个参数开始可以接收任意个参数,每个参数会映射到相应位置的func的参数上,可以通过参数名调用,但是如果将所有的参数作为数组传入,它们会作为一个整体映射到func对应的第一个参数上,之后参数都为空

apply方法最多只有两个参数,第二个参数接收数组或者类数组,但是都会被转换成类数组传入func中,并且会被映射到func对应的参数上


20,数组和对象有哪些原生方法,列举一下?

[if !supportLists]· [endif]concat()    连接两个或更多的数组,并返回结果。    

[if !supportLists]· [endif]join() 把数组的所有元素放入一个字符串元素通过指定的分隔符进行分隔。

[if !supportLists]· [endif]pop()    删除并返回数组的最后一个元素    

[if !supportLists]· [endif]push()    向数组的末尾添加一个或更多元素,并返回新的长度。    

[if !supportLists]· [endif]reverse()    颠倒数组中元素的顺序。    

[if !supportLists]· [endif]shift()    删除并返回数组的第一个元素    

[if !supportLists]· [endif]slice()    从某个已有的数组返回选定的元素    

[if !supportLists]· [endif]sort()    对数组的元素进行排序    

[if !supportLists]· [endif]splice()    删除元素,并向数组添加新元素。    

[if !supportLists]· [endif]toSource()    返回该对象的源代码。    

[if !supportLists]· [endif]toString()    把数组转换为字符串,并返回结果。    

[if !supportLists]· [endif]toLocaleString()    把数组转换为本地数组,并返回结果。    

[if !supportLists]· [endif]unshift()    向数组的开头添加一个或更多元素,并返回新的长度。    

[if !supportLists]· [endif]valueOf()    返回数组对象的原始值    

21,字符串有哪些原生方法,列举一下?


22,那些操作会造成内存泄漏?

1,使用闭包的时候如果在闭包变量中保存了大量的dom结构而且不去使用长期存在的时候

2,内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。

3,垃圾回收器定期扫描对象,并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0(没有其他对象引用过该对象),或对该对象的惟一引用是循环的,那么该对象的内存即可回收。 

4,setTimeout 的第一个参数使用字符串而非函数的话,会引发内存泄漏。 

5,闭包、控制台日志、循环(在两个对象彼此引用且彼此保留时,就会产生一个循环)


23,页面重构怎么操作?

网站重构:在不改变外部行为的前提下,简化结构、添加可读性,而在网站前端保持一致的行为。

也就是说是在不改变UI的情况下,对网站进行优化,在扩展的同时保持一致的UI。

对于传统的网站来说重构通常是:

表格(table)布局改为DIV+CSS

使网站前端兼容于现代浏览器(针对于不合规范的CSS、如对IE6有效的)

对于移动平台的优化

针对于SEO进行优化

深层次的网站重构应该考虑的方面

减少代码间的耦合              

让代码保持弹性

严格按规范编写代码

设计可扩展的API

代替旧有的框架、语言(如VB)

增强用户体验


通常来说对于速度的优化也包含在重构中

压缩JS、CSS、image等前端资源(通常是由服务器来解决)

程序的性能优化(如数据读写)

采用CDN(内容分发网络)来加速资源加载

对于JS DOM的优化

HTTP服务器的文件缓存


24,列举IE与其他浏览器不一样的特性?

1、事件不同之处:

    1-1,触发事件的元素被认为是目标(target)。而在 IE 中,目标包含在 event 对象的 srcElement 属性; 

    1-2,获取字符代码、如果按键代表一个字符(shift、ctrl、alt除外),IE 的 keyCode 会返回字符代码(Unicode),DOM 中按键的代码和字符是分离的,要获取字符代码,需要使用 charCode 属性; 

    1-3,阻止某个事件的默认行为,IE 中阻止某个事件的默认行为,必须将 returnValue 属性设置为 false,Mozilla 中,需要调用 preventDefault() 方法; 

    1-4,停止事件冒泡,IE 中阻止事件进一步冒泡,需要设置 cancelBubble 为 true,Mozzilla 中,需要调用 stopPropagation(); 


25,什么叫优雅降级和渐进增强?

优雅降级:Web站点在所有新式浏览器中都能正常工作,如果用户使用的是老式浏览器,则代码会针对旧版本的IE进行降级处理了,使之在旧式浏览器上以某种形式降级体验却不至于完全不能用。

如:border-shadow


渐进增强:从被所有浏览器支持的基本功能开始,逐步地添加那些只有新版本浏览器才支持的功能,向页面增加不影响基础浏览器的额外样式和功能的。当浏览器支持时,它们会自动地呈现出来并发挥作用。

如:默认使用flash上传,但如果浏览器支持 HTML5 的文件上传功能,则使用HTML5实现更好的体验; 


26,是否了解公钥加密和私钥加密。

一般情况下是指私钥用于对数据进行签名,公钥用于对签名进行验证;

 HTTP网站在浏览器端用公钥加密敏感数据,然后在服务器端再用私钥解密。


27,对Node的优点和缺点提出了自己的看法?

*(优点)因为Node是基于事件驱动和无阻塞的,所以非常适合处理并发请求,因此构建在Node上的代理服务器相比其他技术实现(如Ruby)的服务器表现要好得多。此外,与Node代理服务器交互的客户端代码是由javascript语言编写的,因此客户端和服务器端都用同一种语言编写,这是非常美妙的事情。


*(缺点)Node是一个相对新的开源项目,所以不太稳定,它总是一直在变,而且缺少足够多的第三方库支持。看起来,就像是Ruby/Rails当年的样子。


28,解释一下事件代理

事件代理的原理其实就和作用域链的原理差不多,但是事件代理是利用事件的冒泡原理来实现的,事件代理就是通过给祖先元素添加事件,通过事件目标对象开始向上查找找到匹配的子节点为止,如果找不到则到绑定事件的那个祖先元素为止,找到了就触发事件,并且可以通过js中call和apply来改变触发事件函数中的this为当前绑定节点,也是通过一层一层逐层向上的方式进行匹配查找而触发对应事件,好处就是可以使后添加的dom元素也同样有之前存在元素的事件,jquery中可以使用on,delegate,live实现的,不过在jquery1.7版本以后吧live给废除了,原因就是live绑定事件的祖先元素是整个html页面的根节点,所以性能消耗比较大,在后边的版本中给删除了,使用on,delegate代替

优点:

可以减少事件注册,节省大量内存占用

可以将事件应用于动态添加的子元素上

缺点: 使用不当会造成事件在不应该触发时触发


29,Javascript垃圾回收方法

标记清除(mark and sweep)

            这是JavaScript最常见的垃圾回收方式,当变量进入执行环境的时候,比如函数中声明一个变量,垃圾回收器将其标记为“进入环境”,当变量离开环境的时候(函数执行结束)将其标记为“离开环境”。 

            垃圾回收器会在运行的时候给存储在内存中的所有变量加上标记,然后去掉环境中的变量以及被环境中变量所引用的变量(闭包),在这些完成之后仍存在标记的就是要删除的变量了 


引用计数(reference counting)

            在低版本IE中经常会出现内存泄露,很多时候就是因为其采用引用计数方式进行垃圾回收。引用计数的策略是跟踪记录每个值被使用的次数,当声明了一个 变量并将一个引用类型赋值给该变量的时候这个值的引用次数就加1,如果该变量的值变成了另外一个,则这个值得引用次数减1,当这个值的引用次数变为0的时 候,说明没有变量在使用,这个值没法被访问了,因此可以将其占用的空间回收,这样垃圾回收器会在运行的时候清理掉引用次数为0的值占用的空间。 

            在IE中虽然JavaScript对象通过标记清除的方式进行垃圾回收,但BOM与DOM对象却是通过引用计数回收垃圾的, 也就是说只要涉及BOM及DOM就会出现循环引用问题。 



30,说说严格模式的限制

严格模式主要有以下限制:

变量必须声明后再使用

函数的参数不能有同名属性,否则报错

不能使用with语句

不能对只读属性赋值,否则报错

不能使用前缀0表示八进制数,否则报错

不能删除不可删除的属性,否则报错

不能删除变量delete prop,会报错,只能删除属性delete global[prop]

eval不会在它的外层作用域引入变量

eval和arguments不能被重新赋值

arguments不会自动反映函数参数的变化

不能使用arguments.callee

不能使用arguments.caller

禁止this指向全局对象

不能使用fn.caller和fn.arguments获取函数调用的堆栈

增加了保留字(比如protected、static和interface)

设立"严格模式"的目的,主要有以下几个:

消除Javascript语法的一些不合理、不严谨之处,减少一些怪异行为;

消除代码运行的一些不安全之处,保证代码运行的安全;

提高编译器效率,增加运行速度;

为未来新版本的Javascript做好铺垫。

注:经过测试IE6,7,8,9均不支持严格模式。


31,attribute和property的区别是什么?

attribute是dom元素在文档中作为html标签拥有的属性;

property就是dom元素在js中作为对象拥有的属性。

所以:  

对于html的标准属性来说,attribute和property是同步的,是会自动更新的,

但是对于自定义的属性来说,他们是不同步的,


32,offsetWidth/offsetHeight,clientWidth/clientHeight与scrollWidth/scrollHeight的区别,

offsetWidth/offsetHeight返回值包含content + padding + border,效果与e.getBoundingClientRect()相同

clientWidth/clientHeight返回值只包含content + padding,如果有滚动条,也不包含滚动条

scrollWidth/scrollHeight返回值包含content + padding + 溢出内容的尺寸 


33,focus/blur与focusin/focusout的区别与联系

focus/blur不冒泡,focusin/focusout冒泡

focus/blur兼容性好,focusin/focusout在除FireFox外的浏览器下都保持良好兼容性,如需使用事件托管,可考虑在FireFox下使用事件捕获elem.addEventListener('focus', handler, true)

可获得焦点的元素:

window

链接被点击或键盘操作

表单空间被点击或键盘操作

设置tabindex属性的元素被点击或键盘操作


34,mouseover/mouseout与mouseenter/mouseleave的区别与联系

mouseover/mouseout是标准事件,所有浏览器都支持;mouseenter/mouseleave是IE5.5引入的特有事件后来被DOM3标准采纳,现代标准浏览器也支持

mouseover/mouseout是冒泡事件;mouseenter/mouseleave不冒泡。需要为多个元素监听鼠标移入/出事件时,推荐mouseover/mouseout托管,提高性能

标准事件模型中event.target表示发生移入/出的元素,vent.relatedTarget对应移出/如元素;在老IE中event.srcElement表示发生移入/出的元素,event.toElement表示移出的目标元素,event.fromElement表示移入时的来源元素


35,检测浏览器版本版本有哪些方式?

根据 navigator.userAgent // UA.toLowerCase().indexOf('chrome')

根据 window 对象的成员 // 'ActiveXObject' in window


36,描述浏览器的渲染过程,DOM树和渲染树的区别?

浏览器的渲染过程:

解析HTML构建 DOM(DOM树),并行请求 css/image/js

CSS 文件下载完成,开始构建 CSSOM(CSS树)

CSSOM 构建结束后,和 DOM 一起生成 Render Tree(渲染树)

布局(Layout):计算出每个节点在屏幕中的位置

显示(Painting):通过显卡把页面画到屏幕上

DOM  渲染树 的区别:

DOM树与HTML标签一一对应,包括head和隐藏元素

渲染树不包括head和隐藏元素,大段文本的每一个行都是独立节点,每一个节点都有对应的css属性


37,重绘和回流(重排)的区别和关系?

重绘:当渲染树中的元素外观(如:颜色)发生改变,不影响布局时,产生重绘

回流:当渲染树中的元素的布局(如:尺寸、位置、隐藏/状态状态)发生改变时,产生重绘回流

注意:JS获取Layout属性值(如:offsetLeft、scrollTop、getComputedStyle等)也会引起回流。因为浏览器需要通过回流计算最新值

回流必将引起重绘,而重绘不一定会引起回流


38,如何最小化重绘(repaint)和回流(reflow)

需要要对元素进行复杂的操作时,可以先隐藏(display:"none"),操作完成后再显示

需要创建多个DOM节点时,使用DocumentFragment创建完后一次性的加入document

缓存Layout属性值,如:var left = elem.offsetLeft; 这样,多次使用 left 只产生一次回流

尽量避免用table布局(table元素一旦触发回流就会导致table里所有的其它元素回流)

避免使用css表达式(expression),因为每次调用都会重新计算值(包括加载页面)

尽量使用 css 属性简写,如:用 border 代替 border-width, border-style, border-color

批量修改元素样式:elem.className 和 elem.style.cssText 代替 elem.style.xxx


39script 的位置是否会影响首屏显示时间?

在解析 HTML 生成 DOM 过程中,js 文件的下载是并行的,不需要 DOM 处理到 script 节点。因此,script的位置不影响首屏显示的开始时间。

浏览器解析 HTML 是自上而下的线性过程,script作为 HTML 的一部分同样遵循这个原则

因此,script 会延迟 DomContentLoad,只显示其上部分首屏内容,从而影响首屏显示的完成时间


40,介绍DOM0DOM2DOM3事件处理方式区别

DOM0级事件处理方式:

    btn.onclick = func;

    btn.onclick = null;

DOM2级事件处理方式:

    btn.addEventListener('click', func, false);

    btn.removeEventListener('click', func, false);

    btn.attachEvent("onclick", func);

    btn.detachEvent("onclick", func);

DOM3级事件处理方式:

    eventUtil.addListener(input, "textInput", func);

    eventUtil 是自定义对象,textInput 是DOM3级事件


41,事件的三个阶段

捕获、目标、冒泡


js的冒泡(Bubbling Event)和捕获(Capture Event)的区别

冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。

捕获型事件(event capturing):事件从最不精确的对象(document 对象)开始触发,然后到最精确(也可以在窗口级别捕获事件,不过必须由开发人员特别指定)。

DOM事件流:同时支持两种事件模型:捕获型事件和冒泡型事件,但是,捕获型事件先发生。两种事件流会触及DOM中的所有对象,从document对象开始,也在document对象结束。

事件捕获

当你使用事件捕获时,父级元素先触发,子级元素后触发,即div先触发,p后触发。

事件冒泡

当你使用事件冒泡时,子级元素先触发,父级元素后触发,即p先触发,div后触发。


阻止冒泡

• 在W3c中,使用stopPropagation()方法

• 在IE下设置cancelBubble = true;

在捕获的过程中stopPropagation();后,后面的冒泡过程也不会发生了。

阻止捕获


阻止事件的默认行为,例如click 后的跳转

• 在W3c中,使用preventDefault()方法;

• 在IE下设置window.event.returnValue = false;


42,介绍事件捕获冒泡执行顺序和事件的执行次数?

按照W3C标准的事件:首是进入捕获阶段,直到达到目标元素,再进入冒泡阶段

事件执行次数(DOM2-addEventListener):元素上绑定事件的个数

注意1:前提是事件被确实触发

注意2:事件绑定几次就算几个事件,即使类型和功能完全一样也不会“覆盖”

事件执行顺序:判断的关键是否目标元素

非目标元素:根据W3C的标准执行:捕获->目标元素->冒泡(不依据事件绑定顺序)

目标元素:依据事件绑定顺序:先绑定的事件先执行(不依据捕获冒泡标准)

最终顺序:父元素捕获->目标元素事件1->目标元素事件2->子元素捕获->子元素冒泡->父元素冒泡

注意:子元素事件执行前提 事件确实“落”到子元素布局区域上,而不是简单的具有嵌套关系

在一个DOM上同时绑定两个点击事件:一个用捕获,一个用冒泡。事件会执行几次,先执行冒泡还是捕获?


该DOM上的事件如果被触发,会执行两次(执行次数等于绑定次数)

如果该DOM是目标元素,则按事件绑定顺序执行,不区分冒泡/捕获

如果该DOM是处于事件流中的非目标元素,则先执行捕获,后执行冒泡


43,什么是函数节流?介绍一下应用场景和原理?


函数节流(throttle)是指阻止一个函数在很短时间间隔内连续调用。 只有当上一次函数执行后达到规定的时间间隔,才能进行下一次调用。 但要保证一个累计最小调用间隔(否则拖拽类的节流都将无连续效果)


函数节流用于 onresize, onscroll 等短时间内会多次触发的事件


函数节流的原理:使用定时器做时间节流。 当触发一个事件时,先用 setTimout 让这个事件延迟一小段时间再执行。 如果在这个时间间隔内又触发了事件,就 clearTimeout 原来的定时器, 再 setTimeout 一个新的定时器重复以上流程。


函数节流简单实现:


function throttle(method, context) {

     clearTimeout(methor.tId);

     method.tId = setTimeout(function(){

         method.call(context);

     }, 100); // 两次调用至少间隔 100ms

}

// 调用

window.onresize = function(){

    throttle(myFunc, window);

}


44new 操作符具体干了什么?

创建实例对象,this 变量引用该对象,同时还继承了构造函数的原型

属性和方法被加入到 this 引用的对象中

新创建的对象由 this 所引用,并且最后隐式的返回 this


45JavaScript实现异步编程的方法?

回调函数

事件监听

发布/订阅

Promises对象

Async函数[ES7]


46web开发中会话跟踪的方法有哪些

cookie

session

url参数传递

隐藏input

ip地址

你可能感兴趣的:(前端JavaScript知识点)