第二部分(20道简答题)

1. JavaScript 创建对象的几种方式?

在 JavaScript 中虽然 Object 构造函数或对象字面量都可以用来创建单个对象，但是这些方法都有一个明显的缺点：使用同一个接口创建很多对象，会产生大量的重复代码。为了解决这些问题，对 JavaScript 对象创建的一些理解和总结。

• 工厂模式

工厂模式的主要工作原理是用函数来封装创建对象的细节，从而通过调用函数来达到复用的目的。但是它有一个很大的问题就是创建出来的对象无法和某个类型联系起来，它只是简单的封装了复用代码，而没有建立起对象和类型间的关系。

function createPerson(name, age, job){
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.sayName = function(){
        alert(this.name);
    };
    return o;
}
var person1 = createPerson("james"，9，"student");
var person2 = createPerson("kobe"，9，"student");

• 构造函数模式

js 中每一个函数都可以作为构造函数，只要一个函数是通过 new 来调用的，那么我们就可以把它称为构造函数。执行构造函数首先会创建一个对象，然后将对象的原型指向构造函数的 prototype 属性，然后将执行上下文中的 this 指向这个对象，最后再执行整个函数，如果返回值不是对象，则返回新建的对象。因为 this 的值指向了新建的对象，因此我们可以使用 this 给对象赋值。构造函数模式相对于工厂模式的优点是，所创建的对象和构造函数建立起了联系，因此我们可以通过原型来识别对象的类型。但是构造函数存在一个缺点就是，造成了不必要的函数对象的创建，因为在 js 中函数也是一个对象，因此如果对象属性中如果包含函数的话，那么每次我们都会新建一个函数对象，浪费了不必要的内存空间，因为函数是所有的实例都可以通用的。

function createPerson(name, age, job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = function(){
        alert(this.name);
    };
    return o;
}
var person1 = new createPerson("james"，9，"student");
var person2 = new createPerson("kobe"，9，"student");

• 原型模式

因为每一个函数都有一个 prototype 属性，这个属性是一个对象，它包含了通过构造函数创建的所有实例都能共享的属性和方法。因此我们可以使用原型对象来添加公用属性和方法，从而实现代码的复用。这种方式相对于构造函数模式来说，解决了函数对象的复用问题。但是这种模式也存在一些问题，一个是没有办法通过传入参数来初始化值，另一个是如果存在一个引用类型如 Array 这样的值，那么所有的实例将共享一个对象，一个实例对引用类型值的改变会影响所有的实例。

function Person(){}
Person.prototype.name = "james";
Person.prototype.age = 9;
Person.prototype.job = "student";
Person.prototype.sayName = function(){
    alert(this.name);
}
var person1 = new Person();
person1.sayName(); // "james"
var person2 = new Person();
person2.sayName(); // "james"
console.log(person1.sayName === person2.sayName) // true

• 组合使用的构造函数模式和原型模式

这是创建自定义类型的最常见方式。因为构造函数模式和原型模式分开使用都存在一些问题，因此我们可以组合使用这两种模式，通过构造函数来初始化对象的属性，通过原型对象来实现函数方法的复用。这种方法很好的解决了两种模式单独使用时的缺点，但是有一点不足的就是，因为使用了两种不同的模式，所以对于代码的封装性不够好。

function Person(name, age, job){
    this.name = name;
    this.age = age;
    this.job = job;
}
Person.prototype = {
    constructor: Person,
    sayName: function(){
        alert(this.name);
    }
}
var person1 = new createPerson("james"，9，"student");
var person2 = new createPerson("kobe"，9，"student");
console.log(person1.name); // "james"
console.log(person2.name); // "kobe"
console.log(person1.sayName === person2.sayName); // true

• 动态原型模式

这一种模式将原型方法赋值的创建过程移动到了构造函数的内部，通过对属性是否存在的判断，可以实现仅在第一次调用函数时对原型对象赋值一次的效果。这一种方式很好地对上面的混合模式进行了封装。

function Person(name, age, job){
    this.name = name;
    this.age = age;
    this.job = job;
    if(typeof this.sayName !== "function" ){
        Person.prototype.sayName: function(){
            alert(this.name);
        } 
    } 
}
var person1 = new createPerson("james"，9，"student");
person1.sayName(); // "james"

• 寄生构造函数模式

这一种模式和工厂模式的实现基本相同，我对这个模式的理解是，它主要是基于一个已有的类型，在实例化时对实例化的对象进行扩展。这样既不用修改原来的构造函数，也达到了扩展对象的目的。它的一个缺点和工厂模式一样，无法实现对象的识别。

function Person(name, age, job){
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.sayName = function(){
        alert(this.name);
    };
    return o;
}
var person1 = new Person("james"，9，"student");

• 较为稳妥的构造函数模式

首先明白稳妥对象指的是没有公共属性，而且其方法也不引用this。稳妥对象最适合在一些安全环境中（这些环境会禁止使用this和new），或防止数据被其他应用程序改动时使用。稳妥构造函数模式和寄生模式类似，有两点不同:一是创建对象的实例方法不引用this，而是不使用new操作符调用构造函数。和寄生构造函数模式一样，这样创建出来的对象与构造函数之间没有什么关系，instanceof操作符对他们没有意义。

function Person(name, age, job){
    //创建要返回的对象
    var o = new Object();
    //可以在这里定义私有变量和函数
    //添加方法
    o.sayName = function(){
        console.log(this.name);
    }
    //返回对象
    return o;
} 
var person1 =  Person("james"，9，"student");
person1.sayName(); // "james"

2. JavaScript 继承的几种实现方式?

继承是面向对象语言中最重要的一个概念。许多面向对象语言都支持两种继承方式：接口继承和实现继承。接口继承只继承方法和签名，而实现继承则继承实际的方法。由于在 JavaScript 中函数没有签名，因此无法实现接口继承，只支持实现继承。

• 原型链继承

原型链继承通过修改子类的原型为父类的实例，从而实现子类可以访问到父类构造函数以及原型上的属性或者方法。

function Parent() {
  this.name = 'sunny'
}
Parent.prototype.getName = function() {
  return this.name;
}
function Child() {}
// 这里也可以直接写出Child.prototype = Parent.prototype
// 但是这样就不能访问到父类的构造函数的属性了，即this.name
Child.prototype = new Parent()
var child = new Child()
child.getName() // sunny

优点： 实现逻辑简单。
缺点： 父类构造函数中的引用类型（比如对象/数组），会被所有子类实例共享。其中一个子类实例进行修改，会导致所有其他子类实例的这个值都会改变。

• 构造函数继承

构造函数继承其实就是通过修改父类构造函数this实现的继承。我们在子类构造函数中执行父类构造函数，同时修改父类构造函数的this为子类的this。

function Parent() {
  this.name = ['sunny']
}
function Child() {
  Parent.call(this)
}
var child = new Child()
child.name.push('rain')
console.log(child)//{name:["sunny","rain"]}
var child2 = new Child() 
console.log(child2)//{name:["sunny"]}

优点： 解决了原型链继承中构造函数引用类型共享的问题，同时可以向构造函数传参（通过call传参）
缺点： 所有方法都定义在构造函数中，每次都需要重新创建（对比原型链继承的方式，方法直接写在原型上，子类创建时不需要重新创建方法）

• 组合继承

同时结合原型链继承、构造函数继承就是组合继承了。

function Parent() {
  this.name = 'sunny'
  console.log("父类")
}
Parent.prototype.getName = function() {
  return this.name
}
function Child() {
  Parent.call(this)
  this.text = 'rain'
  console.log("child")
}
Child.prototype = new Parent()
// 需要重新设置子类的constructor，Child.prototype = new Parent()相当于子类的原型对象完全被覆盖了
Child.prototype.constructor = Child
var child=new Child;
console.log(child)//{name:"sunny",text:"rain"}

优点： 同时解决了构造函数引用类型的问题，同时避免了方法会被创建多次的问题
缺点： 父类构造函数被调用了两次。同时子类实例以及子类原型对象上都会存在name属性。虽然根据原型链机制，并不会访问到原型对象上的同名属性，但总归是不完美。

• 寄生组合继承

寄生组合继承其实就是在组合继承的基础上，解决了父类构造函数调用两次的问题。

function Parent() {
  this.name = 'sunny'
  console.log("父类")
}
Parent.prototype.getName = function() {
  return this.name
}
function Child() {
  Parent.call(this)
  this.text = 'rain'
  console.log("child")
}
// 仔细看这个函数的实现
inherit(Child, Parent)
function inherit(child, parent) {
  var prototype = object(parent.prototype)
  prototype.constructor = child
  child.prototype = prototype
}
// 这个函数的作用可以理解为复制了一份父类的原型对象
// 如果直接将子类的原型对象赋值为父类原型对象
// 那么修改子类原型对象其实就相当于修改了父类的原型对象
function object(o) {
  function F() {}
  F.prototype = o;
  return new F();
}
var child=new Child
console.log(child)//{name:"sunny","text":"rain"}

优点： 这种方式就解决了组合继承中的构造函数调用两次，构造函数引用类型共享，以及原型对象上存在多余属性的问题。是推荐的最合理实现方式（排除ES6的class extends继承哈哈哈）。
缺点： 暂时没有啥特别的缺点

• ES6继承

ES6提供了class语法糖，同时提供了extends用于实现类的继承。这也是项目开发中推荐使用的方式。使用class继承很简单，代码也很直观：

class Parent {
  constructor() {
    this.name = 'sunny'
  }
  getName() {
    return this.name
  }
}
class Child extends Parent {
  constructor() {
    super()
    this.text = 'rain'
  }
}
const child = new Child()
child.getName() //"sunny"

3. 说一下对this的理解。

this 的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象。

• 作为普通函数在全局环境中被调用

在全局环境里面，this永远指向window，因此在全局环境里作为普通函数被调用的时候，this也指向 window(仅指在浏览器环境下，赞不考虑node)。

var name = "sunny";
function fn() {
    console.log(this); //window
    console.log(this.name); //sunny
}
fn();

这里，fn 其实是作为 window 的一个方法被调用的，而 name 也是 window 的一个属性，因此 fn() 实际上就是 window.fn()。

• 作为对象的属性被调用

如果函数作为一个对象的属性方法，并且被调用的时候，this 就指向这个对象。

var name = 'window';
var person = {
    name: 'person',
    sayName: function() {
           console.log(this.name);
    }
};
var sayNameWin = person.sayName;
person.sayName(); //person
sayNameWin(); //window   作为 window 的方法被调用的

在这里，sayName 方法是作为 person 的一个属性方法被调用的，因此指向 person，但是 sayNameWin 方法却是作为 window 的一个属性方法被调用的，因此 console.log 的值是 window。我们再看一个变形。

var person1 = {
    name: 'person1',
    sayName: function() {
       console.log(this.name)
    }
}
var person2 = {
    name: 'person2',
    sayName: person1.sayName
}
person2.sayName(); //person2  作为 person2 的属性方法被调用

但是当在在对象方法中再定义函数，这时候 this 指向是 window 。

var name = 'window';
var person = {
    name: 'person',
    sayName: function () {
        function fn(){
            console.log(this);      //window对象
            console.log(this.name);    //window
        }
        fn();
    }
}
person.sayName();

如果想让 this 指向 person 的话，只需要用 that 保存下来 this 的值即可，也可以使用 apply 等改变 this。

var name = 'window';
var person = {
    name: 'person',
    sayName: function () {
        var that = this;
        function fn(){
            console.log(that);      // {name: "person",sayName:F}
            console.log(that.name);    //person
        }
        fn();
    }
}
person.sayName();

• 作为构造函数被调用

作为构造函数被调用的时候，this 代表它即将 new 出来的对象。

function Person(name) {
    this.name = name;
    console.log(this);  //Person {name: "person"}
}
var person = new Person('person');
console.log(person.name);  //person

如果不加 new,表示即作为普通函数调用，this指向 window

function Person(name) {
    this.name = name;
    console.log(this);  //window对象
}
Person('person'); 
console.log(window.name); //person

• 作为 call/apply/bind方法被调用的时候指向传入的值 ```javascript var person = { name: ‘person’ }; function fn() { console.log(this); // {name: “person”} console.log(this.name); //person }

fn.apply(person);

- 严格模式("use static")
在严格模式下，在全局环境中执行函数调用的时候 this 并不会指向 window 而是会指向 undefined。
```javascript
'use strict';
function person() {
  console.log(this); //undefined
};
person();

• setTimeout、setInterval中的this

《 javascript 高级程序设计》中写到：”超时调用的代码都是在全局执行域中执行的”。setTimeout/setInterval 执行的时候，this 默认指向 window 对象，除非手动改变 this 的指向。

var name = 'window';
function Person(){
    this.name = 'person';
    this.sayName=function(){
        console.log(this); //window对象
        console.log(this.name); //window
        };
    setTimeout(this.sayName, 10);
    }
var person=new Person();

在这里如果想改变 this，可是使用 apply/call/bind 等，也可以使用 that 保存 this.
setTimeout 中的回调函数在严格模式下也指向 window 而不是 undefined。因为 setTimeout 的回调函数如果没有指定的 this ，会做一个隐式的操作，将全局上下文注入进去，不管是在严格还是非严格模式下。

'use strict';
function person() {
  console.log(this);  //windowd对象
}
setTimeout(person, 0);

• 构造函数 prototype 属性

  var name = 'window';
  function Person(){
    this.name = 'person';
  }
  Person.prototype.sayName = function () {
    console.log(this);        // Person {name: "person"}
    console.log(this.name);      // person
  }
  var person = new Person();
  person.sayName();

  在 Person.prototype.sayName 函数中，this 指向的 person 对象。即便是在整个原型链中,this 也代表当前对象的值。

• eval函数

在 eval 中，this指向当前作用域的对象。

var name = 'window';
var person = {
    name: 'person',
    getName: function(){
        eval("console.log(this.name)");
    }
}
person.getName();  //person
var getNameWin=person.getName;
getNameWin();  //window
// 在这里，和不使用 Eval ，作为对象的方法调用的时候得出的结果是一样的。

• 箭头函数

它里面的this是由外层作用域来决定的，且指向函数定义时的this而非执行时。因为箭头函数没有 this，因此它自身不能进行new实例化，同时也不能使用 call, apply, bind 等方法来改变 this 的指向。

var person = {
    name: 'person',
    sayName: function() {
        var fn = () => {
            return () => {
                console.log(this);   //{name: "person",sayName:F}
                console.log(this.name); //person
            }
        }
        fn()();
    }
}
person.sayName();

4.什么是Proxy?

Proxy概念
Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”（meta programming），即对编程语言进行编程。
Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。

var obj = new Proxy({}, {
  get: function (target, propKey, receiver) {
    console.log(`getting ${propKey}!`);
    return Reflect.get(target, propKey, receiver);
  },
  set: function (target, propKey, value, receiver) {
    console.log(`setting ${propKey}!`);
    return Reflect.set(target, propKey, value, receiver);
  }
});

上面代码对一个空对象架设了一层拦截，重定义了属性的读取（get）和设置（set）行为。这里暂时先不解释具体的语法，只看运行结果。对设置了拦截行为的对象obj，去读写它的属性，就会得到下面的结果。

obj.count = 1
//  setting count!
++obj.count
//  getting count!
//  setting count!
//  2

上面代码说明，Proxy 实际上重载（overload）了点运算符，即用自己的定义覆盖了语言的原始定义。
ES6 原生提供 Proxy 构造函数，用来生成 Proxy 实例。

var proxy = new Proxy(target, handler);

Proxy 对象的所有用法，都是上面这种形式，不同的只是handler参数的写法。其中，new Proxy()表示生成一个Proxy实例，target参数表示所要拦截的目标对象，handler参数也是一个对象，用来定制拦截行为。
下面是另一个拦截读取属性行为的例子。

var proxy = new Proxy({}, {
  get: function(target, propKey) {
    return 35;
  }
});
proxy.time // 35
proxy.name // 35
proxy.title // 35

上面代码中，作为构造函数，Proxy接受两个参数。第一个参数是所要代理的目标对象（上例是一个空对象），即如果没有Proxy的介入，操作原来要访问的就是这个对象；第二个参数是一个配置对象，对于每一个被代理的操作，需要提供一个对应的处理函数，该函数将拦截对应的操作。比如，上面代码中，配置对象有一个get方法，用来拦截对目标对象属性的访问请求。get方法的两个参数分别是目标对象和所要访问的属性。可以看到，由于拦截函数总是返回35，所以访问任何属性都得到35。
注意，要使得Proxy起作用，必须针对Proxy实例（上例是proxy对象）进行操作，而不是针对目标对象（上例是空对象）进行操作。
如果handler没有设置任何拦截，那就等同于直接通向原对象。

var target = {};
var handler = {};
var proxy = new Proxy(target, handler);
proxy.a = 'b';
target.a // "b"

上面代码中，handler是一个空对象，没有任何拦截效果，访问proxy就等同于访问target。
一个技巧是将 Proxy 对象，设置到object.proxy属性，从而可以在object对象上调用。

var object = { proxy: new Proxy(target, handler) };

Proxy 实例也可以作为其他对象的原型对象。

var proxy = new Proxy({}, {
  get: function(target, propKey) {
    return 35;
  }
});
let obj = Object.create(proxy);
obj.time // 35

上面代码中，proxy对象是obj对象的原型，obj对象本身并没有time属性，所以根据原型链，会在proxy对象上读取该属性，导致被拦截。
同一个拦截器函数，可以设置拦截多个操作。

var handler = {
  get: function(target, name) {
    if (name === 'prototype') {
      return Object.prototype;
    }
    return 'Hello, ' + name;
  },
  apply: function(target, thisBinding, args) {
    return args[0];
  },
  construct: function(target, args) {
    return {value: args[1]};
  }
};
var fproxy = new Proxy(function(x, y) {
  return x + y;
}, handler);
fproxy(1, 2) // 1
new fproxy(1, 2) // {value: 2}
fproxy.prototype === Object.prototype // true
fproxy.foo === "Hello, foo" // true

对于可以设置、但没有设置拦截的操作，则直接落在目标对象上，按照原先的方式产生结果。
下面是 Proxy 支持的拦截操作一览，一共 13 种。

• get(target, propKey, receiver)：拦截对象属性的读取，比如proxy.foo和proxy[‘foo’]。
• set(target, propKey, value, receiver)：拦截对象属性的设置，比如proxy.foo = v或proxy[‘foo’] = v，返回一个布尔值。
• has(target, propKey)：拦截propKey in proxy的操作，返回一个布尔值。
• deleteProperty(target, propKey)：拦截delete proxy[propKey]的操作，返回一个布尔值。
• ownKeys(target)：拦截Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbols(proxy)、Object.keys(proxy)、for…in循环，返回一个数组。该方法返回目标对象所有自身的属性的属性名，而Object.keys()的返回结果仅包括目标对象自身的可遍历属性。
• getOwnPropertyDescriptor(target, propKey)：拦截Object.getOwnPropertyDescriptor(proxy, propKey)，返回属性的描述对象。
• defineProperty(target, propKey, propDesc)：拦截Object.defineProperty(proxy, propKey, propDesc）、Object.defineProperties(proxy, propDescs)，返回一个布尔值。
• preventExtensions(target)：拦截Object.preventExtensions(proxy)，返回一个布尔值。
• getPrototypeOf(target)：拦截Object.getPrototypeOf(proxy)，返回一个对象。
• isExtensible(target)：拦截Object.isExtensible(proxy)，返回一个布尔值。
• setPrototypeOf(target, proto)：拦截Object.setPrototypeOf(proxy, proto)，返回一个布尔值。如果目标对象是函数，那么还有两种额外操作可以拦截。
• apply(target, object, args)：拦截 Proxy 实例作为函数调用的操作，比如proxy(…args)、proxy.call(object, …args)、proxy.apply(…)。
• construct(target, args)：拦截 Proxy 实例作为构造函数调用的操作，比如new proxy(…args)。

  5. 事件委托是什么？

  基本概念
  事件委托，通俗地来讲，就是把一个元素响应事件（click、keydown……）的函数委托到另一个元素；一般来讲，会把一个或者一组元素的事件委托到它的父层或者更外层元素上，真正绑定事件的是外层元素，当事件响应到需要绑定的元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在外层元素上去执行函数。

举个例子，比如一个宿舍的同学同时快递到了，一种方法就是他们都傻傻地一个个去领取，还有一种方法就是把这件事情委托给宿舍长，让一个人出去拿好所有快递，然后再根据收件人一一分发给每个宿舍同学；在这里，取快递就是一个事件，每个同学指的是需要响应事件的 DOM 元素，而出去统一领取快递的宿舍长就是代理的元素，所以真正绑定事件的是这个元素，按照收件人分发快递的过程就是在事件执行中，需要判断当前响应的事件应该匹配到被代理元素中的哪一个或者哪几个。

事件冒泡
前面提到 DOM 中事件委托的实现是利用事件冒泡的机制，那么事件冒泡是什么呢？
在 document.addEventListener 的时候我们可以设置事件模型：事件冒泡、事件捕获，一般来说都是用事件冒泡的模型；

如上图所示，事件模型是指分为三个阶段：
捕获阶段：在事件冒泡的模型中，捕获阶段不会响应任何事件；
目标阶段：目标阶段就是指事件响应到触发事件的最底层元素上；
冒泡阶段：冒泡阶段就是事件的触发响应会从最底层目标一层层地向外到最外层（根节点），事件代理即是利用事件冒泡的机制把里层所需要响应的事件绑定到外层；

小小优点: 使用事件代理我们可以不必要为每一个子元素都绑定一个监听事件，这样减少了内存上的消耗。并且使用事件代理我们还可以实现事件的动态绑定，比如说新增了一个子节点，我们并不需要单独地为它添加一个监听事件，它所发生的事件会交给父元素中的监听函数来处理。
手写代码实现：

一个函数 eventDelegate，它接受四个参数：

• [String] 一个选择器字符串用于过滤需要实现代理的父层元素，既事件需要被真正绑定之上；
• [String] 一个选择器字符串用于过滤触发事件的选择器元素的后代，既我们需要被代理事件的元素；
• [String] 一个或多个用空格分隔的事件类型和可选的命名空间，如 click 或 keydown.click ;
• [Function] 需要代理事件响应的函数；

function eventDelegate (parentSelector, targetSelector, events, foo) {
  // 触发执行的函数
  function triFunction (e) {
    // 兼容性处理
    var event = e || window.event;
    // 获取到目标阶段指向的元素
    var target = event.target || event.srcElement;
    // 获取到代理事件的函数
    var currentTarget = event.currentTarget;
    // 处理 matches 的兼容性
    if (!Element.prototype.matches) {
      Element.prototype.matches =
        Element.prototype.matchesSelector ||
        Element.prototype.mozMatchesSelector ||
        Element.prototype.msMatchesSelector ||
        Element.prototype.oMatchesSelector ||
        Element.prototype.webkitMatchesSelector ||
        function(s) {
          var matches = (this.document || this.ownerDocument).querySelectorAll(s),
            i = matches.length;
          while (--i >= 0 && matches.item(i) !== this) {}
          return i > -1;            
        };
    }
    // 遍历外层并且匹配
    while (target !== currentTarget) {
      // 判断是否匹配到我们所需要的元素上
      if (target.matches(targetSelector)) {
        var sTarget = target;
        // 执行绑定的函数，注意 this
        foo.call(sTarget, Array.prototype.slice.call(arguments))
      }
      target = target.parentNode;
    }
  }
  // 如果有多个事件的话需要全部一一绑定事件
  events.split('.').forEach(function (evt) {
    // 多个父层元素的话也需要一一绑定
    Array.prototype.slice.call(document.querySelectorAll(parentSelector)).forEach(function ($p) {
      $p.addEventListener(evt, triFunction);
    });
  });
}

6. 说一下你所理解的闭包

• 函数执行会形成一个私有上下文，如果上下文中的某些内容(一般指的是堆内存地址)被上下文以外的一些事物(例如:变量/事件绑定等)所占用，则当前上下文不能被出栈释放「浏览器的垃圾回收机制GC所决定的」 =>“闭包”的机制:形成一个不被释放的上下文
  • 保护：保护私有上下文中的“私有变量”和外界互不影响
  • 保存：上下文不被释放，那么上下文中的“私有变量”和“值”都会被保存起来，可以供其下级上下文中使用
• 弊端：如果大量使用闭包，会导致栈内存太大，页面渲染变慢，性能受到影响，所以真实项目中需要“合理应用闭包”；某些代码会导致栈溢出或者内存泄漏，这些操作都是需要我们注意的；

或者另外理解

实现闭包的条件：

• 函数嵌套着函数
• 子函数引用父函数的变量或参数
• 子函数被外界所引用
• 父级就形成了闭包环境(父级的执行栈不会被销毁)，父级的参数或是变量不会被浏览器垃圾机制给强制回收
• 此时打印父级的函数返回值，会出现scopes下有个closure===>闭包

正规闭包的格式

//正规闭包的模式
function fn(){
    var a=10;
    function f(){
        console.log(a)
    }
    return f;
}
let ff=fn();//fn就成了闭包环境(执行栈不会被销毁)
//fn中的参数或是变量不会被浏览器垃圾机制给强制回收
console.dir(ff)//scopes下里面有closure(闭包)
//浏览器关闭时才会销毁。
//或重新赋值为null才会销毁。
//ff()会存储现在的值并会累计相加。

此时父级的函数返回值的打印结果：

7. 说一下你所理解的ajax，如何创建一个ajax?

ajax的简介
浏览器与服务器之间，采用http协议通信。用户在浏览器地址栏中输入一个网址或者通过网页表单向服务器提交内容，这时浏览器就会向服务器发送http请求。
1999年，微软公司发布IE浏览器5.0版，第一次引入新功能：允许JavaScript脚本向服务器发起http请求。这个功能当时并没有引起注意，直到2004年Gmail发布和2005年Goole Map发布，才引起广泛关注。2005年2月，ajax这一个词第一次正式提出，它是 Asynchronous JavaScript and XML 的缩写，指的是通过JavaScript的异步通信，从服务器获取XML文档从中提取数据，在更新当前网页的对应部分，而不用刷新整个网页。后来，ajax这个词就成为JavaScript脚本发起http通信的代名词，也就是说，只要用脚本发起通信，就可以叫做ajax通信。W3C也在2006年发布了它的国际标准。
具体来说，ajax包括以下几个步骤：

• 创建 XMLHttpRequest 实例对象
• 发出 HTTP 请求
• 接收服务器传回的数据
• 更新网页数据

概括起来，就是一句话：ajax通过原生的 XMLHttpRequest 对象发出http请求，得到服务器返回的数据后在进行处理。现在，服务器返回的都是json格式的数据，xml格式已经过时了，但是ajax这个名字已经成了一个通用名词，字面含义已经消失了。
XMLHttpRequest对象 是ajax的主要接口，用于浏览器于服务器之间的通信。尽管名字里面有 XML和HTTP ，它实际上可以使用多种协议(比如 file或者ftp )，发送任何格式的数据(包括字符串和二进制)。

创建一个ajax的代码：

const SERVER_URL = "/server";
let xhr = new XMLHttpRequest();
// 创建 Http 请求
xhr.open("GET", SERVER_URL, true);
// 设置状态监听函数
xhr.onreadystatechange = function() {
  if (this.readyState !== 4) return;
  // 当请求成功时
  if (this.status === 200) {
    handle(this.response);
  } else {
    console.error(this.statusText);
  }
};
// 设置请求失败时的监听函数
xhr.onerror = function() {
  console.error(this.statusText);
};
// 设置请求头信息
xhr.responseType = "json";
xhr.setRequestHeader("Accept", "application/json");
// 发送 Http 请求
xhr.send(null);
// promise 封装实现：
function getJSON(url) {
  // 创建一个 promise 对象
  let promise = new Promise(function(resolve, reject) {
    let xhr = new XMLHttpRequest();
    // 新建一个 http 请求
    xhr.open("GET", url, true);
    // 设置状态的监听函数
    xhr.onreadystatechange = function() {
      if (this.readyState !== 4) return;
      // 当请求成功或失败时，改变 promise 的状态
      if (this.status === 200) {
        resolve(this.response);
      } else {
        reject(new Error(this.statusText));
      }
    };
    // 设置错误监听函数
    xhr.onerror = function() {
      reject(new Error(this.statusText));
    };
    // 设置响应的数据类型
    xhr.responseType = "json";
    // 设置请求头信息
    xhr.setRequestHeader("Accept", "application/json");
    // 发送 http 请求
    xhr.send(null);
  });
  return promise;
}

8. 说一下你所理解的同源政策?

同源策略的概念
同源策略 是一种出于浏览器安全方面的考虑而出台的一种策略，它可以保证用户信息的安全，防止恶意的网站窃取。同源策略只允许于与本域下的接口交互，不同源的客户端脚本在没有明确授权的情况下，不能读写对方的资源。

同源指的是：同协议 同域名 同端口

同源政策主要限制了三个方面：

• 当前域下的js脚本不能够访问其他域下的cookie、localStorage和indexDB
• 当前域下的js脚本不能够访问和操作其他域下的DOM和js对象

• 当前域下 ajax 无法发送跨域请求

  9. 你是如何解决的跨域问题的?

• 通过jsonp跨域

通常为了减轻web服务器的负载，我们把js、css，img等静态资源分离到另一台独立域名的服务器上，在html页面中再通过相应的标签从不同域名下加载静态资源，而被浏览器允许，基于此原理，我们可以通过动态创建script，再请求一个带参网址实现跨域通信。

原生实现代码

 <script>
    var script = document.createElement('script');
    script.type = 'text/javascript';
    // 传参一个回调函数名给后端，方便后端返回时执行这个在前端定义的回调函数
    script.src = 'http://www.domain2.com:8080/login?user=admin&callback=handleCallback';
    document.head.appendChild(script);
    // 回调执行函数
    function handleCallback(res) {
        console.log(JSON.stringify(res));
    }
 </script>

服务端返回如下(返回时即执行全局函数)

handleCallback({"status":true,"user":"admin","age":11})

JQuery ajax：

$.ajax({
    url: 'http://www.domain2.com:8080/login',
    type: 'get',
    dataType: 'jsonp',  // 请求方式为jsonp
    jsonpCallback: "handleCallback",    // 自定义回调函数名
    data: {}
});

后端node.js代码示例：

var querystring = require('querystring');
var http = require('http');
var server = http.createServer();
server.on('request', function(req, res) {
    var params = qs.parse(req.url.split('?')[1]);
    var fn = params.callback;
    // jsonp返回设置
    res.writeHead(200, { 'Content-Type': 'text/javascript' });
    res.write(fn + '(' + JSON.stringify(params) + ')');
    res.end();
});
server.listen('8080');
console.log('Server is running at port 8080...');

jsonp缺点：只能实现get一种请求。

• document.domain + iframe 跨域

此方案仅限主域相同，子域不同的跨域应用场景。实现原理：两个页面都是通过js强制设置document.domain为基础主域，就实现了同域。

// 父窗口：(http://www.domain.com/a.html)
<iframe id="iframe" src="http://child.domain.com/b.html"></iframe>
<script>
    document.domain = 'domain.com';
    var user = 'admin';
</script>
// 子窗口：(http://child.domain.com/b.html)
<script>
    document.domain = 'domain.com';
    // 获取父窗口中变量
    alert('get js data from parent ---> ' + window.parent.user);
</script>

• location.hash + iframe 跨域

实现原理：a想和b跨域相互通信，通过中间页c来实现。三个页面，不同域之间利用iframe的location.hash传值，相同域之间js访问通信。具体实现：a域：a.html —> b域：b.html —> a域：c.html ，a与b不同域只能通过hash值单向通信，b与c也不同域也只能单向通信，但c和a是同域，所以c可通过parent.parent访问a页面所有对象。

// a.html：(http://www.domain1.com/a.html)
<iframe id="iframe" src="http://www.domain2.com/b.html" style="display:none;"></iframe>
<script>
    var iframe = document.getElementById('iframe');
    // 向b.html传hash值
    setTimeout(function() {
        iframe.src = iframe.src + '#user=admin';
    }, 1000);
    // 开放给同域c.html的回调方法
    function onCallback(res) {
        alert('data from c.html ---> ' + res);
    }
</script>
//b.html：(http://www.domain2.com/b.html)
<iframe id="iframe" src="http://www.domain1.com/c.html" style="display:none;"></iframe>
<script>
    var iframe = document.getElementById('iframe');
    // 监听a.html传来的hash值，再传给c.html
    window.onhashchange = function () {
        iframe.src = iframe.src + location.hash;
    };
</script>
//c.html：(http://www.domain1.com/c.html)
<script>
    // 监听b.html传来的hash值
    window.onhashchange = function () {
        // 再通过操作同域a.html的js回调，将结果传回
        window.parent.parent.onCallback('hello: ' + location.hash.replace('#user=', ''));
    };
</script>

• window.name + iframe 跨域

window.name属性的独特之处：name值在不同的页面（甚至不同域名）加载后依旧存在，并且可以支持非常长的 name 值（2MB）。

//a.html：(http://www.domain1.com/a.html)
var proxy = function(url, callback) {
    var state = 0;
    var iframe = document.createElement('iframe');
    // 加载跨域页面
    iframe.src = url;
    // onload事件会触发2次，第1次加载跨域页，并留存数据于window.name
    iframe.onload = function() {
        if (state === 1) {
            // 第2次onload(同域proxy页)成功后，读取同域window.name中数据
            callback(iframe.contentWindow.name);
            destoryFrame();
        } else if (state === 0) {
            // 第1次onload(跨域页)成功后，切换到同域代理页面
            iframe.contentWindow.location = 'http://www.domain1.com/proxy.html';
            state = 1;
        }
    };
    document.body.appendChild(iframe);
    // 获取数据以后销毁这个iframe，释放内存；这也保证了安全（不被其他域frame js访问）
    function destoryFrame() {
        iframe.contentWindow.document.write('');
        iframe.contentWindow.close();
        document.body.removeChild(iframe);
    }
};
// 请求跨域b页面数据
proxy('http://www.domain2.com/b.html', function(data){
    alert(data);
});
//proxy.html：(http://www.domain1.com/proxy....
//中间代理页，与a.html同域，内容为空即可。
//b.html：(http://www.domain2.com/b.html)
<script>
    window.name = 'This is domain2 data!';
</script>

总结：通过iframe的src属性由外域转向本地域，跨域数据即由iframe的window.name从外域传递到本地域。这个巧妙地绕过了浏览器地跨域访问限制，但同时它又是安全操作。

• postMessage 跨域

postMessage是HTML5 XMLHttpRequest Level 2中的API，且是为数不多可以跨域操作的window属性之一，它可用于解决以下方面的问题：
页面和其打开的新窗口的数据传递
多窗口之间消息传递
页面与嵌套的iframe消息传递
上面三个场景的跨域数据传递
用法：postMessage(data,origin)方法接受两个参数
data： html5规范支持任意基本类型或可复制的对象，但部分浏览器只支持字符串，所以传参时最好用JSON.stringify()序列化。
origin： 协议+主机+端口号，也可以设置为”*”，表示可以传递给任意窗口，如果要指定和当前窗口同源的话设置为”/“。

// a.html：(http://www.domain1.com/a.html)
<iframe id="iframe" src="http://www.domain2.com/b.html" style="display:none;"></iframe>
<script>       
    var iframe = document.getElementById('iframe');
    iframe.onload = function() {
        var data = {
            name: 'aym'
        };
        // 向domain2传送跨域数据
        iframe.contentWindow.postMessage(JSON.stringify(data), 'http://www.domain2.com');
    };
    // 接受domain2返回数据
    window.addEventListener('message', function(e) {
        alert('data from domain2 ---> ' + e.data);
    }, false);
</script>
// b.html：(http://www.domain2.com/b.html)
<script>
    // 接收domain1的数据
    window.addEventListener('message', function(e) {
        alert('data from domain1 ---> ' + e.data);
        var data = JSON.parse(e.data);
        if (data) {
            data.number = 16;
            // 处理后再发回domain1
            window.parent.postMessage(JSON.stringify(data), 'http://www.domain1.com');
        }
    }, false);
</script>

• 跨域资源共享(CORS)

普通跨域请求：只服务端设置Access-Control-Allow-Origin即可，前端无须设置，若要带cookie请求：前后端都需要设置。
需注意的是：由于同源策略的限制，所读取的cookie为跨域请求接口所在域的cookie，而非当前页。如果想实现当前页cookie的写入，可参考下文：nginx反向代理中设置proxy_cookie_domain 和 NodeJs中间件代理中cookieDomainRewrite参数的设置。
目前，所有浏览器都支持该功能(IE8+：IE8/9需要使用XDomainRequest对象来支持CORS）)，CORS也已经成为主流的跨域解决方案。
前端设置
原生ajax：

var xhr = new XMLHttpRequest(); // IE8/9需用window.XDomainRequest兼容
// 前端设置是否带cookie
xhr.withCredentials = true;
xhr.open('post', 'http://www.domain2.com:8080/login', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('user=admin');
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        alert(xhr.responseText);
    }
};

JQuery ajax:

$.ajax({
    ...
   xhrFields: {
       withCredentials: true    // 前端设置是否带cookie
   },
   crossDomain: true,   // 会让请求头中包含跨域的额外信息，但不会含cookie
    ...
});

axios设置

axios.defaults.withCredentials = true

服务端设置
若后端设置成功，前端浏览器控制台则不会出现跨域报错信息，反之，说明没设成功。
java后台

/*
 * 导入包：import javax.servlet.http.HttpServletResponse;
 * 接口参数中定义：HttpServletResponse response
 */
// 允许跨域访问的域名：若有端口需写全（协议+域名+端口），若没有端口末尾不用加'/'
response.setHeader("Access-Control-Allow-Origin", "http://www.domain1.com"); 
// 允许前端带认证cookie：启用此项后，上面的域名不能为'*'，必须指定具体的域名，否则浏览器会提示
response.setHeader("Access-Control-Allow-Credentials", "true"); 
// 提示OPTIONS预检时，后端需要设置的两个常用自定义头
response.setHeader("Access-Control-Allow-Headers", "Content-Type,X-Requested-With");

node.js后台示例：

var http = require('http');
var server = http.createServer();
var qs = require('querystring');
server.on('request', function(req, res) {
    var postData = '';
    // 数据块接收中
    req.addListener('data', function(chunk) {
        postData += chunk;
    });
    // 数据接收完毕
    req.addListener('end', function() {
        postData = qs.parse(postData);
        // 跨域后台设置
        res.writeHead(200, {
            'Access-Control-Allow-Credentials': 'true',     // 后端允许发送Cookie
            'Access-Control-Allow-Origin': 'http://www.domain1.com',    // 允许访问的域（协议+域名+端口）
            /* 
             * 此处设置的cookie还是domain2的而非domain1，因为后端也不能跨域写cookie(nginx反向代理可以实现)，
             * 但只要domain2中写入一次cookie认证，后面的跨域接口都能从domain2中获取cookie，从而实现所有的接口都能跨域访问
             */
            'Set-Cookie': 'l=a123456;Path=/;Domain=www.domain2.com;HttpOnly'  // HttpOnly的作用是让js无法读取cookie
        });
        res.write(JSON.stringify(postData));
        res.end();
    });
});
server.listen('8080');
console.log('Server is running at port 8080...');

• nginx 代理跨域

nginx配置解决iconfont跨域
浏览器跨域访问js、css、img等常规静态资源被同源策略许可，但iconfont字体文件(eot|otf|ttf|woff|svg)例外，此时可在nginx的静态资源服务器中加入以下配置。

location / {
  add_header Access-Control-Allow-Origin *;
}

nginx反向代理接口跨域
跨域原理： 同源策略是浏览器的安全策略，不是HTTP协议的一部分。服务器端调用HTTP接口只是使用HTTP协议，不会执行JS脚本，不需要同源策略，也就不存在跨越问题。
实现思路：通过nginx配置一个代理服务器（域名与domain1相同，端口不同）做跳板机，反向代理访问domain2接口，并且可以顺便修改cookie中domain信息，方便当前域cookie写入，实现跨域登录。
nginx具体配置：

#proxy服务器
server {
    listen       81;
    server_name  www.domain1.com;
    location / {
        proxy_pass   http://www.domain2.com:8080;  #反向代理
        proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie里域名
        index  index.html index.htm;
        # 当用webpack-dev-server等中间件代理接口访问nignx时，此时无浏览器参与，故没有同源限制，下面的跨域配置可不启用
        add_header Access-Control-Allow-Origin http://www.domain1.com;  #当前端只跨域不带cookie时，可为*
        add_header Access-Control-Allow-Credentials true;
    }
}

前端代码示例：

var xhr = new XMLHttpRequest();
// 前端开关：浏览器是否读写cookie
xhr.withCredentials = true;
// 访问nginx中的代理服务器
xhr.open('get', 'http://www.domain1.com:81/?user=admin', true);
xhr.send();

node.js后台示例

var http = require('http');
var server = http.createServer();
var qs = require('querystring');
server.on('request', function(req, res) {
    var params = qs.parse(req.url.substring(2));
    // 向前台写cookie
    res.writeHead(200, {
        'Set-Cookie': 'l=a123456;Path=/;Domain=www.domain2.com;HttpOnly'   // HttpOnly:脚本无法读取
    });
    res.write(JSON.stringify(params));
    res.end();
});
server.listen('8080');
console.log('Server is running at port 8080...');

• node.js中间件代理跨域

node中间件实现跨域代理，原理大致与nginx相同，都是通过启一个代理服务器，实现数据的转发，也可以通过设置cookieDomainRewrite参数修改响应头中cookie中域名，实现当前域的cookie写入，方便接口登录认证。
利用node + express + http-proxy-middleware搭建一个proxy服务器
前端代码示例：

var xhr = new XMLHttpRequest();
// 前端开关：浏览器是否读写cookie
xhr.withCredentials = true;
// 访问http-proxy-middleware代理服务器
xhr.open('get', 'http://www.domain1.com:3000/login?user=admin', true);
xhr.send();

nodejs中间服务器：

var express = require('express');
var proxy = require('http-proxy-middleware');
var app = express();
app.use('/', proxy({
    // 代理跨域目标接口
    target: 'http://www.domain2.com:8080',
    changeOrigin: true,
    // 修改响应头信息，实现跨域并允许带cookie
    onProxyRes: function(proxyRes, req, res) {
        res.header('Access-Control-Allow-Origin', 'http://www.domain1.com');
        res.header('Access-Control-Allow-Credentials', 'true');
    },
    // 修改响应信息中的cookie域名
    cookieDomainRewrite: 'www.domain1.com'  // 可以为false，表示不修改
}));
app.listen(3000);
console.log('Proxy server is listen at port 3000...');

nodejs后台代码可以参考 nginx代码

vue框架跨域
利用node + webpack + webpack-dev-server代理接口跨域。在开发环境下，由于vue渲染服务和接口代理服务都是webpack-dev-server同一个，所以页面与代理接口之间不再跨域，无须设置headers跨域信息了。
webpack.config.js部分配置：

module.exports = {
    entry: {},
    module: {},
    ...
    devServer: {
        historyApiFallback: true,
        proxy: [{
            context: '/login',
            target: 'http://www.domain2.com:8080',  // 代理跨域目标接口
            changeOrigin: true,
            secure: false,  // 当代理某些https服务报错时用
            cookieDomainRewrite: 'www.domain1.com'  // 可以为false，表示不修改
        }],
        noInfo: true
    }
}

• WebSocket协议跨域

WebSocket protocol是HTML5一种新的协议。它实现了浏览器与服务器全双工通信，同时允许跨域通讯，是server push技术的一种很好的实现。
原生WebSocket API使用起来不太方便，我们使用Socket.io，它很好地封装了webSocket接口，提供了更简单、灵活的接口，也对不支持webSocket的浏览器提供了向下兼容。
前端代码：

<div>user input：<input type="text"></div>
<script src="https://cdn.bootcss.com/socket.io/2.2.0/socket.io.js"></script>
<script>
var socket = io('http://www.domain2.com:8080');
// 连接成功处理
socket.on('connect', function() {
    // 监听服务端消息
    socket.on('message', function(msg) {
        console.log('data from server: ---> ' + msg); 
    });
    // 监听服务端关闭
    socket.on('disconnect', function() { 
        console.log('Server socket has closed.'); 
    });
});
document.getElementsByTagName('input')[0].onblur = function() {
    socket.send(this.value);
};
</script>

node.js socket后台：

var http = require('http');
var socket = require('socket.io');
// 启http服务
var server = http.createServer(function(req, res) {
    res.writeHead(200, {
        'Content-type': 'text/html'
    });
    res.end();
});
server.listen('8080');
console.log('Server is running at port 8080...');
// 监听socket连接
socket.listen(server).on('connection', function(client) {
    // 接收信息
    client.on('message', function(msg) {
        client.send('hello：' + msg);
        console.log('data from client: ---> ' + msg);
    });
    // 断开处理
    client.on('disconnect', function() {
        console.log('Client socket has closed.'); 
    });
});

10. 你所理解的JavaScript的事件循环机制是什么？

javascript是一门单线程语言，在最新的HTML5中提出了Web-Worker，但javascript是单线程这一核心仍未改变。所以一切javascript版的”多线程”都是用单线程模拟出来的，一切javascript多线程都是纸老虎！ 需要注意的是：JavaScript 是一门单线程语言，异步操作都是放到事件循环队列里面，等待主执行栈来执行的，并没有专门的异步执行线程。

在解释事件循环之前首先先解释一下浏览器的执行线程： 浏览器是多进程的，浏览器每一个 tab 标签都代表一个独立的进程，其中浏览器渲染进程（浏览器内核）属于浏览器多进程中的一种，主要负责页面渲染，脚本执行，事件处理等 其包含的线程有：GUI 渲染线程（负责渲染页面，解析 HTML，CSS 构成 DOM 树）、JS 引擎线程、事件触发线程、定时器触发线程、http 请求线程等主要线程.

关于执行中的线程

主线程：也就是 js 引擎执行的线程，这个线程只有一个，页面渲染、函数处理都在这个主线程上执行。 工作线程：也称幕后线程，这个线程可能存在于浏览器或js引擎内，与主线程是分开的，处理文件读取、网络请求等异步事件。

任务队列

所有的任务可以分为同步任务和异步任务，同步任务，顾名思义，就是立即执行的任务，同步任务一般会直接进入到主线程中执行；而异步任务，就是异步执行的任务，比如ajax网络请求，setTimeout 定时函数等都属于异步任务，异步任务会通过任务队列的机制(先进先出的机制)来进行协调。

可以用图片具体的说明：

同步和异步任务分别进入不同的执行环境，同步的进入主线程，即主执行栈，异步的进入任务队列。主线程内的任务执行完毕为空，会去任务队列读取对应的任务，推入主线程执行。 上述过程的不断重复就是我们说的 Event Loop (事件循环)。

在事件循环中，每进行一次循环操作称为 tick，通过阅读规范可知，每一次 tick 的任务处理模型是比较复杂的，其关键的步骤可以总结如下：
1.在此次 tick 中选择最先进入队列的任务( oldest task )，如果有则执行
2.检查是否存在 Microtasks ，如果存在则不停地执行，直至清空Microtask Queue
3.更新 render
4.主线程重复执行上述步骤
可以用一张图来说明流程

这里相信有人会想问，什么是 microtasks ?规范中规定，task分为两大类, 分别是 Macro Task （宏任务）和 Micro Task（微任务）, 并且每个宏任务结束后, 都要清空所有的微任务,这里的 Macro Task也是我们常说的 task 。

宏任务主要包含：script( 整体代码)、setTimeout、setInterval、I/O、UI 交互事件、setImmediate(Node.js 环境) 微任务主要包含：Promise、MutaionObserver、process.nextTick(Node.js 环境)

setTimeout/Promise 等API便是任务源，而进入任务队列的是由他们指定的具体执行任务。来自不同任务源的任务会进入到不同的任务队列。其中 setTimeout 与 setInterval 是同源的。

11. 说一下对Object.defineProperty()的理解。

对象是由多个名/值对组成的无序的集合。对象中每个属性对应任意类型的值。
定义对象可以使用构造函数或者字面量的形式：

var obj = new Object;  //obj = {}
obj.name = "张三";  //添加描述
obj.say = function(){};  //添加行为

除了以上添加属性的方式，还可以使用Object.defineProperty定义新属性或修改原有的属性。
其语法： Object.defineProperty(obj,prop,descript)
其参数说明：

obj：必需，目标对象 prop：必需，需要定义或修改属性的名字 descript：必需，目标属性所拥有的特性

其返回值： 传入函数的对象，即第一个参数

给对象的属性添加特性描述，目前提供两种形式： 数据描述和存取器描述

• 数据描述

当修改或定义对象的某个属性的时候，给这个属性添加一些特性：

var obj = {
    test:"hello"
}
//对象已有的属性添加特性描述 
Object.defineProperty(obj,"test",{
    configurable:true | false,
    enumerable:true | false,
    value:任意类型的值,
    writable:true | false
});
//对象新添加的属性的特性描述 
Object.defineProperty(obj,"newKey",{
    configurable:true | false,
    enumerable:true | false,
    value:任意类型的值,
    writable:true | false
});

数据描述中的属性都是可选的，接下来看看每一个属性的作用。

value：属性对应的值，可以是任意类型的值，默认为undefined。 writable：属性的值是否可以被重写。设置为true可以被重写；设置为false，不能被重写。默认为false。 enumerable：此属性是否可以被枚举(使用for…in或Object.keys())。设置为true可以被枚举；设置为false不能被枚举。默认为false。 configurable：是否可以删除目标属性或是否可以再次修改属性的特性(目标属性是否可以使用delete删除，目标属性是否可以再次设置特性)。设置为true的话可以删除或可以重新设置；甚至为false的话不能被删除或不可以重新设置特性。默认为false。

• 存取器描述

当使用存取器描述属性的特性的时候，允许设置以下特性属性：

var obj = {};
Object.defineProperty(obj,"newKey",{
    get:function (){} | undefined,
    set:function (value){} | undefined
    configurable: true | false
    enumerable: true | false
});

注意：当使用getter或setter方法，不允许使用writable和value这两个属性 getter 是一种获得属性值的方法 setter 是一种设置属性值的方法

var obj = {};
var initValue = 'hello';
Object.defineProperty(obj,"newKey",{
    get:function (){
        //当获取值的时候触发的函数 return initValue;    
    },
    set:function (value){
        //当设置值的时候触发的函数,设置的新值通过参数value拿到
        initValue = value;
        return initValue;
    }
});
//获取值 
console.log( obj.newKey );  //hello 
//设置值
obj.newKey = 'change value';
console.log( obj.newKey ); //change value

get或set不是必须成对出现的，任写其一就可以。如果不设置方法，则get和set的默认值为undefined； configurable和enmerable 同上面的方法 兼容性：在ie8下只能在DOM对象上使用，尝试在原生的对象使用Object.defineProperty()会报错。

12. 说一下图片的懒加载和预加载的理解。

懒加载

什么叫做懒加载?
  懒加载也叫延迟加载，指的是在长网页中延迟加载图像，是一种很好优化网页性能的方式。用户滚下哦那个到它们之前，可视区域外的图像不会加载。这与图像预加载相反，在长网页上使用延迟加载将使网页加载更快。在某些情况下，它还可以帮助减少服务器负载。适用于图片很多，页面很长的电商网站场景中。
为什么要用懒加载?
  能提升用户的体检。不妨设想下，用户打开像手机淘宝长页面的时候，如果页面上所有的图片都需要加载，由于图片数目较大，等待时间很长，用户难免会心生抱怨，这就严重影响用户体验
  减少无效资源的加载，这样能明显减少服务器的压力和流量，也能够减少浏览器的负担
  防止并发加载的资源过多会阻塞js的加载，影响网站的正常使用。
懒加载的原理
  首先将页面上的图片的src属性设为空字符串，而图片的真实路径则设置在 data-original 属性中，当页面滚动的时候需要去监听scroll事件，在scroll事件的回调中，判断我们的懒加载的图片是否进入可视区域，如果图片在可视区域就将鱼片的src属性设置为data-original的值，这样就可以实现延迟加载
懒加载实现步骤
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Lazyload</title>
    <style>
        .image-item {
            display: block;
            margin-bottom: 50px;
            /* 一定记得设置图片高度 */
            height: 200px;
        }
    </style>
</head>
<body>
    <img src="" class="image-item" lazyload="true" data-original="images/1.png" />
    <img src="" class="image-item" lazyload="true" data-original="images/2.png" />
    <img src="" class="image-item" lazyload="true" data-original="images/3.png" />
    <img src="" class="image-item" lazyload="true" data-original="images/4.png" />
    <img src="" class="image-item" lazyload="true" data-original="images/5.png" />
    <img src="" class="image-item" lazyload="true" data-original="images/6.png" />
    <img src="" class="image-item" lazyload="true" data-original="images/7.png" />
    <img src="" class="image-item" lazyload="true" data-original="images/8.png" />
    <img src="" class="image-item" lazyload="true" data-original="images/9.png" />
    <img src="" class="image-item" lazyload="true" data-original="images/10.png" />
    <img src="" class="image-item" lazyload="true" data-original="images/11.png" />
    <img src="" class="image-item" lazyload="true" data-original="images/12.png" />
    <script>
        var viewHeight = document.documentElement.clientHeight//获取可视区高度
        function lazyload() {
            var eles = document.querySelectorAll('img[data-original][lazyload]')
            Array.prototype.forEach.call(eles, function (item, index) {
                var rect
                if (item.dataset.original === "") return
                rect = item.getBoundingClientRect()// 用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置
                if (rect.bottom >= 0 && rect.top < viewHeight) {
                    (function () {
                        var img = new Image()
                        img.src = item.dataset.original
                        img.onload = function () {
                            item.src = img.src
                        }
                        item.removeAttribute("data-original")//移除属性，下次不再遍历
                        item.removeAttribute("lazyload")
                    })()
                }
            })
        }
        lazyload()//刚开始还没滚动屏幕时，要先触发一次函数，初始化首页的页面图片
        document.addEventListener("scroll", lazyload)
    </script>
</body>
</html>

预加载

什么是预加载?
  资源预加载是另一个性能优化技术，我们可以使用该技术来预先告知浏览器某些资源可能在将来会被用到。预加载简单来说就是将所有所需的资源提前请求加载到本地，这样后面在需要用到的时候直接从缓存取出资源。
为什么要用预加载?
  在网页全部加载之前，对一些主要内容进行加载，以提供给用户更好的体验，减少等待的事件。否则，如果一个页面的内容过于庞大，没有使用预加载技术的页面就会长时间的展现一片空白，直到所有内容加载完毕。
 实现预加载的几种办法
   使用HTML标签
     <img src="http://hbimg.huabanimg.com/39b716cc64cd7af2131043b50b427d3597249020bbc34-wPobUM_fw236/format/webp" style="display:none" />
   使用image对象
     <sctipt src="./myPreload.js"></script>
     //myPreload.js文件
     var image=new Image()
     image.src="http://hbimg.huabanimg.com/39b716cc64cd7af2131043b50b427d3597249020bbc34-wPobUM_fw236/format/webp"
     使用XMLHttpRequest对象，虽然存在跨域问题，但会精细控制预加载内容
       var xmlhttprequest = new XMLHttpRequest();
      xmlhttprequest.onreadystatechange = callback;
      xmlhttprequest.onprogress = progressCallback;
      xmlhttprequest.open("GET", "http://hbimg.huabanimg.com/39b716cc64cd7af2131043b50b427d3597249020bbc34-wPobUM_fw236/format/web", true);
      xmlhttprequest.send();
      function callback() {
        if (xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200) {
          var responseText = xmlhttprequest.responseText;
          console.log(responseText)
        } else {
          console.log("Request was unsuccessful:" + xmlhttprequest.status);
        }
      }
      function progressCallback(e) {
        e = e || event;
        if (e.lengthComputable) {
          console.log("Received" + e.loaded + "of" + e.total + "bytes")
        }
      }
    使用PreloadJS库
      PreloadJS提供了一种预加载内容的一致方式，以便在HTML应用程序中使用。预加载可以使用HTML标签以及XHR来完成。默认情况下，PreloadJS会尝试使用XHR加载内容，因为它提供了对进度和完成事件的更好支持，但是由于跨域问题，使用基于标记的加载可能会更好。
      //使用preload.js
        var queue = new createjs.LoadQueue();//默认是xhr对象，如果是new createjs.LoadQueue(false)是指使用HTML标签，可以跨域
        queue.on("complete", handleComplete, this);
        queue.loadManifest([
          { id: "myImage", src: "http://hbimg.huabanimg.com/39b716cc64cd7af2131043b50b427d3597249020bbc34-wPobUM_fw236/format/web" },
          { id: "myImage2", src: "http://hbimg.huabanimg.com/39b716cc64cd7af2131043b50b427d3597249020bbc34-wPobUM_fw236/format/web" }
        ]);
        function handleComplete() {
          var image = queue.getResuLt("myImage");
          document.body.appendChild(image);
        }