JS是一门什么样的语言及特点？
- 客户端脚本语言，不需要预编译就可以由解释器直接运行；
- 变量松散定义，属于弱类型语言，对数据类型未做出严格的要求；
- 基于对象,可以使用new创建对象，也能使用现有对象，比如 Object Array Math Date;
- JS的数据类型
基本数据类型 String Number Boolean undefined null -- 指的是简单的数据段，按值访问。
引用数据类型 Object(Array Date Regxp Function) -- 可能有多个值构成的对象 按引用访问。 - JS如何查找元素？ document.
getElementById()
getElementsByClassName()
getElementsByName()
getElementsByTagName()
querySelector()
querySelectorAll()
节点指针
父节点.firstChild -- firstElementChild
父节点.lastChild -- lastElementChild
父节点.childNodes
兄弟节点.previousSibling -- previousElementSibling
兄弟节点.nextSibling -- nextElementSibling
子节点.parentNode - JS如何创建节点? docuement.
createElement(元素标签) 创建元素节点
createAttribute(元素属性)
createTextNode(文本内容) 创建文本节点 - JS如何操作节点(插入、替换、复制、删除)？
appendChild(添加的新子节点) 向子节点列表末尾添加新的子节点
insertBefore(插入当前节点的新节点,已知子节点) 在已知的子节点之前插入新的子节点
son.parentNode.insertBefore
替换节点 replaceChild(要插入的新元素, 将被替换的老元素)
删除节点 removeChild(要删除的节点)
复制节点.cloneNode(true/false) true -- 复制当前节点及其所有子节点 false -- 仅复制当前节点 - JS属性操作？
获取元素属性.getAttribute(元素属性名)
设置属性.setAttribute(元素属性名, 属性值)
删除属性removeAttribute(元素属性名)
7、什么是伪数组？
1、具有 length 属性。
2、按索引方式存储数据。
3、不具有数组的 push()、pop() 等方法或期望 length 属性有什么特殊的行为。
比如 arguments 对象，调用 getElementsByTagName document.childNodes 之类的返回 NodeList对象都属于伪数组。arguments可以通过Array.prototype.slice.call(fakeArray) 将伪数组转换成真正的Array对象;
jQuery中的 $() 对象都是伪数组对象，保存的是DOM对象。基于此也就更能理解 jQuery 的 this。
8、var that=this;
this 关键字代表函数运行时自动生成的一个内部对象，只能在函数内部使用，指向调用函数的那个对象。
9、eval();
eval()函数就像是一个ECMAScript解析器，只接收一个参数，即执行的ECMAScript字符串。将传入的字符串当作实际的语句来解析。
10、什么是Ajax和JSON，它们的优缺点？
Ajax Asynchronous Javascript And XML/异步的javascript和xml
优点：
可以使页面不重载全部内容的情况下加载局部内容，降低数据传输量。
避免用户不断刷新或者跳转页面，提高用户体验。缺点：
对搜索引擎不友好。
要实现ajax下的前后退功能成本较大
可能造成请求数的增加
跨域问题限制
JSON： 1、一种轻量级的数据交换格式，占用带宽小；
2、易阅读编写解析；
3、支持复合数据类型；
4、基于纯文本，跨平台传递极其简单，Javascript原生支持，理想的数据交换格式；
缺点：相对xml通用性较差，数据可描述性较差
11、JSONP与JSON
跨域请求的概念 同一域名不同端口 不同协议(http~https) 不同二级域名 域名和域名对应ip
JSON是一种基于文本的数据交换方式 (不支持跨域)；实际开发中由后端设置允许跨域
JSONP是一种非官方跨域数据交互协议JSON
1、一种轻量级的数据交换格式，占用带宽小；
2、容易阅读编写解析；
3、支持复合数据类型；
4、基于纯文本，跨平台传递极其简单，Javascript原生支持，理想的数据交换格式；
没办法跨域直接获取，就将json包裹在一个合法的js语句中作为js文件传过去。json是想要的东西，jsonp是达到这个目的而普遍采用的一种方式
JSONP是怎么产生的
1、 Ajax直接请求普通文件存在跨域无权限访问的问题
2、Web页面拥有"src"属性的标签都拥有跨域的能力
dataType: "jsonp",
jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数
12、js中的同步和异步
JS 是一门“单线程”的语言，比如一条流水线，不能同时进行多个任务和流程。差别就在流水线上每个流程的执行顺序不同。
同步任务指的是，在主线程上排队执行的任务，形成一个执行栈（execution context stack），只有前一个任务执行完毕，才能执行后一个任务；
异步任务指的是，不进入主线程、而进入"任务队列"（task queue）的任务，只有等主线程任务执行完毕，"任务队列"通知主线程请求执行任务，该任务才会进入主线程执行。
最基础常见的异步是setTimeout和setInterval函数。
13、get 与 post
1、get参数通过url传递，post 放在request body 中。
2、get请求在url中传递的参数是有长度限制的(2048个字符)，post没有。
3、get比post更不安全，因为参数直接暴露在url中，所以不能用来传递敏感信息。
4、get产生一个TCP数据包，post产生两个TCP数据包。
HTTP1.0定义了三种请求方法： GET, POST 和 HEAD方法。
HTTP1.1新增了五种请求方法：OPTIONS, PUT, DELETE, TRACE 和 CONNECT 方法
1418466-20180810112625596-2103906128.png
15、原生js的window.onload与jQuery的$(document).ready(function(){})有什么不同？
如何用原生js实现ready方法？window.onload方法必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。
function ready(fn){
var d = document; //提高性能
if(d.addEventListener){
d.addEventListener("DOMContentLoaded",function(){
//注销事件，避免反复触发
d.removeEventListener("DOMContentLoaded",arguments.callee,false);
fn();
},false)
} else if(d.attachEvent){ //ie9以下
d.attachEvent("onreadystatechange",function(){
d.detachEvent("onreadystatechange",arguments.callee);
fn();
})
}
}
window.onload = function () {
alert('onload');
};
ready(function () {
alert('ready');
});
16、工厂模式、构造函数、原型模式([动态原型模式])
工厂模式:
在函数内创建一个对象，给对象赋予属性及方法再将对象返回。
（ 因为在ECMAScript中无法创建类，所以用函数封装以特定接口创建对象。）
解决了创建多个相似对象的问题，但是工厂模式无从识别对象的类型。
因为全部都是Object，不像Date、Array等，因此出现了构造函数模式。
function createBlog(name, url) {
var o = new Object();
o.name = name;
o.url = url;
o.sayUrl= function() {
alert(this.url);
}
return o;
}
var blog1 = createBlog('luomg', 'https://segmentfault.com/');构造函数模式
可以创建特定类型的对象，类似于Array、Date等原生JS的对象。问题在每个成员无法得到复用，包括函数。
（在于每次创建实例的时候都要重新创建一次方法）
1.按照惯例函数名首写字母为大写
2.没有显示的创建对象
3.直接将属性和方法赋值给了this对象
4.没有return语句
5.使用new创建对象
6.能够识别对象（这正是构造函数模式胜于工厂模式的地方）
function Blog(name, url) {
this.name = name;
this.url = url;
this.alertUrl = function() {
alert(this.url);
}
}
var blog = new Blog('luomg', 'https://segmentfault.com/');原型模式
创建的每个函数都有prototype (原型)属性，这个属性是一个指针，指向一个对象，
而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。
使用原型对象的好处(也是坏处)就是可以让所有对象实例共享它所包含的属性及方法。
function Blog() {
}
Blog.prototype.name = 'luomg';
Blog.prototype.url = 'https://segmentfault.com/';混合模式（原型模式 + 构造函数模式）
function Blog(name, url, friend) {
this.name = name;
this.url = url;
this.friend = friend;
}
Blog.prototype.alertInfo = function() {
alert(this.name + this.url + this.friend);
}
var blog = new Blog('luomg', 'https://segmentfault.com/', ['fn1', 'fn2', 'fn3']);动态原型模式
将所有信息封装在了构造函数中，通过构造函数中初始化原型（仅第一个对象实例化时初始化原型），
这个可以通过判断该方法是否有效而选择是否需要初始化原型。
function Blog(name, url) {
this.name = name;
this.url = url;
if (typeof this.alertInfo != 'function') {
// 这段代码只执行了一次
alert('exe time');
Blog.prototype.alertInfo = function() {
alert(thia.name + this.url);
}
}
}
var blog = new Blog('luomg', 'https://segmentfault.com/')
17、new 操作符具体干了什么？
1、新建一个对象 var obj=new Object();
2、设置原型链 obj.__proto__=F.prototype;
3、让F中的this指向 obj，执行F的函数体。 F.call(obj);
4、判断F的返回值类型：如果是值类型，就丢弃它，还是返回 obj。如果是引用类型，就返回这个引用类型的对象，替换掉 obj。
18、原型链
指的是构造函数、原型和实例的关系。每个构造函数都有一个prototype原型对象，每个原型对象都包含一个指向构造函数的指针constructor，而实例都包含一个指向原型对象的内部指针 _proto_。
19、构造函数相关的检测方法
访问实例属性 obj.hasOwnProperty(key);
访问原型属性 !obj.hasOwnProperty(name) && name in obj
返回一个可枚举属性的字符串数组 Object.keys(obj || Object.prototype);
得到所有实例属性 Object.getOwnPropertyNames(obj || Object.prototype)
确定原型与实例的关系 obj instanceof Object; Object.prototype.isPrototypeOf(obj);
20、Javascript获取页面元素的位置
②获取网页的大小(只读属性)
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
③获取网页元素的绝对位置--offsetTop和offsetLeft属性
function getElementLeft(element){
var actualLeft = element.offsetLeft;
var current = element.offsetParent;
while (current !== null){
actualLeft += current.offsetLeft;
current = current.offsetParent;
}
return actualLeft;
}
21、浏览器如何渲染解析页面？
解析html以构建dom树 -> 将CSS解析成CSS Rule 树 -> 构建render树 -> 布局render树 -> 绘制render树。
其中某个部分发生了变化影响了布局，就会 回流(Reflow -- 重新渲染) 重绘(Repaint -- 重画某部分)，影响性能。所以写代码时不要一条一条修改DOM的样式，可以先定义好CSS再去修改DOM的className。
22、“strict mode”的作用
“strict mode” 是一种更加严格的代码检查机制，会让代码更加安全。
1、让Debug更加容易：在正常模式下很多错误都会被忽视掉，“strict mode”模式会让Debug极致更加严谨。
2、防止默认的全局变量：在正常模式下，给一个未经过声明的变量赋值将会将这个变量自动设置为全局变量。在strict模式下，我们取消了这个默认机制。
3、取消this的默认转换：在正常模式下，给this关键字指引到null或者undefined会让它自动转换为全局。在strict模式下，我们取消了这个默认机制。
4、防止重复的变量声明和参数声明：在strict模式下进行重复的变量声明会被抱错，如 (e.g., var object = {foo: ""bar"", foo: ""baz""};) 同时，在函数声明中重复使用同一个参数名称也会报错，如 (e.g., function foo(val1, val2, val1){}),
5、让eval()函数更加安全。
6、当遇到无效的delete指令的事后报错：delete指令不能对类中未有的属性执行，在正常情况下这种情况只是默默地忽视掉，而在strict模式是会报错的。
23、 JS 跳转
刷新 window.location.reload()
前进 window.history.go(1)
后退 window.history.go(-1) -- 表单中的内容会丢失
后退 window.history.back() -- 表单中的内容会保留
history.back()的刷新版本 window.location.replace(document.referrer)
[前进 window.history.forward()]
24、内存泄露原因及解决办法
没有及时释放内存资源。
JS是一种垃圾收集式语言，内存是根据对象的创建分配给该对象的，并会在没有该对象的引用时由浏览器收回。IE和FireFox均使用引用计数来为 DOM 对象处理内存。如果计数为零，该对象就会被销毁。
1.循环引用 --打破循环引用 避免闭包自身
2.由外部函数调用引起的
3.事件处理引起的24、内存溢出原因
程序向系统申请一定大小内存，而系统不能满足程序的要求
25、闭包
读取其他函数内部变量的函数 -- 定义在一个函数内部的函数。
1.可以读取函数内部的变量
2.使局部变量始终保存在内存中
注意点：
1.会造成网页的性能问题，在IE中可能导致内存泄露，退出函数前将不使用的局部变量全部删除。
2.闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。
26、typeof 与instanceof 判断类型
typeof -- 获取一个变量或表达式的类型 instanceof -- 判断一个变量是否是某个对象的实例
基本类型 -- typeof => String Number Boolean undefined function Object
引用类型 -- instanceof =>
Array.isArray(arr);
constructor 属性返回对创建此对象的数组函数的引用
(a instanceof Array) //a是否Array的实例？true or false
(a.constructor == Array) // a实例所对应的构造函数是否为Array? true or false
27、JS的apply与call的用法及意义
为了改变函数运行时的上下文，改变函数体内部 this 的指向。
调用一个对象的一个方法，以另一个对象替换当前对象。
劫持别人的方法--实现继承
作用完全一样，只是接受参数的方式不太一样。
obj.call(thisObj, arg1, arg2, ...); //连续参数
obj.apply(thisObj, [arg1, arg2, ...]);//数组参数
把obj(即this)绑定到thisObj，这时候thisObj具备了obj的属性和方法。或者说thisObj『继承』了obj的属性和方法。28、JS作用域、上下文。
作用域是在运行时代码中的某些特定部分中变量，函数和对象的可访问性。
换句话说，作用域决定了代码区块中变量和其他资源的可见性。
在 ES5及以前 无块级作用域，采用全局和函数作用域，
如 if 和 switch 条件语句或 for 和 while 循环语句，它们不会创建一个新的作用域。
ES6及以后才有块作用域。
上下文(context)是用来指定代码某些特定部分中 this 的值，指 this 在同一作用域内的值。
取决于JavaScript 的宿主换环境，在全局作用域(scope)中上下文中始终是Window对象。
14、http与https
*HTTP* 是超文本传输协议，定义客户端与服务器端之间文本传输的规范。
HTTP协议以明文方式发送内容，不提供任何方式的数据加密，如果攻击者截取Web浏览器和网站服务器之间的传输报文，就可以直接读取其中的信息，所以不适合传输一些敏感信息，比如：信用卡号，密码支付信息。
HTTP默认使用80端口，这个端口指的是服务端的端口，而客户端使用的端口是动态分配的。当我们没有指定端口访问时，浏览器会默认帮我们添加80端口。
*https*
为了解决HTTP协议的这一缺陷，需要使用另一种协议：安全套接字层超文本传输协议HTTPS，为了数据传输的安全，HTTPS在HTTP的基础上加入了SSL协议，SSL依靠证书来验证服务器的身份，并为浏览器和服务器的之间的通信加密。
主要作用可以分为两种：一种是建立一个信息安全通道，来保证数据传输的安全；另一种就是确认网站的真实性。
1. HTTPS协议需要到ca申请证书，一般免费证书较少，因而需要一定费用。
2. HTTP是超文本传输协议，信息是明文传输，HTTPS则是具有安全性的SSL加密传输协议。
3. HTTP的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输，身份认证的网络协议，比HTTP协议安全。HTTP和HTTPS的区别