web典型理论整理——JS部分
1.JS的两大支柱
- 函数式编程
- 基于原型的面向对象编程
2.什么是闭包?作用和好处是什么?与普通函数的区别?
闭包 由外部定义的内部函数,有权访问另一个函数作用域中的变量。闭包就是函数中的函数,里面的函数可以访问外面函数的变量,外面的变量的是这个内部函数的一部分。
闭包的作用和好处
a.闭包给访问外部函数定义的内部变量创造了条件。将关于函数的一切封闭到了函数内部,减少了全局变量。
b.可以使变量长期保存在内存中,生命周期比较长。
c.闭包不能滥用,否则会导致内存泄露,影响网页的性能。闭包使用完了后,要立即使用资源,将引用变量指向null。
与普通函数的区别
a.普通函数也能曝光内部的值,但是占用的内存无法释放且函数使用的变量定义到了函数外部不便于理解和管理。
b.函数每次执行时都会且只会初始化其内部变量,导致了闭包与普通函数的最大区别。
c.每次调用普通函数时他内部都会被初始化成一致状态,导致执行结果是一致的。
闭包不同,它的本质是内部函数,调用闭包只会初始化内部函数变量,外部函数的变量没有初始化,实现了变量值得传递。外部函数只在定义闭包时被初始化,闭包消亡时内存被收回。
3.JavaScript原型,原型链?有什么特点?
原型 每个对象都有其内部初始化的一个属性,就是原型prototype。
原型链 当我们访问一个对象的属性时,如果这个对象内部不存在该属性,他就会去prototype里找这个属性,这个prototype又有自己的prototype,于是就有了原型链。
特点 JavaScript对象是通过引用来传递的,我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时,与之相关的对象也会继承这一改变。
4.eval作用是什么?
a.把字符串参数解析成JS代码并运行,并返回执行的结果;
b.计算字符串和由JSON字符串转换为JSON对象的时候可以用eval
5.JavaScript的数据类型有哪些?如何判断?
数据类型
基本类型:string,number,boolean
特殊类型:undefined,null
引用类型:Object,Function,Array,Date
判断
a.typeof 返回一个表示数据类型的字符串,返回结果包括:number、boolean、string、object、undefined、function等6种数据类型。
b.instanceof 会沿着原型链查找
c.Object.prototype.toString 原生对象和基本类型
6.如何实现JavaScript继承?有何优缺点?
Js的继承大体上就是两种:对象冒充、原型方式。
通过使用继承,程序员可以在不同的子类中多次重新使用父类中的代码,使程序结构清晰,易于维护和修改,而子类又可以提供一些特殊的行为,这些特殊的行为在父类中是没有的 。
a.原型链:利用原型让一个引用类型继承另外一个引用类型的属性和方法。
优点:简单,易于实现
缺点:来自原型对象的引用属性是所有实例共享的;创建子类实例时,无法向父类构造函数传参
b.借用构造函数:在子类型构造函数的内部调用超类构造函数,通过使用call()和apply()方法可以在新创建的对象上执行构造函数。
优点:解决了子类实例共享父类引用属性的问题;创建子类实例时,可以向父类构造函数传参
缺点:无法实现函数复用,每个子类实例都持有一个新的fun函数,太多了就会影响性能,内存爆炸。
c.组合继承:将原型链和借用构造函数的技术组合在一块,从而发挥两者之长的一种继承模式。
优点:不存在引用属性共享问题;可传参;函数可复用
缺点:子类原型上有一份多余的父类实例属性,因为父类构造函数被调用了两次,生成了两份,造成内存浪费
d.原型式继承:借助原型可以基于已有的对象创建新对象,同时还不必须因此创建自定义的类型。
优点:从已有对象衍生新对象,不需要创建自定义类型
缺点:原型引用属性会被所有实例共享,整个父类对象来充当了子类原型对象,所以这个缺陷无可避免;无法实现代码复用
e.寄生式继承:创建一个仅用于封装继承过程的函数,该函数在内部以某种方式来增强对象,最后再像真正是它做了所有工作一样返回对象。
优点:不需要创建自定义类型
缺点:无法实现函数复用
f.寄生组合式继承:通过借用函数来继承属性,通过原型链的混成形式来继承方法
优点:避免了原型链和借用构造函数的缺陷,融合了它们的优点,而且,instanceof 和isPrototypeOf()也能够用于识别基于组合继承创建的对象。
7.:befor和::before有什么区别?
相同点 都可以用来表示伪类对象,用来设置对象前的内容。:befor和::before写法是等效的
不同点 :befor是Css2的写法,::before是Css3的写法。:before的兼容性要比::before好 ,不过在H5开发中建议使用::before比较好。
8.面向对象三大基本特性?五大基本原则?
三大特性
a.封装 就是把客观事物封装成抽象的类,并且类可以把自己的数据和方法只让可信的类或者对象操作,对不可信的进行信息隐藏。一个类就是一个封装了数据以及操作这些数据的代码的逻辑实体。在一个对象内部,某些代码或某些数据可以是私有的,不能被外界访问。通过这种方式,对象对内部数据提供了不同级别的保护,以防止程序中无关的部分意外的改变或错误的使用了对象的私有部分。
b.继承 指可以让某个类型的对象获得另一个类型的对象的属性的方法。它支持按级分类的概念。继承可以使用现有类的所有功能,并在无需重新编写原来的类的情况下对这些功能进行扩展。
c.多态 是指一个类实例的相同方法在不同情形有不同表现形式。是指一个程序中同名的方法共存的情况,调用者只需使用同一个方法名,系统会根据不同情况,调用相应的不同方法,从而实现不同的功能。实现多态的方式有覆盖和重载。
五大基本原则
a.单一职责原则 指一个类的功能要单一,不能包罗万象。
b.开放封闭原则 一个模块在扩展性方面应该是开放的而在更改性方面应该是封闭的。
c.替换原则 子类应当可以替换父类并出现在父类能够出现的任何地方。
d.依赖原则 具体依赖抽象,上层依赖下层。
e.接口分离原则 模块间要通过抽象接口隔离开,而不是通过具体的类强耦合起来
9.事件是什么?IE与火狐的事件处理机制有什么区别?如何阻止冒泡?
事件 事件用于监听浏览器的操作行为,浏览器触发动作时被捕捉到而调用相应的函数。
事件处理机制 IE是事件冒泡、火狐是 事件捕获;
阻止冒泡 ev.stopPropagation();
10.new操作符具体干什么?
a.创建一个空对象
b.设置原型链
c.让Func中的this指向obj,并执行Func的函数体。
d.判断Func的返回值类型:
11.JavaScript中this的理解?
this表示当前对象,this的指向是根据调用的上下文来决定的,默认指向window对象,指向window对象时可以省略不写; 调用的上下文环境包括全局和局部全局环境.
全局环境就是在<script></script>里面,这里的this始终指向的是window对象
局部环境(1)在全局作用域下直接调用函数,this指向的还是window对象
(2)对象函数调用,哪个对象调用就指向哪个对象
(3)使用 new 实例化对象,在构造函数中的this指向实例化对象。
(4)使用call或apply改变this的指向.
12.浅谈JavaScript模块化?
模块化能解决:
模块的版本管理 。通过别名等配置,配合构建工具,可以比较轻松地实现模块的版本管理。
提高可维护性 。模块化可以让每个文件的职责单一,非常有利于代码的维护。Sea.js 还提供了 nocache、debug 等插件,拥有在线调试等功能,能比较明显地提升效率。
前端性能优化 。Sea.js 通过异步加载模块,这对页面性能非常有益。Sea.js 还提供了 combo、flush 等插件,配合服务端,可以很好地对页面性能进行调优。
跨环境共享模块 。CMD 模块定义规范与 Node.js 的模块规范非常相近。通过 Sea.js 的 Node.js 版本,可以很方便实现模块的跨服务器和浏览器共享
AMD规范
简单说: 就是 异步模块定义(Asynchronous Module Definition),它是 依赖前置 (因为依赖必须一开始就写好)会先 尽早地执行(依赖)模块 , 相当于所有的require都被提前了,它的 require 分全局和局部, 一个API当多个用 。
define() 函数
14.常见兼容性问题及解决?
16.Var是什么?说出他在JS中的重要性?
17.null和undefined的区别?
18.异步加载的方案?
defer,只支持IE ; async; 创建script,插入到DOM中,加载完毕后callBack
19.js数组去重?数组内删除某元素?
20.
21.angularJs的优点,如何使用angular进行单页面的开发?
22.JavaScript的作用域?
23.document.ready和onLoad的区别?
24.离线存储如何实现?
25.call()和apply()的作用?
相同点:两个方法产生的作用是完全一样的,都用来改变当前函数调用的对象。
不同点:apply传入的是一个参数数组,也就是将多个参数组合成为一个数组传入
call从第二个参数开始,依次传值给调用函数的参数
26.文本中所有英文首字母大写?
27.程序中捕获异常的方法?
28.什么是双向绑定和单项数据流,他们之间有什么区别?
双向绑定是说 UI 模型和数据模型绑定,当界面发生变化的时候,数据模型也会跟着变化,反之亦然。 单向数据流是数据模型是唯一资源,改变界面只会触发消息通知把用户意图发送给数据模型(类似 React 中的 “store”),只有数据模型才能去改变应用的状态,这样就保证数据永远朝一个方向流动,能够让代码非常容易理解。单向数据流是确定的,然而双向数据绑定会有副作用让数据流难以琢磨和跟踪。React 是一个在单向数据流方向的新权威例子,Angular 是一个使用双向数据流的流行框架
29.Node.js的适用场景?
高并发、聊天、实时消息推送
30.document.write和innerHTML的区别
document.write只能重绘整个页面
innerHTML可以重绘页面一部分
31.JS的事件流模型
事件冒泡:事件开始由最具体的元素接受,然后逐级向上传播
事件捕捉:事件由最不具体的节点先接受,然后逐级向下,一直到最具体的
DOM事件流:三个阶段:事件捕捉,目标阶段,事件冒泡
32.js延迟加载的方式有哪些?
defer和async、动态创建DOM方式(用得最多)、按需异步载入js
AJAX相关
1.ajax是什么?最大的特点是什么?有什么优缺点?
Ajax 是一种异步请求数据的一种技术,对于改善用户的体验和程序的性能很有帮助。
2.什么是跨域请求?请求如何解决跨域问题?
跨域请求 基于JavaScript的安全,JavaScript同源策略要求一个网站不能调用其它网站的js对象。构成跨域的条件就是一个页面的URL协议、域名、端口与另一个页面的URL只要有一个不同就构成了跨域请求。
解决跨域问题 jsonp、 iframe、window.name、window.postMessage、服务器上设置代理页面
3.浅谈同步和异步的区别?
同步的概念
同步,是一种线性执行的方式,执行的流程不能跨越。一般用于流程性比较强的程序,我们做的用户登录功能也是同步处理的,必须用户通过用户名和密码验证后才能进入系统的操作。
异步的概念
异步,是一种并行处理的方式,不必等待一个程序执行完,可以执行其它的任务。在程序中异步处理的结果通常使用回调函数来处理结果。在JavaScript中实现异步的方式主要有Ajax和H5新增的Web Worker。
4.介绍一下XmlHttpRequest对象?
5.ajax应用和传统web应用有什么不同?
6.ajax请求总共有几种callback状态?
7.ajax和JavaScript有什么区别?
8.ajax技术体系的组成部分?
9.动态加载如何实现?
10.ajax中get和post的区别?
11.JSON的理解
JSON(javascript Object Notation)是一种轻量级的数据交互格式;他是基于javascipt的一个子集。数据格式简单,易于阅读,占用宽带小
正则表达式相关
1.正则基本类型?
2.验证邮箱、手机号?
3.去掉字符串两端空格?