JavaScript面试题（三）

Proxy，代理，是ES6新增的功能，可以理解为代理器（即由它代理某些操作）。
Proxy 对象用于定义或修改某些操作的自定义行为，可以在外界对目标对象进行访问前，
对外界的访问进行改写。
new Proxy()表示生成一个 Proxy 实例
    -target：目标对象
    -handler：一个对象，其属性是当执行一个操作时定义代理的行为的函数。
注意：要实现拦截操作，必须是对 Proxy 实例进行操作，而不是针对目标对象 target 进行操作。

1，在拷贝构造函数中假如只完成了数据成员本身的赋值则称为“浅拷贝”；
编译器提供的默认拷贝构造函数就已经可以完成这个任务。
而假如要复制的数据除了属性值本身以外，还要复制附加在数据属性值上的额外内容，
那就要自己来写拷贝构造函数了，来完成所谓的“深拷贝”。
举个例子：
若在构造函数中new了一个新的空间存放数据，并且用指针记录了首地址；若是浅拷贝，则在拷贝构造函数中指针值将复制给另一个数据成员，这样就会有两个指针指向同一个空间；这样的话在析构函数里将会对指针所指向的空间进行释放，由于两个指针指向的是同一个空间，在释放第一个指针指向的空间时不会出现什么问题，而释放第二个指针指向的空间时就会因为空间已经被解析过而导致解析的空间不存在的情况，就会造成程序无法终止。
而解决上面这种情况的办法就是使用“深拷贝”，深拷贝是在拷贝构造函数里再new一个新的空间。将数据复制在新空间里，并将拷贝的指针记录这个新空间的首地址，这样在析构函数里就不会有问题了。
2，在某些引用类型值不更新的情况下用深拷贝

// 答案：
主要原因：
swiper提前初始化了，而这个时候，数据还没有完全出来。
解决方法
从swiper 入手，在swiper中写 observer:true/observeParents:true
 let myswiper = new Swiper(".swiper-container" , {
     autoplay: true,
     loop: true,
     // observer 修改swiper子元素时自动初始化swiper
     observer:true,
     // observeParents 包括当前父元素的swiper发生变更时也会初始化swiper
     observeParents:true,
 })
 从 Vue 入手，vue中专门提供了提供了一个方法nextTick() 用于解决dom的先后执行问题。
 mounted(){
     this.$nextTick(function(){
         // ...操作
         let myswiper = new Swiper(".swiper-container" , {
             autoplay: true,
             loop: true
         })
     })  
 }

// 通过ES6的关键字extends实现继承完成Array原型方法的重写
class NewArray extends Array {
  constructor(...args) {
    // 调用父类Array的constructor()
    super(...args)
  }
  push (...args) {
    console.log('监听到数组的变化啦！');
    // 调用父类原型push方法
    return super.push(...args)
  }
  // ...
}
let list3 = [1, 2];
let arr = new NewArray(...list3);
console.log(arr)
// (2) [1, 2]
arr.push(3);
// 监听到数组的变化啦！
console.log(arr)
// (3) [1, 2, 3]

// 答案：
function 可以用call apply bind 的方式 来改变他的执行上下文   
但是class 却不可以   class 虽然本质上也是一个函数  但是 其内（babel）部做了一层代理 来禁止了这种行为
关于构造器constructor
    在function定义的构造函数中，其prototype.constructor属性指向构造器自身
    在class定义的类中，constructor其实也相当于定义在prototype属性上
重复定义
    function会覆盖之前定义的方法
    class会报错
原型或者类中方法的枚举
    class中定义的方法不可用Object.keys(Point.prototype)枚举到
    function构造器原型方法可被Object.keys(Point.prototype)枚举到，除过constructor
    所有原型方法属性都可用Object.getOwnPropertyNames(Point.prototype)访问到

// 答案：
一般有两个解决方案，一个是建立一个代理页面，通过代理页面传值，
另一个方法是通过H5的postMessage方法传值，今天用的是第二种。
首先，在父页面A中建立一个iframe，其中src要写好子页面B的地址，然后在A页面中写如下方法：
        var iframe = document.getElementById("onemap");
        var msg = {loginName:'arcgis',loginPassword:'Esri1234'};
        var childDomain = "https://geoplat.training.com";
        iframe.contentWindow.postMessage(msg,childDomain);
记住，childDomain与A的iframe的src地址不一样，childDomain是域，而src是域中的一个页面
msg是传输的信息，可以是字符串，也可以是对象。
上面的方法一定要写在一个函数中，并通过点击事件调用，如果希望iframe开始为空，点击后在设置src，
可以在设置src之后，通过setTimeout设置一定时间后在传输信息。
在子页面B中，通过对window添加事件获取传输过来的信息：
            window.addEventListener("message",function(obj){
                var name = obj.data.loginName;
                var password = obj.data.loginPassword;
                login.iframeChildLogin(name,password);
            },false);
这样就完成了从不同域的父页面向子页面传值的过程

// 答案：
CommonJS导出模块的方法是exports，导入模块的是require，具体规范如下
1）如果一个JS文件中存在exports或require，该JS文件是一个模块
2）模块内的所有代码均为隐藏代码，包括全局变量、全局函数，这些全局的内容均不应该对全局变量造成任何污染
3）如果一个模块需要暴露一些API提供给外部使用，需要通过exports导出，exports是一个空的对象，你可以为该对象添加任何需要导出的内容
4）如果一个模块需要导入其他模块，通过require实现，require是一个函数，传入模块的路径即可返回该模块导出的整个内容
【注】CommonJS只是一个规范，相当于告诉你按什么标准制造汽车，但是具体怎么制造还是得看生产商。因此，有了规范以后，nodejs就去实现模块化了
AMD
AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。
AMD 推崇依赖前置。
CMD
CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。
CMD 推崇依赖就近

/**
  * Creates the node for the load command. Only used in browser envs.
  */
req.createNode = function (config, moduleName, url) {
    var node = config.xhtml ?
        document.createElementNS('http://www.w3.org/1999/xhtml', 'html:script') :
    document.createElement('script');
    node.type = config.scriptType || 'text/javascript';
    node.charset = 'utf-8';
    node.async = true;
    return node;
};
  requirejs 导入模块的方式实际就是创建脚本标签，一切的模块都需要经过这个方法创建。requirejs 使用 onload 事件来处理回调函数：

$(".btn").click(function(e){
    // e 就是事件对象
    e.target; // 事件的目标 dom
    e.currentTarget; // 事件处理程序正在处理事件的那个元素
    e.srcElement; // 事件的目标 ie
});

模板引擎是通过字符串拼接得到的
let template = 'hello <% name %>!'
let template = 'hello ' + name + '!'
字符串是通过new Function执行的
let name = 'world'
let template = `
  let str = 'hello ' +  name  + '!'
  return str
`
let fn = new Function('name', template)
console.log(fn(name)) // hello world!
将模板转换为字符串并通过函数执行返回
let template = 'hello <% name %>!'
let name = 'world'
function compile (template) {
  let html = template.replace(/<%([\s\S]+?)%>/g, (match, code) => {
    return `' + ${code} + '`
  })
  html = `let str = '${html}'; return str`
  return new Function('name', html)
}
let str = compile(template)
console.log(str(name)) // hello world!
函数只能接收一个name变量作为参数，功能太单一了，一般会通过对象来传参，with来减少变量访问。
with功能
let params = {
  name: '张三',
  age: 18
}
let str = ''
with (params) {
  str = `用户${name}的年龄是${age}岁`
}
console.log(str) // 用户张三的年龄是18岁
实现简单的模板引擎
let template = 'hello <% name %>!'
let name = 'world'
function compile (template) {
  let html = template.replace(/<%([\s\S]+?)%>/g, (match, code) => {
    return `' + ${code.trim()} + '`
  })
  html = `'${html}'`
  html = `let str = ''; with (params) { str = ${html}; } return str`
  return new Function('params', html)
}
let str = compile(template)
console.log(str({ name })) // hello world!

function fun(str){
    var date = new Date(str)
    return date.getFullYear()+'年/'+date.getMonth()+'月/'+date.getDate()+'日'
}

什么是跨域?
所谓的同源是指，域名、协议、端口均为相同。
所谓的跨域，不同的域名、协议、端口皆为不同域
一个域与另一个域名、协议或者端口不同的域的之间访问都叫跨域
解决跨域的方法和方案：
1：通过服务端代理请求。如PHP，服务端语言php是没有跨域限制的，
让服务器去别的网站获取内容然后返回给页面。
2：第二种：jsonp跨域
    1. jsonp跨域就是利用script标签的跨域能力请求资源
    2. jsonp与ajax没有半毛钱关系！！
    3. 浏览器的同源策略限制了js的跨域能力，
       但没有限制link img iframe script 的跨域行为
    实现方式：
    1. 利用js创建一个script标签，把json的url赋给script的scr属性，
    2. 把这个script插入到页面里，让浏览器去跨域获取资源
    3. JS先声明好回调函数，插入页面后会代为执行该函数，
       并且传入json对象为其参数。
    注意：
    1. jsonp只针对get请求
    2. script标签加载回来的资源会被当成js在全局执行
3：CORS 跨域资源共享(xhr2)
    CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）
    它允许浏览器向跨源服务器，发出XMLHttpRequest请求，
    从而克服了AJAX只能同源使用的限制
    整个CORS通信过程，都是浏览器自动完成，不需要用户参与
    对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样
    实现CORS通信的关键是服务器，只要服务器实现了CORS接口，就可以跨源通信
4：nginx代理跨域
    通过nginx服务器转发跨域请求，达到跨域的目的

函数式编程：
函数式编程和声明式编程是有所关联的，因为他们思想是一致的：即只关注做什么而不是怎么做。
但函数式编程不仅仅局限于声明式编程。
函数式编程最重要的特点是“函数第一位”，即函数可以出现在任何地方，
比如你可以把函数作为参数传递给另一个函数，不仅如此你还可以将函数作为返回值。
声明式编程：
声明式编程是以数据结构的形式来表达程序执行的逻辑。
它的主要思想是告诉计算机应该做什么，但不指定具体要怎么做。
SQL 语句就是最明显的一种声明式编程的例子，例如：
SELECT * FROM collection WHERE num > 5
除了 SQL，网页编程中用到的 HTML 和 CSS 也都属于声明式编程。
特点：
1：是它不需要创建变量用来存储数据。
2：不包含循环控制的代码如 for， while。

非必须，
在 JavaScript 中，super 指的是父类的构造函数
如果想在构造函数中使用this，你必须首先调用super。 先让父类做完自己的事
不执行无法使用this，
    不报错的方法：
        1：不使用this
        2：手动修正this

任务队列
所有的任务可以分为同步任务和异步任务，
同步任务，顾名思义，就是立即执行的任务，同步任务一般会直接进入到主线程中执行；
而异步任务，就是异步执行的任务，
比如ajax网络请求，setTimeout 定时函数等都属于异步任务，
异步任务会通过任务队列( Event Queue )的机制来进行协调。
同步和异步任务分别进入不同的执行环境，同步的进入主线程，即主执行栈，
异步的进入 Event Queue 。主线程内的任务执行完毕为空，
会去 Event Queue 读取对应的任务，推入主线程执行。
 上述过程的不断重复就是我们说的 Event Loop (事件循环)。
在事件循环中，每进行一次循环操作称为tick，
通过阅读规范可知，每一次 tick 的任务处理模型是比较复杂的，
其关键的步骤可以总结如下：
在此次 tick 中选择最先进入队列的任务( oldest task )，如果有则执行(一次)
检查是否存在 Microtasks ，如果存在则不停地执行，直至清空Microtask Queue
更新 render
主线程重复执行上述步骤
那么，什么是 microtasks ?规范中规定，task分为两大类,
 分别是 Macro Task （宏任务）和 Micro Task（微任务）, 并且每个宏任务结束后, 
都要清空所有的微任务,这里的 Macro Task也是我们常说的 task 。
(macro)task 主要包含：script( 整体代码)、setTimeout、setInterval、I/O、UI 交互事件、setImmediate(Node.js 环境)
microtask主要包含：Promise、MutaionObserver、process.nextTick(Node.js 环境)
整体 script 作为第一个宏任务进入主线程，遇到 console.log，输出 script start
遇到 setTimeout，其回调函数被分发到宏任务 Event Queue 中
遇到 Promise，其 then函数被分到到微任务 Event Queue 中,记为 then1，
之后又遇到了 then 函数，将其分到微任务 Event Queue 中，记为 then2
遇到 console.log，输出 script end
至此，Event Queue 中存在三个任务，如下表：
宏任务    微任务
setTimeout    then1
-    then2
执行微任务，首先执行then1，输出 promise1, 然后执行 then2，
输出 promise2，这样就清空了所有微任务
此时，所有的mircotask执行完毕，本轮事件循环结束，UI 开始 render，
当 UI render 完毕，开始下一轮事件循环.
执行 setTimeout 任务，输出 setTimeout, 至此，
输出的顺序是：script start, script end, promise1, promise2, setTimeout
UI渲染
根据HTML Standard，一轮事件循环执行结束之后，下轮事件循环执行之前开始进行 UI render。
即：macro-task任务执行完毕，接着执行完所有的micro-task任务后，
此时本轮循环结束，开始执行UI render。UI render完毕之后接着下一轮循环。

原理：随着滚轮滚动，底部的图片会被不断地加载，从而显示在页面上，按需加载，
当页面需要显示图片的时候才进行加载，否则不加载
1. 页面加载完成时记录每个img标签的src值的字符串，
2. 用鼠标滚轮判断图片是否出现在屏幕，如果是，则把记录的src值赋值给src属性
3. 然后让image的src来发起请求，获取对应的图片放置到DOM树的这个位置上，
从而实现图片的页面渲染！
于是就可以知道，当进入页面的时候，其实我们已经把所有的图片的这个地址信息拿到了，
图片懒加载的作用就是让这个图片的src按需发起请求，获取图片。

使用 for in 循环遍历对象的属性时，原型链上的所有属性都将被访问
只遍历对象自身的属性，而不遍历继承于原型链上的属性，需要使用hasOwnProperty 方法过滤一下。
Object.prototype.say="cgl";
    var person ={
        age: 18
    };
    for (var key in person) {
        if(person.hasOwnProperty(key)){
            console.log(key, eval("person."+key));
        }
    }

1. 相比普通函数更简洁的语法
2. 没有this,捕获其所在上下文的 this 值，作为自己的 this 值
3. 不能使用new,箭头函数作为匿名函数,是不能作为构造函数的,不能使用new
4. 不绑定arguments，用rest参数...解决
    let test3=(...a)=>{console.log(a[1])} //22
5. 使用call()和apply()调用:由于 this 已经在词法层面完成了绑定，
   通过 call() 或 apply() 方法调用一个函数时，只是传入了参数而已，对 this 并没有什么影响：
6. 箭头函数没有原型属性
7. 不能简单返回对象字面量
    let fun5 = ()=>({ foo: x })   //如果x => { foo: x }  //则语法出错
8. 箭头函数不能当做Generator函数,不能使用yield关键字
9. 箭头函数不能换行
    let a = ()
          =>1; //SyntaxError: Unexpected token =>

/*-----禁止事件冒泡:-----*/
function stopBubble(e) {
//如果提供了事件对象，则这是一个非IE浏览器
if ( e && e.stopPropagation )
    //因此它支持W3C的stopPropagation()方法
    e.stopPropagation();
else
    //否则，我们需要使用IE的方式来取消事件冒泡
    window.event.cancelBubble = true;
}
/*-----阻止浏览器的默认行为-----*/
function stopDefault( e ) {
    //阻止默认浏览器动作(W3C)
    if ( e && e.preventDefault )
        e.preventDefault();
    //IE中阻止函数器默认动作的方式
    else
        window.event.returnValue = false;
    return false;
}