面试

JS

关于promise的使用：

www.jianshu.com/p/57ceb7ac5…

segmentfault.com/a/119000001…

加入状态后：

实现promise链式调用：

function Promise(fn) {
    var state = 'pending',
        value = null,
        callbacks = [];

    this.then = function (onFulfilled) {
        return new Promise(function (resolve) {
            handle({
                onFulfilled: onFulfilled || null,
                resolve: resolve
            });
        });
    };
    function handle(callback) {
        if (state === 'pending') {
            callbacks.push(callback);
            return;
        }
        //如果then中没有传递任何东西
        if(!callback.onResolved) {
            callback.resolve(value);
            return;
        }

        var ret = callback.onFulfilled(value);
        callback.resolve(ret);
    }

    function resolve(newValue) {
        if (newValue && (typeof newValue === 'object' || typeof newValue === 'function')) {
            var then = newValue.then;
            if (typeof then === 'function') {
                then.call(newValue, resolve);
                return;
            }
        }
        state = 'fulfilled';
        value = newValue;
        setTimeout(function () {
            callbacks.forEach(function (callback) {
                handle(callback);
            });
        }, 0);
    }
    fn(resolve);
}

promise关于面试题：

promise关于错误处理：

大多数时候我们希望发生错误的时候，promise处理当前的异常并中断后续的then操作。但是当使用reject处理异常的时候，会出现在下一个then里面的第二个函数里面传递下去，并不能中断后续then操作：

var promiseStart = new Promise(function(resolve, reject){
    reject('promise is rejected');
});

promiseStart
.then(function(response) {
    console.log('resolved');
    return new Promise(function(resolve, reject){
        resolve('promise is resolved');
    });
},function (error){
    console.log('rejected:', error);
    // 如果这里不抛出error，这个error将被吞掉，catch无法捕获异常
    // 但是如果抛出error，这个error会被下一个then的reject回调处理，这不是我们想要的
    throw(error); 
})
.then(function (response){
    console.log('resolved:', response);
},function (error){
    console.log('rejected:', error);
    throw(error);
})
.catch(function(error) {
    console.log('catched:', error);
})

/* 
 输出：
 rejected: promise is rejected
 rejected: promise is rejected
 catched: promise is rejected
 */

当用catch处理异常的时候，可以直接在catch中捕获：

var promiseStart = new Promise(function(resolve, reject){
    reject('promise is rejected');
});

promiseStart
.then(function(response) {
    console.log('resolved');
    return new Promise(function(resolve, reject){
        resolve('promise is resolved');
    });
})
.then(function (response){
    console.log('resolved:', response);
})
.catch(function(error) {
    console.log('catched:', error);
})

/* 
 输出：
 catched: promise is rejected
 */

这样发生了错误后后续的then不会被调用，错误也只被catch处理一次。

事件循环(Event Loop)-js执行机制：

• 事件循环：

• 复杂例子分析：

console.log('1');

setTimeout(function() {
    console.log('2');
    process.nextTick(function() {
        console.log('3');
    })
    new Promise(function(resolve) {
        console.log('4');
        resolve();
    }).then(function() {
        console.log('5')
    })
})
process.nextTick(function() {
    console.log('6');
})
new Promise(function(resolve) {
    console.log('7');
    resolve();
}).then(function() {
    console.log('8')
})

setTimeout(function() {
    console.log('9');
    process.nextTick(function() {
        console.log('10');
    })
    new Promise(function(resolve) {
        console.log('11');
        resolve();
    }).then(function() {
        console.log('12')
    })
})

最终结果：  完整的输出为1，7，6，8，2，4，3，5，9，11，10，12。

• 额外的问题：

setTimeout(() => {
	console.log(2)
}, 2)
setTimeout(() => {
	console.log(1)
}, 1)
setTimeout(() => {
	console.log(0)
}, 0)

在Chrome和node中，这里打印顺序都是1, 0, 2。

说明0ms和1ms的延时效果是一致的。通过源码看出传入0和传入1结果都是oneMillisecond，即1ms。

变量和函数的提升：

js是自上而下逐行解释执行的，但是引擎会在解释JavaScript代码之前首先对齐进行编译，简单说就是在js代码执行前引擎会先进行预编译，预编译期间会将变量声明与函数声明提升至其对应作用域的最顶端。预编译指的是：在当前作用域中，JavaScript代码执行之前，浏览器首先会默认的把所有带var和function声明的变量进行提前的声明或者定义，和他前面有无return无关。函数声明的优先级高于变量声明

console.log(a);
var a = 3;
//预编译后的代码结构可以看做如下
var a; // 将变量a的声明提升至最顶端，赋值逻辑不提升。
console.log(a); // undefined
a = 3; // 代码执行到原位置即执行原赋值逻辑

• 变量提升：

即全局作用域中声明的变量会提升至全局最顶层，函数内声明的变量只会提升至该函数作用域最顶层。

console.log(a);
var a = "a";
var foo = () => {
    console.log(a);
    var a = "a1";
}
foo();

经过预编译成：

var a;
console.log(a); // undefined
a = "a";
var foo = () => {
    var a; // 全局变量会被局部作用域中的同名变量覆盖
    console.log(a); // undefined
    a = "a1";
}
foo();

• 函数提升：

console.log(foo1); // [Function: foo1]
foo1(); // foo1
console.log(foo2); // undefined
foo2(); // TypeError: foo2 is not a function
function foo1 () {
	console.log("foo1");
};
var foo2 = function () {
	console.log("foo2");
};

var a = 1;
function foo() {
    a = 10;
    console.log(a);
    return;
    function a() {};
}
foo();
console.log(a);

结果打印：10  1。会被预编译成

var a = 1; // 定义一个全局变量 a
function foo() {
    // 首先提升函数声明function a () {}到函数作用域顶端， 然后function a () {}等同于 var a =  function() {};最终形式如下
    var a = function () {}; // 定义局部变量 a 并赋值。
    a = 10; // 修改局部变量 a 的值，并不会影响全局变量 a
    console.log(a); // 打印局部变量 a 的值：10
    return;
}
foo();
console.log(a); // 打印全局变量 a 的值：1

分割线----------------------

function bar(){
    return foo;
    foo=10;
    var foo='11';
}
console.log(bar());//undefined
typeof bar();//"undefined"

已上代码会被编译为：

function bar(){
    var foo;
    return foo;
    foo=10;
    foo='11';
}
console.log(bar());//undefined
typeof bar();//"undefined"

分割线------------------

变量声明提升与函数声明提升混合：

function bar(){
    return foo;
    foo=10;
    function foo(){}
    var foo='11';
}
typeof bar(); // "function"

已上会被编译为：

下面打印出的是foo函数function。首先会有函数和变量var的提升，函数被提升过后foo被赋值成函数了，此时变量被提升是不会被赋值的。第二次foo没有被赋值成功，所以foo他的值还是函数。

function bar(){
        var foo = function(){};
        var foo;
        console.log(foo)
        return foo;
        foo=10;
        foo='11';
    }

this用法:

先说总结：

this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象（这句话有些问题，后面会解释为什么会有问题，虽然网上大部分的文章都是这样说的，虽然在很多情况下那样去理解不会出什么问题，但是实际上那样理解是不准确的，所以在你理解this的时候会有种琢磨不透的感觉）

1. 如果一个函数中有this，但是它没有被上一级的对象所调用，那么this指向的就是window，这里需要说明的是在js的严格版中this指向的不是window而是undefined。
   
2. 如果一个函数中有this，这个函数被上一级的对象所调用，那么this指向的就是上一级的对象。
   
3. 如果一个函数中有this，这个函数中包含多个对象，尽管这个函数是被最外层的对象所调用，this指向的也只是它上一级的对象。
   
4. this永远指向的是最后调用它的对象，也就是看它执行的时候是谁调用的
   

探索如下：

按照我们上面说的this最终指向的是调用它的对象，这里的函数a实际是被Window对象所点出来的：

function a(){
    var user = "追梦子";
    console.log(this.user); //undefined
    console.log(this); //Window
}
a();

等价于下面：

function a(){
    var user = "追梦子";
    console.log(this.user); //undefined
    console.log(this);　　//Window
}
window.a();

这里的this指向的是对象o，因为你调用这个fn是通过o.fn()执行的，那自然指向就是对象o，这里再次强调一点，this的指向在函数创建的时候是决定不了的，在调用的时候才能决定，谁调用的就指向谁 ：

var o = {
    user:"追梦子",
    fn:function(){
        console.log(this.user);  //追梦子
    }
}
o.fn();

下面这样证明如果一个函数中有this，这个函数中包含多个对象，尽管这个函数是被最外层的对象所调用，this指向的也只是它上一级的对象（即this指向的是离他最近的上一级的那个对象）

var o = {
    a:10,
    b:{
        a:12,
        fn:function(){
            console.log(this.a); //12
        }
    }
}
o.b.fn();

尽管对象b中没有属性a，这个this指向的也是对象b，因为this只会指向它的上一级对象，不管这个对象中有没有this要的东西：

var o = {
    a:10,
    b:{
        // a:12,
        fn:function(){
            console.log(this.a); //undefined
        }
    }
}
o.b.fn();

这是一个比较特殊的情况：

this永远指向的是最后调用它的对象，也就是看它执行的时候是谁调用的，下面虽然函数fn是被对象b所引用，但是在将fn赋值给变量j的时候并没有执行，所以最终指向的是window

var o = {
    a:10,
    b:{
        a:12,
        fn:function(){
            console.log(this.a); //undefined
            console.log(this); //window
        }
    }
}
var j = o.b.fn;
j();

构造函数版本的this:

下面之所以对象a可以点出函数Fn里面的user是因为new关键字可以改变this的指向，将这个this指向对象a，为什么我说a是对象，因为用了new关键字就是创建一个对象实例，理解这句话可以看下面第二段代码，我们这里用变量a创建了一个Fn的实例（相当于复制了一份Fn到对象a里面），此时仅仅只是创建，并没有执行，而调用这个函数Fn的是对象a，那么this指向的自然是对象a，那么为什么对象a中会有user，因为你已经复制了一份Fn函数到对象a中，用了new关键字就等同于复制了一份。

function Fn(){
    this.user = "追梦子";
}
var a = new Fn();
console.log(a.user); //追梦子

var o = {
    user:"追梦子",
    fn:function(){
        console.log(this.user); //追梦子
    }
}
window.o.fn();

当在构造函数中，this碰到return时：

如果返回值是一个对象，那么this指向的就是那个返回的对象，如果返回值不是一个对象那么this还是指向函数的实例。如下：

function fn()  
{  
    this.user = '追梦子';  
    return function(){};
}
var a = new fn;  
console.log(a.user); //undefined

function fn()  
{  
    this.user = '追梦子';  
    return 1;
}
var a = new fn;  
console.log(a.user); //追梦子

call,apply,bind总结：

比如，b.call(a)，就是把b放到a的环境中执行，b里面的this，就是a的this

call、 bind、 apply 这三个函数的第一个参数都是this的指向对象，第二个参数差别就来了：

• call 的参数是直接放进去的，第二第三第n个参数全都用逗号分隔，直接放到后面
• apply的所有参数都必须放在一个数组里面传进去。
• bind除了返回函数以外，它的参数和call 一样

undefined 、null、 undeclared 的区别:

作用域和作用域链：

• 作用域：

作用域就是一个独立的地盘，让变量不会外泄、暴露出去。也就是说作用域最大的用处就是隔离变量，不同作用域下同名变量不会有冲突。ES6 之前 JavaScript 没有块级作用域,只有全局作用域和函数作用域。ES6 的到来，为我们提供了‘块级作用域’,可通过新增命令 let 和 const 来体现。块语句（大括号“｛｝”中间的语句），如 if 和 switch 条件语句或 for 和 while 循环语句，不像函数，它们不会创建一个新的作用域。在块语句中定义的变量将保留在它们已经存在的作用域中。如：

if (true) {
    // 'if' 条件语句块不会创建一个新的作用域
    var name = 'Hammad'; // name 依然在全局作用域中
}
console.log(name); // logs 'Hammad'

块级作用域特点：

• let/const 声明并不会被提升到当前代码块的顶部，因此你需要手动将 let/const 声明放置到顶部，以便让变量在整个代码块内部可用：

function getValue(condition) {
    if (condition) {
        let value = "blue";
        return value;
    } else {
        // value 在此处不可用
        return null;
    }
    // value 在此处不可用
}

• 禁止重复声明：

如果一个标识符已经在代码块内部被定义，那么在此代码块内使用同一个标识符进行 let 声明就会导致抛出错误：

var count = 30;
let count = 40; // Uncaught SyntaxError: Identifier 'count' has already been declared

 count 变量被声明了两次：一次使用 var ，另一次使用 let 。因为 let 不能在同一作用域内重复声明一个已有标识符，此处的 let 声明就会抛出错误。但如果在嵌套的作用域内使用 let 声明一个同名的新变量，则不会抛出错误。

var count = 30;
// 不会抛出错误
if (condition) {
     let count = 40;
     // 其他代码
 }

• 循环中的绑定块作用域的妙用：

for (let i = 0; i < btns.length; i++) {
    btns[i].onclick = function () {
      console.log('第' + (i + 1) + '个')
    }
  }

• 作用域链：

关于自由变量的取值问题：要到创建这个函数的那个域”。作用域中取值,这里强调的是“创建”，而不是“调用”

fn()返回的是 bar 函数，赋值给 x。执行 x()，即执行 bar 函数代码。取 b 的值时，直接在 fn 作用域取出。取 a 的值时，试图在 fn 作用域取，但是取不到，只能转向创建 fn 的那个作用域中去查找，结果找到了,所以最后的结果是 30。

作用域与执行上下文：

许多开发人员经常混淆作用域和执行上下文的概念，误认为它们是相同的概念，但事实并非如此。

JavaScript 属于解释型语言，JavaScript 的执行分为：解释和执行两个阶段,这两个阶段所做的事并不一样：

解释阶段：

• 词法分析
• 语法分析
• 作用域规则确定

执行阶段：

• 创建执行上下文
• 执行函数代码
• 垃圾回收

JavaScript 解释阶段便会确定作用域规则，因此作用域在函数定义时就已经确定了，而不是在函数调用时确定，但是执行上下文是函数执行之前创建的。执行上下文最明显的就是 this 的指向是执行时确定的。而作用域访问的变量是编写代码的结构确定的。

作用域和执行上下文之间最大的区别是：
执行上下文在运行时确定，随时可能改变；作用域在定义时就确定，并且不会改变。

一个作用域下可能包含若干个上下文环境。有可能从来没有过上下文环境（函数从来就没有被调用过）；有可能有过，现在函数被调用完毕后，上下文环境被销毁了；有可能同时存在一个或多个（闭包）。同一个作用域下，不同的调用会产生不同的执行上下文环境，继而产生不同的变量的值。

垃圾回收机制：

• 标记清除：

js中最常用的垃圾回收方式就是标记清除。当变量进入环境时，例如，在一个函数中声明一个变量，就将这个变量标记为"进入环境"，从逻辑上讲，永远不能释放进入环境变量所占用的内存，因为只要执行流进入相应的环境，就可能会用到它们。而当变量离开环境时，则将其标记为"离开环境"。

function test(){
    var a = 10;    //被标记"进入环境"
    var b = "hello";    //被标记"进入环境"
}
test();    //执行完毕后之后，a和b又被标记"离开环境"，被回收

垃圾回收机制在运行的时候会给存储再内存中的所有变量都加上标记（可以是任何标记方式），然后，它会去掉处在环境中的变量及被环境中的变量引用的变量标记（闭包）。而在此之后剩下的带有标记的变量被视为准备删除的变量，原因是环境中的变量已经无法访问到这些变量了。最后垃圾回收机制到下一个周期运行时，将释放这些变量的内存，回收它们所占用的空间。

到目前为止，IE、Firefox、Opera、Chrome、Safari的js实现使用的都是标记清除的垃圾回收策略或类似的策略，只不过垃圾收集的时间间隔互不相同。

• 引用计数：

低版本的IE用的引用计数。引用计数的含义是跟踪记录每个值被引用的次数。当声明了一个变量并将一个引用类型赋值给该变量时，则这个值的引用次数就是1。相反，如果包含对这个值引用的变量又取得了另外一个值，则这个值的引用次数就减1。当这个引用次数变成0时，则说明没有办法再访问这个值了，因而就可以将其所占的内存空间给收回来。这样，垃圾收集器下次再运行时，它就会释放那些引用次数为0的值所占的内存。

闭包：

定义：

闭包是指有权访问另外一个函数作用域中的变量的函数.可以理解为(能够读取其他函数内部变量的函数)

作用: 

正常函数执行完毕后,里面声明的变量被垃圾回收处理掉,但是闭包可以让作用域里的变量,在函数执行完之后依旧保持没有被垃圾回收处理掉。当一个函数执行完毕后，里面的局部变量是会被JS自带的垃圾回收机制给销毁的，从而释放内存。但是如果返回一个函数，而且函数里面有用到父级数声明的变量，那么此时，变量不会被回收，因为还有可能被用到，并且外界可以通过函数访问这段作用域下的变量。

如果想获取某个函数里面的变量：

此时，a是不是就获得了呢？并没有，我们得到的只是a的副本，假设我以某种方法修改了a的值，b不会发生任何变化。所以，我们并不是使用的foo内部的a。

 function foo(){
    var a = "我是foo里面的a";
     return a;//将变量a给return出来 
 }
 let b = foo();//此时b就获得foo里面的a了。

然而闭包可以实现外部访问函数里面的变量：

下面按道理每次都会返回6呀，怎么会每次叠加呢。其实不然，我们执行的是函数b（从foo返回出来的），并没有重新执行foo，所以也就不会每次给num重新赋值5。至于为什么会变成这种累加的情况呢，这是因为函数foo执行完后，其内部的的A函数里面对num有引用，所以foo的作用域以及变量a被保留在了函数A中，返回给了b。

　　现在，我们就能在外界通过函数b来访问foo内部的变量num了。这就是闭包，我们通过返回一个函数打通了函数内部与外界的桥梁。

function foo(c){
    var num = c;
    return function A(){
        num++;
        return num;
    }
}
var b = foo(5);//b = A
b();//6
b();//7

典型问题：

循环绑定的问题，由于var声明的变量可以穿透作用域。

当你点击任意li时，都会打印出5。这是因为，我们绑定了五次onclik事件，无论你有没有触发后面的的函数，for循环都会执行，当你点击的时候，for循环已经执行完了，i 的值早已经变成了5

<ul class="list">
      <li class="bloc">1</li>
      <li class="bloc">2</li>
      <li class="bloc">3</li>
      <li class="bloc">4</li>
      <li class="bloc">5</li>
 </ul>
  var ali = document.querySelectorAll('.wrap ul li')
  for(var i = 0,l = ali.length;i < l;i++){
 　　ali[i].onclick = function(){
        console.log(i)　　//5 5 5 5 5
    }
  }

闭包解决此问题：

我们是不是应该想办法把每次循环时的 i 值保存下来呢，就好像每个点击事件都重新给一个新的 i 值。于是，通过闭包可以保存每次循环的 i 值：

for(var i = 0,l = ali.length;i < l;i++){
      ali[i].onclick = (function(j){
          return function(){
               console.log(j)
          }
      })(i)
 }

我们通过立即执行函数后返回了一个函数的形式，把每次循环的 i 值通过传参放到了不同的函数中，每个函数都是一个独立的作用域，每个函数都有了各自的i值，互相不影响。

ajax:

//创建 XMLHttpRequest 对象
var ajax = new XMLHttpRequest();
//规定请求的类型、URL 以及是否异步处理请求。
ajax.open('GET',url,true);
//发送信息至服务器时内容编码类型
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
//发送请求
ajax.send(null);  
//接受服务器响应数据
ajax.onreadystatechange = function () {
    if (obj.readyState == 4 && (obj.status == 200 || obj.status == 304)) { 
    }
};

post和get请求区别：

###代码上的区别
 1:get通过url传递参数,传参：open('GET', 'url?name=jack&age=22', true);
 2:post设置请求头 规定请求数据类型,传参：xhr.send(JSON.stringify({name: 'jack', age: 22}));
###使用上的区别
 1:post比get安全
 (因为post参数在请求体中。get参数在url上面)
 2:get传输速度比post快 根据传参决定的。
 (post通过请求体传参，后台通过数据流接收。速度稍微慢一些。而get通过url传参可以直接获取)
 3:post传输文件大理论没有限制  get传输文件小大概7-8k ie4k左右
 4:get获取数据	post上传数据
 (上传的数据比较多  而且上传数据都是重要数据。所以不论在安全性还是数据量级 post是最好的选择)

跨域：

• jsonp 只能解决get跨域(问的最多)

//去创建一个script标签
var  script = document.createElement("script");
//script的src属性设置接口地址 并带一个callback回调函数名称
script.src = "http://127.0.0.1:8888/index.php?callback=jsonpCallback";
//插入到页面
document.head.appendChild(script);
//通过定义函数名去接收后台返回数据
function jsonpCallback(data){
    //注意  jsonp返回的数据是json对象可以直接使用
    //ajax  取得数据是json字符串需要转换成json对象才可以使用。
}

需要后台设置
Access-Control-Allow-Origin: *              //允许所有域名访问，或者
Access-Control-Allow-Origin: http://a.com   //只允许所有域名访问

server {
         listen       80;
         server_name  www.123.com;
 
         location / {
             proxy_pass http://127.0.0.1:8080;
             index  index.html index.htm index.jsp;
         }
     }

var json1={"name":"鹏哥","age":18,"arr1":[1,2,3,4,5],"string":'afasfsafa',"arr2":[1,2,3,4,5],"arr3":[{"name1":"李鹏"},{"job":"前端开发"}]};
var json2={};
function copy(obj1,obj2){
  var obj2=obj2||{}; //最初的时候给它一个初始值=它自己或者是一个json
  for(var name in obj1){
    if(typeof obj1[name] === "object"){ //先判断一下obj[name]是不是一个对象
      obj2[name]= (obj1[name].constructor===Array)?[]:{}; //我们让要复制的对象的name项=数组或者是json
      copy(obj1[name],obj2[name]); //然后来无限调用函数自己 递归思想
    }else{
      obj2[name]=obj1[name];  //如果不是对象，直接等于即可，不会发生引用。
    }
  }
  return obj2; //然后在把复制好的对象给return出去
}
json2=copy(json1,json2)
json1.arr1.push(6);
alert(json1.arr1);  //123456
alert(json2.arr1);  //12345

array.forEach(function(value,index,arr){
      console.log(value)
  })

// 目标者类
class Subject {
  constructor() {
    this.observers = [];  // 观察者列表
  }
  // 添加
  add(observer) {
    this.observers.push(observer);
  }
  // 删除
  remove(observer) {
    let idx = this.observers.findIndex(item => item === observer);
    idx > -1 && this.observers.splice(idx, 1);
  }
  // 通知
  notify() {
    for (let observer of this.observers) {
      observer.update();
    }
  }
}

// 观察者类
class Observer {
  constructor(name) {
    this.name = name;
  }
  // 目标对象更新时触发的回调
  update() {
    console.log(`目标者通知我更新了，我是：${this.name}`);
  }
}

// 实例化目标者
let subject = new Subject();

// 实例化两个观察者
let obs1 = new Observer('前端开发者');
let obs2 = new Observer('后端开发者');

// 向目标者添加观察者
subject.add(obs1);
subject.add(obs2);

// 目标者通知更新
subject.notify();  
// 输出：
// 目标者通知我更新了，我是前端开发者
// 目标者通知我更新了，我是后端开发者

// 事件中心
let pubSub = {
  list: {},
  subscribe: function (key, fn) {   // 订阅
    if (!this.list[key]) {
      this.list[key] = [];
    }
    this.list[key].push(fn);
  },
  publish: function(key, ...arg) {  // 发布
    for(let fn of this.list[key]) {
      fn.call(this, ...arg);
    }
  },
  unSubscribe: function (key, fn) {     // 取消订阅
    let fnList = this.list[key];
    if (!fnList) return false;

    if (!fn) {
      // 不传入指定取消的订阅方法，则清空所有key下的订阅
      fnList && (fnList.length = 0);
    } else {
      fnList.forEach((item, index) => {
        if (item === fn) {
          fnList.splice(index, 1);
        }
      })
    }
  }
}

// 订阅
pubSub.subscribe('onwork', time => {
  console.log(`上班了：${time}`);
})
pubSub.subscribe('offwork', time => {
  console.log(`下班了：${time}`);
})
pubSub.subscribe('launch', time => {
  console.log(`吃饭了：${time}`);
})

// 发布
pubSub.publish('offwork', '18:00:00'); 
pubSub.publish('launch', '12:00:00');

// 取消订阅
pubSub.unSubscribe('onwork');

//在JavaScript的世界中，所有的函数都能作为构造函数，构造出一个对象
   //下面我给自己构造一个女朋友
   function GirlFriend () {
     this.name = "Alice";
   }
   //现在我设置GirlFriend()这个函数的prototype属性
   //一般来说直接用匿名的对象就行，我这里是为了方便理解，
   //先定义一个hand对象再把hand赋值给GirlFriend()的prototype
   var hand = {
     whichOne: "right hand",
     someFunction: function(){
       console.log("not safe for work.");
     }
   };
   GirlFriend.prototype = hand; 

   //这个时候，我们可以用GirlFriend()作为构造函数，构造出myObject对象
   var myObject = new GirlFriend();
   console.log(myObject.__proto__ === GirlFriend.prototype) //true

console.log(Object.prototype) //输出{}

console.log(Object.prototype.__proto__);//输出null

<div>
    我是父元素div
    <p>
        我是子元素p
        <span>我是孙元素span</span>
    </p>
</div>

div {
  font-size: 40px;
  width: 10em; /* 400px */
  height: 10em;
  border: solid 1px black;
}
p {
  font-size: 0.5em; /* 20px */ 
  width: 10em; /* 200px */
  height: 10em;
  border: solid 1px red;
}
span {
  font-size: 0.5em;  
  width: 10em;
  height: 10em;
  border: solid 1px blue;
  display: block;
}

html {
    font-size: 10px;
    }
div {
    font-size: 4rem; /* 40px */
    width: 30rem;  /* 300px */
    height: 30rem;
    border: solid 1px black;
}
p {
    font-size: 2rem; /* 20px */
    width: 15rem;
    height: 15rem;
    border: solid 1px red;
}
span {
    font-size: 1.5rem; /* 15px */
    width: 10rem;
    height: 10rem;
    border: solid 1px blue;
    display: block;
} 

<div class="title">
      <span>Hello ConardLi</span>
      <ul>
        <li>苹果</li>
        <li>橘子</li>
      </ul>
</div>

const VitrualDom = {
  type: 'div',
  props: { class: 'title' },
  children: [
    {
      type: 'span',
      children: 'Hello ConardLi'
    },
    {
      type: 'ul',
      children: [
        { type: 'ul', children: '苹果' },
        { type: 'ul', children: '橘子' }
      ]
    }
  ]
}

class App extends Component{
	constructor(props) {
		super(props)
		this.state = {
			list: [{id: 1,val: 'A'}, {id: 2, val: 'B'}, {id: 3, val: 'C'}]
		}
	}
	click() {
		this.state.list.reverse()
		this.setState({})
	}
	render() {
		return (
            <ul>
                {
                	this.state.list.map((item, index) => {
                        return (
                            <Li key={index} val={item.val}></Li>
                		)
                    })
                }
                 <button onClick={this.click.bind(this)}>Reverse</button>
            </ul>
		)
	}
}
class Li extends Component{
	constructor(props) {
		super(props)
	}
	componentDidMount() {
		console.log('===mount===')
	}
	componentWillUpdate() {
		console.log('===update====')
	}
	render() {
		return (
            <li>
                {this.props.val}
                <input type="text"></input>
            </li>
		)
	}
}

import {Swtich, Route, Router, HashHistory, Link} from 'react-router-dom';

import {Switch, Route, Router} from 'react-router';
import {HashHistory, Link} from 'react-router-dom';

// 本地服务器 webpack-dev-server插件，开发中server，便于开发，可以热加载
    devServer: {
        contentBase: './dist',  //默认本地服务器所在的根目录
        historyApiFallback: true,   //开启
        inline: true,   //源文件改变时刷新页面
        port: 8084  //端口号，默认8080
    },

 class Hello {
      greet(){ },// 普通方法
      say = () => { },// 箭头函数
 }

function Hello(){
    this.say = () => { }
}
Hello.prototype.greet = function() { }

 function A(){
    this.num = 2;
    this.handleClick = () => { console.log(this.num) };
}

const B = new A();

// 第一种情况
B.handleClick(); //2
// 第二种情况
const fn = B.handleClick;
fn(); // 2

function A(){
   this.num = 2
   this.handleClick = function(){console.log(this.num) }
}

const B = new A();

//以下都为严格模式下

B.handleClick(); // 2

const fn = B.handleClick;

fn(); // 报错，因为在严格模式下this为undefined

class Hello extends React.PureComponent {
    greet() {console.log(this)}
    say = () => { console.log(this)}
    
    render() {
        return (
            <div>
                // 普通函数
                <div onClIck={this.greet.bind(this)}>普通函数</div>
                <div onClick={(e) => this.greet(e)}></div>

                // 箭头函数
                <div onClick={this.say}></div>
            </div>
        )
    }
}

function debounce(fn,wait){
    var timer = null;
    return function(){
        if(timer !== null){
            clearTimeout(timer);
        }
        timer = setTimeout(fn,wait);
    }
}
    
function handle(){
    console.log(Math.random());
}
    
window.addEventListener("resize",debounce(handle,1000));

function debounce(fn,wait){
 2     var timer = null;
 3     return function(){
 4         if(timer === null){
 5             timer = setTimeout(()=>{
 6                 fn()
 7                 clearTimeout(timer)
 8                 timer = null
 9             },wait)
10         }
11     }    
12 }
13     
14 function handle(){
15     console.log(Math.random());
16 }
17     
18 window.addEventListener("click",debounce(handle,1000))

function throttle(fn,delay){
 2     let valid = true
 3     return function() {
 4        if(!valid){
 5            //休息时间 暂不接客
 6            return false 
 7        }
 8        // 工作时间，执行函数并且在间隔期内把状态位设为无效
 9         valid = false
10         setTimeout(() => {
11             fn()
12             valid = true;
13         }, delay)
14     }
15 }
16 /* 请注意，节流函数并不止上面这种实现方案,
17    例如可以完全不借助setTimeout，可以把状态位换成时间戳，然后利用时间戳差值是否大于指定间隔时间来做判定。
18    也可以直接将setTimeout的返回的标记当做判断条件-判断当前定时器是否存在，如果存在表示还在冷却，并且在执行fn之后消除定时器表示激活，原理都一样
19     */
20 
21 function showTop  () {
22     var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
23 　　console.log('滚动条位置：' + scrollTop);
24 }
25 window.onscroll = throttle(showTop,1000) 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <style>
    img {
      display: block;
      margin-bottom: 50px;
      width: 400px;
      height: 400px;
    }
  </style>
</head>
<body>
  <img src="Go.png" data-src="./lifecycle.jpeg" alt="">
  <img src="Go.png" data-src="./lifecycle.jpeg" alt="">
  <img src="Go.png" data-src="./lifecycle.jpeg" alt="">
  <img src="Go.png" data-src="./lifecycle.jpeg" alt="">
  <img src="Go.png" data-src="./lifecycle.jpeg" alt="">
  <img src="Go.png" data-src="./lifecycle.jpeg" alt="">
  <img src="Go.png" data-src="./lifecycle.jpeg" alt="">
  <img src="Go.png" data-src="./lifecycle.jpeg" alt="">
  <img src="Go.png" data-src="./lifecycle.jpeg" alt="">
  <img src="Go.png" data-src="./lifecycle.jpeg" alt="">
  <img src="Go.png" data-src="./lifecycle.jpeg" alt="">
  <script>
    let num = document.getElementsByTagName('img').length;
    let img = document.getElementsByTagName("img");
    let n = 0; //存储图片加载到的位置，避免每次都从第一张图片开始遍历

    lazyload(); //页面载入完毕加载可是区域内的图片

    window.onscroll = lazyload;

    function lazyload() { //监听页面滚动事件
      let seeHeight = document.documentElement.clientHeight; //可见区域高度
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条距离顶部高度
      for (let i = n; i < num; i++) {
        if (img[i].offsetTop < seeHeight + scrollTop) {
          if (img[i].getAttribute("src") == "Go.png") {
            img[i].src = img[i].getAttribute("data-src");
          }
          n = i + 1;
        }
      }
    }
  </script>

</body>

</html>

* 页面首次渲染
* 浏览器窗口大小发生改变
* 元素尺寸或位置发生改变元素内容变化（文字数量或图片大小等等）
* 元素字体大小变化
* 添加或者删除可见的 DOM 元素
* 激活 CSS 伪类（例如:hover）
* 查询某些属性或调用某些方法
* 一些常用且会导致回流的属性和方法
clientWidth、clientHeight、clientTop、clientLeftoffsetWidth、offsetHeight、offsetTop、offsetLeftscrollWidth、scrollHeight、scrollTop、scrollLeftscrollIntoView()、scrollIntoViewIfNeeded()、getComputedStyle()、
getBoundingClientRect()、scrollTo()

//html代码
<ul id="myLinks">
    <li id="goSomeWhere">Go somewhere</li>
    <li id="sayHi">Say hi</hi>
</ul>


//分别加上事件处理-JS代码
let item1 = document.getElementById("goSomeWhere");
let item2 = document.getElementById("sayHi");

EventUtil.addHandler(item1, "click", function(event){
  console.log("goSomeWhere")  
}

EventUtil.addHandler(item2, "click", function(event){
  console.log("sayHi");  
}

//改善点即将click事件结合在一起
let list = document.getElementById("myLinks")

EventUtil.addHandler(list, "click", function(event){
  event = EventUtil.getEvent(event);
  let target = EventUtil.getTarget(event);
  
  switch(target.id){
    case "goSomeWhere":
      console.log("goSomeWhere");
      break;
   case "sayHi":
      console.log("sayHi");    
      break;            
  }     
}

<!doctype html>
<html>
  <head>
    <title>我是客户端渲染的页面</title>
  </head>
  <body>
    <div id='root'></div>
    <script src='index.js'></script>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>css阻塞</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      h1 {
        color: red !important
      }
    </style>
    <script>
      function h () {
        console.log(document.querySelectorAll('h1'))
      }
      setTimeout(h, 0)
    </script>
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet">
  </head>
  <body>
    <h1>这是红色的</h1>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>css阻塞</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script>
      console.log('before css')
      var startDate = new Date()
    </script>
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet">
  </head>
  <body>
    <h1>这是红色的</h1>
    <script>
      var endDate = new Date()
      console.log('after css')
      console.log('经过了' + (endDate -startDate) + 'ms')
    </script>
  </body>
</html>

CSRF攻击之所以能够成功，是因为服务器误把攻击者发送的请求当成了用户自己的请求。那么我们可以要求所有的用户请求都携带一个CSRF攻击者无法获取到的Token。服务器通过校验请求是否携带正确的Token，来把正常的请求和攻击的请求区分开。跟验证码类似，只是用户无感知。 服务端给用户生成一个token，加密后传递给用户 用户在提交请求时，需要携带这个token 服务端验证token是否正确。

HTML5和CSS3常问：

www.cnblogs.com/huqinhan/p/…

MVVM中的双向绑定：

由视图(View)、视图模型(ViewModel)、模型(Model)三部分组成。vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。

1.当一个对象（或变量）的属性改变，那么调用这个属性的地方显示也应该改变，模型到视图（model => view）

2.当调用属性的这个地方改变了这个属性（通常是一个表单元素），那么这个对象（或变量）的属性也会改为最新的值 ，即视图到模型（view => model）

如下通过defineProperty实现双向绑定例子：

PS：加入了 用户输入中文的判断（用户输入中文时，频繁触发 keyup事件，但实际上输入并没有结束。）

语法: Object.defineProperty(obj, prop, descriptor)

obj: 需要被操作的目标对象
prop: 目标对象需要定义或修改的属性的名称
descriptor: 将被定义或修改的属性的描述符

var obj = new Object();

Object.defineProperty(obj, 'name', {
    configurable: false,
    writable: true,
    enumerable: true,
    value: '张三'
})

console.log(obj.name)  //张三

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>双向绑定</title>
</head>
<body>
  手写一个简单双向绑定<br/>
  <input type="text" id="model"><br/>
  <div id="modelText"></div>
</body>
<script>
  var model = document.querySelector("#model");
  var modelText = document.querySelector("#modelText");
  var defaultName = "defaultName";
  var userInfo = {}
  model.value = defaultName;
  Object.defineProperty(userInfo, "name", {
    get: function () {
      return defaultName;
    },
    set: function (value) {
      defaultName = value;
      model.value = value;
      console.log("-----value");
      console.log(value);
      modelText.textContent = value;
    }
  })
 
  userInfo.name = "new value";
  var isEnd = true;
 
  model.addEventListener("keyup", function () {
    if (isEnd) {
      userInfo.name = this.value;
    }
  }, false)
  //加入监听中文输入事件
  model.addEventListener("compositionstart", function () {
    console.log("开始输入中文");
    isEnd = false;
  })
  model.addEventListener("compositionend", function () {
    isEnd = true;
    console.log("结束输入中文");
  })
</script>
</html>

每当通过userInfo.name ="***";  这样的方式设置对象值得时候，就会触发defineProperty这个里面的set方法。每当通过userInfo.name这个方式获取对象的值得时候就会触发defineProperty这个里面的get方法。

MVC和MVVM：

MVC ：

即 Model-View-Controller 的缩写，就是 模型—视图—控制器，也就是说一个标准的Web 应用程式是由这三部分组成的：

View ：用来把数据以某种方式呈现给用户

Model ：其实就是数据

Controller ：接收并处理来自用户的请求，并将 Model 返回给用户

MVC同时也会带来的问题：

1、 开发者在代码中大量调用相同的 DOM API，处理繁琐 ，操作冗余，使得代码难以维护。

2、大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。

3、 当 Model 频繁发生变化，开发者需要主动更新到View ；当用户的操作导致 Model 发生变化，开发者同样需要将变化的数据同步到Model 中，这样的工作不仅繁琐，而且很难维护复杂多变的数据状态。

MVVM：

MVVM 由 Model、View、ViewModel 三部分构成，Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象。

在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。

ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM， 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

关于同源策略：

目的：出于信息安全考虑。

同源条件：

协议相同 域名相同 端口相同 举例：http://www.example.com/dir/page.html 这个网址，协议是http://，域名是www.example.com，端口是80（默认端口可以省略），同源情况如下： 

http://www.example.com/dir2/other.html：同源(协议，域名，端口都相等) http://example.com/dir/other.html：不同源（域名不同） http://v2.www.example.com/dir/other.html：不同源（域名不同） http://www.example.com:81/dir/other.html：不同源（端口不同） https://www.example.com/dir/page.html：不同源（协议不同） 

不同源的限制范围：

1. 无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB。
2. 无法接触非同源网页的 DOM。
3. 无法向非同源地址发送 AJAX 请求（可以发送，但浏览器会拒绝接受响应）。

允许跨域行为实例：

2、 document.domain + iframe跨域 

3、 location.hash + iframe 

4、 window.name + iframe跨域 

5、 postMessage跨域

 6、 跨域资源共享（CORS）

 7、 nginx代理跨域 

8、 nodejs中间件代理跨域

 9、 WebSocket协议跨域 

 单点登录：

单点登录 SSO 全称 Singn Sign On 。SSO 指在多个应用系统中，用户只需要登录一次用户系统，就可以访问其他互相信任的应用系统。例如：在网易官网登录账户，那么再进入网易邮箱等其他业务的时候会自动登录。另外还有一个好处就是在一定时间内可以不用重复登录账户。

问题：

单点登录出现在二级域名的时候就不用跨域，可以通过cookie来共享登录信息。例如bbb.a.com 和 ccc.a.com 是二级域名。

单点登录出现在跨域里面比如（www.aaa.com 和 www.bbb.com）：

一旦跨域就不能通过cookie来共享后台返回的登录信息。

这时就要通过postMessage来传递登录后返回的信息，比如token。得到来自不同域的信息后就可以实现单点登录了。

例子：

在a页面点击登陆过后，b页面直接影藏登录按钮，显示该用户已经登录。就不用再次登陆

a.html页面代码：

<title>A首页</title>
<meta charset="utf-8">
<p>
    <button onclick="login();" id="login">同步登录</button>
    <p id="msg" style="display: none;">该用户已经登录
        <button onclick="localStorage.clear();" id="login">注销</button>
    </p>
</p>

<iframe src="http://www.b.com" style="height: 0px;width: 0px;display: none;"></iframe>

<script>
// 是否显示“同步登录”按钮
var tokenData=localStorage.getItem('tokenData')
if(tokenData){
    document.getElementById('login').style.display='none';
    document.getElementById('msg').style.display='block';
}

// 同步登录
function login(){
    let data=JSON.stringify({
        msg:'建议以字符串形式传输字符串',
        token:'这是从后台而来的token'
    })
    document.getElementsByTagName('iframe')[0].contentWindow.postMessage(data,'*');
}

// 有消息从父级传来时 存贮 tokenData
window.addEventListener('message',function(e){
    if(e.source!=window.parent) return;
    localStorage.setItem("tokenData",e.data);
},false);
</script>

b.html页面代码：

<title>B首页</title>
<meta charset="utf-8">
<p>
    <button onclick="login();" id="login">同步登录</button>
    <p id="msg" style="display: none;">该用户已经登录
        <button onclick="localStorage.clear();" id="login">注销</button>
    </p>
</p>

<iframe src="http://www.a.com" style="height: 0px;width: 0px;display: none;"></iframe>

<script>
// 是否显示“同步登录”按钮
var tokenData=localStorage.getItem('tokenData')
if(tokenData){
    document.getElementById('login').style.display='none';
    document.getElementById('msg').style.display='block';
}

// 同步登录
function login(){
    let data=JSON.stringify({
        msg:'建议以字符串形式传输字符串',
        token:'这是从后台而来的token'
    })
    document.getElementsByTagName('iframe')[0].contentWindow.postMessage(data,'*');
}

// 有消息从父级传来时 存贮 tokenData
window.addEventListener('message',function(e){
    if(e.source!=window.parent) return;
    localStorage.setItem("tokenData",e.data);
},false);
</script>

各种上传问题：

掘金：

juejin.cn/post/684490…

github:

我的关注/

别人的优秀代码：github.com/Bigerfe/fe-…