前端知识点（四）——js

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。

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

3）对象没有赋值的属性，该属性的值为undefined。

4）函数没有返回值时，默认返回undefined。

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

1）作为函数的参数，表示该函数的参数不是对象。

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

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

我们在网页中的某个操作（有的操作对应多个事件）。例如：当我们点击一个按钮就会产生一个事件。是可以被 JavaScript 侦测到的行为。
事件处理机制：IE是事件冒泡、Firefox同时支持两种事件模型，也就是：捕获型事件和冒泡型事件；
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就会出现循环引用问题。