关于javascript:JavaScript1

• JS 是一门什么样的语言及特点？

  1. 客户端脚本语言，不须要预编译就能够由解释器间接运行；
  2. 变量涣散定义，属于弱类型语言，对数据类型未做出严格的要求；
  3. 基于对象, 能够应用 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 的区别