js基础知识复习

1. 全局上下文/默认绑定
2. 直接调用函数
3. 隐式绑定：对象.方法的形式调用
4. DOM事件绑定(特殊)
5. new构造函数绑定
6. 箭头函数
7. 显式绑定

1. 全局上下文/默认绑定

函数没有调用时，全局上下文默认this指向window, 严格模式下指向undefined。

2.直接调用函数

比如:

let obj = {
  a: function() {
    console.log(this);
  }
}
let func = obj.a;
func();
复制代码

这种情况是直接调用。this相当于全局上下文的情况。

3. 隐式绑定：对象.方法的形式调用

如果函数调用时，前面存在调用它的对象，那么this就会隐式绑定到这个对象上，称为隐式绑定；如果函数调用前存在多个对象，this指向距离调用自己最近的一个对象；还是刚刚的例子，我如果这样写:

obj.a();
复制代码

//this的隐式绑定

function fn(){ console.log(this.name)

    };

    let obj = {

       name:'听风',

       func:fn

    };

    obj.func()//听风

如果函数调用前存在多个对象，this指向距离调用自己最近的对象，比如这样：

function fn() {  
console.log(this.name);
};
let obj = {
    name: '行星飞行',
    func: fn,
};
let obj1 = {
    name: '听风是风',
    o: obj
};
obj1.o.func() //行星飞行
//那如果我们将obj对象的name属性注释掉，现在输出什么呢？
function fn() {
console.log(this.name);
};
let obj = {
    func: fn,
};
let obj1 = {
    name: '听风是风',
    o: obj
};
obj1.o.func() //？？


这里输出undefined，大家千万不要将作用域链和原型链弄混淆了，obj对象虽然obj1的属性，但它两原型链并不相同，并不是父子关系，由于obj未提供name属性，所以是undefined。

这就是对象.方法的情况，this指向这个对象；

关于隐式丢失具体例子，可参考：www.cnblogs.com/echolun/p/1…；

关于this的练习题：www.cnblogs.com/echolun/p/1…

4. DOM事件绑定

onclick和addEventerListener中 this 默认指向绑定事件的元素。

IE比较奇异，使用attachEvent，里面的this默认指向window。

5. new+构造函数

此时构造函数中的this指向实例对象。

6. 箭头函数？

箭头函数没有this, 因此也不能绑定。里面的this会指向当前最近的非箭头函数的this，找不到就是window(严格模式是undefined)。比如:

let obj = {
  a: function() {
    let do = () => {
      console.log(this);
    }
    do();
  }
}
obj.a(); // 找到最近的非箭头函数a，a现在绑定着obj, 因此箭头函数中的this是obj
复制代码

优先级: new > call、apply、bind > 对象.方法 > 直接调用。

显式绑定 > 隐式绑定 > 默认绑定

new绑定 > 隐式绑定 > 默认绑定

Math.max(1, 10); //10
Math.min(1, 10); //1

Math.max.apply(null, [1, 2, 10]); //10
Math.max.min(null, [1, 2, 10]); //1

let a = [];
let b = function () {};
Object.prototype.toString.call(a) === "[object Array]";//true
Object.prototype.toString.call(b) === "[object Function]";//true

//判断数组是否包含某对象
let data = [
    {name:'echo'},
    {name:'听风是风'},
    {name:'天子笑'},
    ],
    val = {name:'天子笑'};
JSON.stringify(data).indexOf(JSON.stringify(val)) !== -1;//true

//判断两数组/对象是否相等
let a = [1,2,3],
    b = [1,2,3];
JSON.stringify(a) === JSON.stringify(b);//true

//深拷贝
function deepClone(data) {
    let _data = JSON.stringify(data),
        dataClone = JSON.parse(_data);
    return dataClone;
};
//测试
let arr = [1,2,3],
    _arr = deepClone(arr);
arr[0] = 2;
console.log(arr,_arr)//[2,2,3]  [1,2,3]

 var arr = [1,2,4];
 console.log(arr.toString()); //  1,2,4
 alert(JSON.stringify(arr));
 console.log(JSON.stringify(arr)); //  [1,2,4]

1. 垃圾回收器创建了一个“roots”列表；roots通常是代码中的全局变量的引用；js中，window对象是一个全局变量，被当作root；
2. 垃圾回收器创建了一个“roots”列表。roots 通常是代码中全局变量的引用。JavaScript 中，“window” 对象是一个全局变量，被当作 root 。window 对象总是存在，因此垃圾回收器可以检查它和它的所有子对象是否存在（即不是垃圾）；
3. 所有的 roots 被检查和标记为激活（即不是垃圾）。所有的子对象也被递归地检查。从 root 开始的所有对象如果是可达的，它就不被当作垃圾；
4. 所有未被标记的内存会被当做垃圾，收集器现在可以释放内存，归还给操作系统了；

现代的垃圾回收器改良了算法，但是本质是相同的：可达内存被标记，其余的被当作垃圾回收

】

9.v8引擎的垃圾回收机制

js存储对象类型的数据是通过堆进行空间分配的，当我们构造一个对象进行赋值操作的时候，其实相应的内存已经分配到了堆上。你可以不断的这样创建对象，让 V8 为它分配空间，直到堆的大小达到上限。

那么，V8 为什么要给它设置内存上限？明明我的机器大几十G的内存，只能让我用这么一点？

原因是由两个因素共同决定的，一个是JS单线程的执行机制；另一个是JS的垃圾回收机制的限制；

首先js是单线程运行的，意味着一旦进入到垃圾回收，那么其它的各种运行逻辑都要暂停; 另一方面垃圾回收其实是非常耗时间的操作，在这么长的时间内，我们的JS代码执行会一直没有响应，造成应用卡顿，导致应用性能和响应能力直线下降。因此，V8 做了一个简单粗暴的选择，那就是限制堆内存，也算是一种权衡的手段，因为大部分情况是不会遇到操作几个G内存这样的场景的。

新生代内存的回收

juejin.cn/post/684490…

V8把堆内存分成了两部分处理：新生代内存和老生代内存；新生代就是临时分配的内存，存活时间短；老生代就是常驻内存，存活时间长；V8的堆内存，就是两个内存之和；

首先将新生代内存空间一分为二: 

 其中From部分表示正在使用的内存，To 是目前闲置的内存。 

当进行垃圾回收时，V8 将From部分的对象检查一遍，如果是存活对象那么复制到To内存中(在To内存中按照顺序从头放置的)，如果是非存活对象直接回收即可。

 当所有的From中的存活对象按照顺序进入到To内存之后，From 和 To 两者的角色对调，From现在被闲置，To为正在使用，如此循环。  

老生代内存回收：

那么新生代中的变量如果经过多次回收后依然存在，那么就会被放入到老生代内存中，这种现象就叫晋升。

发生晋升其实不只是这一种原因，我们来梳理一下会有那些情况触发晋升:

• 已经经历过一次 Scavenge 回收。
• To（闲置）空间的内存占用超过25%。

现在进入到老生代的垃圾回收机制当中，老生代中累积的变量空间一般都是很大的，当然不能用Scavenge算法啦，浪费一半空间不说，对庞大的内存空间进行复制岂不是劳民伤财？

对于老生代的垃圾回收机制，采用的策略：

第一步，进行标记-清除，主要分为标记阶段和清除阶段。首先会遍历堆中的所有对象，对它们做上标记，然后对于代码环境中使用的变量以及被强引用的变量取消标记，剩下的就是要删除的变量了，在随后的清除阶段对其进行空间的回收；

当然这又会引发内存碎片的问题，存活对象的空间不连续对后续的空间分配造成障碍。老生代又是如何处理这个问题的呢？

第二步，整理内存碎片。V8 的解决方式非常简单粗暴，在清除阶段结束后，把存活的对象全部往一端靠拢。

增量标记：

由于js是单线程的机制，V8在进行垃圾回收的时候，会不可避免地阻塞业务逻辑地执行，如果老生代的垃圾回收任务很重，耗时会很严重，影响应用的性能；

于是采用了增量标记的方案：将一口气完成的标记任务分为很多小的部门完成，每做完一个小的部分就"歇"一下，就js应用逻辑执行一会儿，然后再执行下面的部分，如果循环，直到标记阶段完成才进入内存碎片的整理上面来。经过增量标记之后，垃圾回收过程对JS应用的阻塞时间减少到原来了1 / 6, 可以看到，这是一个非常成功的改进。

10.js创建对象的几种方式

第一种：Object构造函数创建

var Person = new Object();
Person.name = 'Nike';
Person.age = 29;

这行代码创建了Object引用类型的一个新实例，然后把实例保存在变量Person中。

第二种：使用对象字面量表示法

var Person = {};//相当于var Person = new Object();
var Person = {name:'Nike';age:29;}

对象字面量是对象定义的一种简写形式，目的在于简化创建包含大量属性的对象的过程。第一种和第二种方式创建对象的方法其实都是一样的，只是写法上的区别不同

在介绍第三种的创建方法之前，我们应该要明白为什么还要用别的方法来创建对象，也就是第一种，第二种方法的缺点所在：它们都是用了同一个接口创建很多对象，会产生大量的重复代码，就是如果你有100个对象，那你要输入100次很多相同的代码。那我们有什么方法来避免过多的重复代码呢，就是把创建对象的过程封装在函数体内，通过函数的调用直接生成对象。

第三种：使用工厂模式创建对象

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('Nike',29,'teacher');
var person2 = createPerson('Arvin',20,'student');

在使用工厂模式创建对象的时候，我们都可以注意到，在createPerson函数中，返回的是一个对象。那么我们就无法判断返回的对象究竟是一个什么样的类型。于是就出现了第四种创建对象的模式。

第四种:使用构造函数创建对象

function Person(name,age,job){
this.name = name;
this.age = age;
this.job = job;
this.sayName = function(){
alert(this.name);
}
}
var person1 = new Person('Nike',29,'teacher');
var person2 = new Person('Arvin',20,'student');

对比工厂模式，我们可以发现以下区别：

1.没有显示地创建对象

2.直接将属性和方法赋给了this对象

3.没有return语句

4.终于可以识别的对象的类型。对于检测对象类型，我们应该使用instanceof操作符，我们来进行自主检测：

alert(person1 instanceof Object);//ture
alert(person1 instanceof Person);//ture
alert(person2 instanceof Object);//ture
alert(person2 instanceof Object);//ture

同时我们也应该明白，按照惯例，构造函数始终要应该以一个大写字母开头，而非构造函数则应该以一个小写字母开头。

那么构造函数确实挺好用的，但是它也有它的缺点：

就是每个方法都要在每个实例上重新创建一遍，方法指的就是我们在对象里面定义的函数。如果方法的数量很多，就会占用很多不必要的内存。于是出现了第五种创建对象的方法

第五种：原型创建对象模式

function Person(){}
Person.prototype.name = 'Nike';
Person.prototype.age = 20;
Person.prototype.job = 'teacher';
Person.prototype.sayName = function(){
alert(this.name);
};
var person1 = new Person();
person1.sayName();

使用原型创建对象的方式，可以让所有对象实例共享它所包含的属性和方法。

如果是使用原型创建对象模式，请看下面代码：

function Person(){}
Person.prototype.name = 'Nike';
Person.prototype.age = 20;
Person.prototype.jbo = 'teacher';
Person.prototype.sayName = function(){
alert(this.name);
};
var person1 = new Person();
var person2 = new Person();
person1.name ='Greg';alert(person1.name); //'Greg' --来自实例
alert(person2.name); //'Nike' --来自原型

当为对象实例添加一个属性时，这个属性就会屏蔽原型对象中保存的同名属性。

这时候我们就可以使用构造函数模式与原型模式结合的方式，构造函数模式用于定义实例属性，而原型模式用于定义方法和共享的属性

第六种：组合使用构造函数模式和原型模式

解决了方法不能共享，引用类型改变的问题；

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 Person('Nike',20,'teacher');

11.原型、原型链

原型、构造函数、实例

原型（prototype）：一个简单的对象，用于实现对象的属性继承。（js中，每当定义一个函数数据类型的时候，都会带有一个prototype的属性，这个属性指向函数的原型对象）

构造函数：当函数经过new调用后就成为了构造函数，并返回一个全新的实例；

实例：由构造函数创建并返回的，这个实例对象有一个__proto__属性，该属性指向构造函数的原型对象；并且通过constructor指向构造函数；

例如：//实例：const instance = new Object（）

实例是instance；构造函数时Object；构造函数有一个prototype的属性指向原型；

Javascript函数的prototype

每一个函数，无论是内置的还是自定义的，在创建的时候，就会内建一个prototype属性，被称为原型，只有function才有，其他的对象没有；

我们创建的每个函数都有一个 prototype（原型）属性，这个属性是一个指针，指向一个对象，而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。如果按照字面意思来理解，那么prototype 就是通过调用构造函数而创建的那个对象实例的原型对象。使用原型对象的好处是可以让所有对象实例共享它所包含的属性和方法；

而任何一个prototype都有一个内置的constructor属性（function类型），指向了这个prototype的所属函数——也就是说，任何一个对象，都可以通过constructor属性访问其构造函数。

原型链：

js对象通过__proto__指向父类对象（创建该对象的构造函数的原型），直到指向Object对象为止，这样就形成了一个原型链；

• 对象的hasOwnProperty（）来检查对象自身中是否含有该属性；
• 使用in检查对象中是否含有某个属性的时候，如果对象中没有但是原型链中有，也会返回true；
• 属性查找机制: 当查找对象的属性时，如果实例对象自身不存在该属性，则沿着原型链往上一级查找，找到时则输出，不存在时，则继续沿着原型链往上一级查找，直至最顶级的原型对象Object.prototype，如还是没找到，则输出undefined；
• 属性修改机制: 只会修改实例对象本身的属性，如果不存在，则进行添加该属性，如果需要修改原型的属性时，则可以用: b.prototype.x = 2；但是这样会造成所有继承于该对象的实例的属性发生改变。

判断一个属性是实例对象上的还是其原型对象上的？

1. obj.hasOwnProperty(‘属性名’) 用于检查给定的属性是否存在于当前实例对象中，（而不是实例原型中）。如果是返回true,如果不是返回 false。 

2. in 操作符用来判断某个属性属于某个对象，可以是对象的直接属性，也可以是通过prototype继承的属性。如：(属性名 in 对象) ，不管属性是原型的还是实例的，只要存在就会返回ture；否则返回false。 所以用两者结合，就可以判断某个属性是否是原型上的属性

12.js继承的几种方式

继承的原理

还是跟原型链有关。每个函数都有个原型对象，这个对象用来存储通过这个函数所创建的所有实例的共有属性和方法。在读取某个对象属性的时候，从实例开始，如果实例有就返回，如果没有就找原型对象，找到了就返回。通过实例只能访问原型对象里的值，但是不能修改。这就实现了继承。

 ES5继承

构造函数、原型和实例的关系：每一个构造函数都有一个原型对象，每一个原型对象都有一个指向构造函数的指针，而每一个实例都包含一个指向原型对象的内部指针，

• 原型链实现继承

  • 基本思想：利用原型让一个引用类型继承另一个引用类型的属性和方法，即让原型对象等于另一个类型的实例

  • 基本模式：

   1       function SuperType(){
   2           this.property = true;
   3       }
   4       SuperType.prototype.getSuperValue = function(){
   5           return this.property;
   6       };
   7       function SubType(){
   8           this.subproperty = false;
   9       }
  10       \\继承了SuperType
  11       SubType.prototype = new SuperType();
  12       
  13       SubType.prototype.getSubValue = function(){
  14           return this.subproperty;
  15       };
  16       var instance = new SubType();
  17       alert(instance.getSuperValue());  \\true

  • 最终结果：instance指向SubType的原型，SubType的原型又指向SuperType的原型，getSuperValue()方法任然在SuperType.prototype中，但property则位于SubType.prototype中，这是因为property是一个实例属性，而getSuperValue是一个原型方法。此时，instance.constructor指向的是SuperType。

  • 注意事项：

    • 别忘记默认的原型，所有的引用类型都继承自Object，所有函数的默认原型都是Object的实例，因此默认原型里都有一个指针，指向object.prototype

    • 谨慎地定义方法，给原型添加方法的代码一定要放在替换原型的语句之后，不能使用对象字面量添加原型方法，这样会重写原型链

  • 原型链继承的问题

  • 最主要的问题来自包含引用类型值的原型，它会被所有实例共享

  • 第二个问题是，创造子类型的实例时，不能向超类型的构造函数中传递参数

• 借用构造函数

  • 基本思想：在子类型构造函数的内部调用超类型构造函数，通过使用apply()和call()方法可以在将来新创建的对象上执行构造函数

     1 function SuperType(){
     2     this.colors = ["red","blue","green"];
     3 }
     4 ​
     5 function SubType(){
     6     \\借调了超类型的构造函数
     7     SuperType.call(this);
     8 }
     9 ​
    10 var instance1 = new SubType();
    11 \\["red","blue","green","black"]
    12 instance1.colors.push("black");
    13 console.log(instance1.colors);
    14 ​
    15 var instance2 = new SubType();
    16 \\["red","blue","green"]
    17 console.log(instance2.colors);

    通过call或者apply方法，我们实际上是在将来新创建的SubType实例的环境下调用了SuperType构造函数。这样一来，就会在新SubType对象上执行SuperType函数中定义的所有对象初始化代码，因此，每一个SubType的实例都会有自己的colors对象的副本

  • 优势：

    • 传递参数

     1 function Supertype(name){
     2     this.name = name;
     3 }
     4 ​
     5 function Subtype(){
     6     Supertype.call(this,'Annika');
     7     this.age  = 21;
     8 }
     9 ​
    10 var instance = new Subtype;
    11 console.log(instance.name);  \\Annika
    12 console.log(instance.age);   \\29

  • 缺点：

    • 方法都在构造函数中定义，函数无法复用

    • 在超类型中定义的方法，子类型不可见，结果所有类型都只能使用构造函数模式

• 组合继承

  • 基本思想：将原型链和借用构造函数技术组合到一起。使用原型链实现对原型属性和方法的继承，用借用构造函数模式实现对实例属性的继承。这样既通过在原型上定义方法实现了函数复用，又能保证每个实例都有自己的属性

     1 function Supertype(name){
     2     this.name = name;
     3     this.colors = ["red","green","blue"];
     4 }
     5 ​
     6 Supertype.prototype.sayName = function(){
     7     console.log(this.name);
     8 };
     9 ​
    10 function Subtype(name,age){
    11     \\继承属性
    12     Supertype.call(this,name);
    13     this.age  = age;
    14 }
    15 ​
    16 \\继承方法
    17 Subtype.prototype = new Supertype();
    18 Subtype.prototype.constructor = Subtype;
    19 Subtype.prototype.sayAge = function(){
    20     console.log(this.age);
    21 };
    22 ​
    23 var instance1 = new Subtype('Annika',21);
    24 instance1.colors.push("black");
    25 \\["red", "green", "blue", "black"]
    26 console.log(instance1.colors); 
    27 instance1.sayName(); \\Annika
    28 instance1.sayAge();  \\21
    29 ​
    30 var instance2 = new Subtype('Anna',22);
    31 \\["red", "green", "blue"]
    32 console.log(instance2.colors);
    33 instance2.sayName();   \\Anna
    34 instance2.sayAge();    \\22

  • 缺点：无论在什么情况下，都会调用两次超类型构造函数，一次是在创建子类型原型的时候，一次是在子类型构造函数的内部

• 原型式继承

  • 基本思想：不用严格意义上的构造函数，借助原型可以根据已有的对象创建新对象，还不必因此创建自定义类型，因此最初有如下函数：

    1 function object(o){
    2     function F(){}
    3     F.prototype = o;
    4     return new F();
    5 }

    从本质上讲，object()对传入其中的对象执行了一次浅复制

     1 var person = {
     2     name:'Annika',
     3     friendes:['Alice','Joyce']
     4 };
     5 ​
     6 var anotherPerson = object(person);
     7 anotherPerson.name = 'Greg';
     8 anotherPerson.friendes.push('Rob');
     9 ​
    10 var yetAnotherPerson = object(person);
    11 yetAnotherPerson.name = 'Linda';
    12 yetAnotherPerson.friendes.push('Sophia');
    13 ​
    14 console.log(person.friends);   //['Alice','Joyce','Rob','Sophia']
    15 ​

    在这个例子中，实际上相当于创建了person的两个副本。

  • ES5新增Object.create规范了原型式继承，接收两个参数，一个用作新对象原型的对象和（可选的）一个为新对象定义额外属性的对象，在传入一个参数的情况下，Object.create()和object()行为相同。

     1 var person = {
     2     name:'Annika',
     3     friendes:['Alice','Joyce']
     4 };
     5 ​
     6 var anotherPerson = object.create(person,{
     7     name:{
     8         value:"Greg"
     9     }
    10 });
    11 ​
    12 \\用这种方法指定的任何属性都会覆盖掉原型对象上的同名属性
    13 console.log(anotherPerson.name);   \\Greg

  • 用处：创造两个相似的对象，但是包含引用类型的值的属性始终会共享响应的值

• 寄生式继承

  • 基本思想：寄生式继承是与原型式继承紧密相关的一种思路，它创造一个仅用于封装继承过程的函数，在函数内部以某种方式增强对象，最后再返回对象。

     1 function createAnother(original){
     2     \\通过调用函数创建一个新对象
     3     var clone = object(original);
     4     \\以某种方式来增强对象
     5     clone.sayHi = fuction(){
     6         alert("Hi");
     7     };
     8     \\返回这个对象
     9     return clone
    10 }

  • 这个例子中的代码基于 person 返回了一个新对象——anotherPerson。新对象不仅具有 person的所有属性和方法，而且还有自己的 sayHi()方法。

    • 新的对象中不仅具有original的所有属性和方法，而且还有自己的sayHi()方法。
    • 寄生式继承在主要考虑对象而不是自定义类型和构造函数的情况下非常有用。
    • 由于寄生式继承为对象添加函数不能做到函数复用，因此效率降低。

  • 缺点：使用寄生式继承来为对象添加函数，会因为做不到函数复用而降低效率，这个与构造函数模式类似

• 寄生组合式继承

  • 基本思想：通过借用构造函数来继承属性，通过原型链的混成形式来继承方法，不必为了指定子类型的原型而调用超类型的构造函数，只需要超类型的一个副本。本质上，就是使用寄生式继承来继承超类型的原型，然后再将结果指定给子类型的原型

    function object(o) {
         function F(){}
         F.prototype = o;
         return new F();  
    }
    1function inheritPrototype(Subtype,supertype){
    2     var prototype = object(supertype);   \\创建对象
    3     prototype.constructor = subtype;     \\增强对象
    4     subtype.prototype = prototype;       \\指定对象
    5 }

    因此，前面的例子可以改为如下的形式

     1 function Supertype(name){
     2     this.name = name;
     3     this.colors = ["red","green","blue"];
     4 }
     5 ​
     6 Supertype.prototype.sayName = function(){
     7     console.log(this.name);
     8 };
     9 ​
    10 function Subtype(name,age){
    11     \\继承属性
    12     Supertype.call(this,name);
    13     this.age  = age;
    14 }
    15 ​
    16 \\继承方法,这一句，替代了组合继承中的SubType.prototype= new SuperType()
    17 inheritPrototype(Subtype,Supertype);
    18 ​
    19 Subtype.prototype.sayAge = function(){
    20     console.log(this.age);
    21 };

  • 优点：只调用了一次supertype构造函数，因此避免在subtype.prototype上创建不必要的，多余的属性，与此同时，原型链还能保持不变，还能正常使用instanceof 和isPrototypeOf()，因此，寄生组合式继承被认为是引用类型最理想的继承范式。

  • 在inheritPrototype()函数中所做的事:

    在inheritPrototype函数中用到了原型式继承中的object()方法，将超类型的原型指定为一个临时的空构造函数的原型，并返回构造函数的实例。

    此时由于构造函数内部为空（不像SuperType里面有实例属性），所以返回的实例也不会自带实例属性，这很重要！因为后面用它作为SubType的原型时，就不会产生无用的原型属性了，借调构造函数也就不用进行所谓的“重写”了。

    然后为这个对象重新指定constructor为SubType，并将其赋值给SubType的原型。这样，就达到了将超类型构造函数的实例作为子类型原型的目的，同时没有一些从SuperType继承过来的无用原型属性。

    inheritPrototype函数接收两个参数：子类型构造函数和超类型构造函数。

    1. 创建超类型原型的副本。

    2. 为创建的副本添加constructor属性，弥补因重写原型而失去的默认的constructor属性

    3. 将新创建的对象（即副本）赋值给子类型的原型

    这种方法只调用了一次SuperType构造函数，instanceof 和isPrototypeOf()也能正常使用。

总结：

ES5的继承可以用下图来概括：

ES6继承

es6的继承主要要注意的是class的继承。

• 基本用法：Class之间通过使用extends关键字，这比通过修改原型链实现继承，要方便清晰很多

 1 class Colorpoint extends Point {
 2     constructor(x,y,color){
 3         super(x,y); //调用父类的constructor(x,y)
 4         this.color = color
 5     }
 6     toString(){
 7         //调用父类的方法
 8         return this.color + ' ' + super.toString(); 
 9     }
10 }

子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工，如果不调用super方法，子类就得不到this对象。因此，只有调用super之后，才可以使用this关键字。

• prototype 和__proto__

一个继承语句同时存在两条继承链：一条实现属性继承，一条实现方法的继承

1 class A extends B{}
2 A.__proto__ === B;  //继承属性
3 A.prototype.__proto__ == B.prototype;//继承方法

总结：

ES6的继承可以用下图来概括：

13.事件是什么？IE 与火狐的事件机制有什么区别？ 如何阻止冒泡？

• 1.事件是用户操作网页时发生的交互动作，比如 click/move， 事件除了用户触发的动作外，还可以是文档加载，窗口滚动和大小调整。事件被封装成一个 event 对象，包含了该事件发生时的所有相关信息（ event 的属性）以及可以对事件进行的操作（ event 的方法）。

• 2.事件处理机制：IE 支持事件冒泡、Firefox 同时支持两种事件模型，也就是：事件冒泡和事件捕获。

• 3.event.stopPropagation() 或者 ie 下的方法 event.cancelBubble = true;

14.三种事件模型是什么？

     事件是用户操作网页时发生的交互动作或者网页本身的一些操作，现代浏览器一共有三种事件模型。  

• 第一种事件模型是最早的 DOM0 级模型，这种模型不会传播，所以没有事件流的概念，但是现在有的浏览器支持以冒泡的方式实现，它可以在网页中直接定义监听函数，也可以通过 js 属性来指定监听函数。这种方式是所有浏览器都兼容的。
•  第二种事件模型是 IE 事件模型，在该事件模型中，一次事件共有两个过程，事件处理阶段，和事件冒泡阶段。事件处理阶段会首先执行目标元素绑定的监听事件。然后是事件冒泡阶段，冒泡指的是事件从目标元素冒泡到 document，依次检查经过的节点是否绑定了事件监听函数，如果有则执行。这种模型通过 attachEvent 来添加监听函数，可以添加多个监听函数，会按顺序依次执行。  
• 第三种是 DOM2 级事件模型，在该事件模型中，一次事件共有三个过程，第一个过程是事件捕获阶段。捕获指的是事件从 document 一直向下传播到目标元素，依次检查经过的节点是否绑定了事件监听函数，如果有则执行。后面两个阶段和 IE 事件模型的两个阶段相同。这种事件模型，事件绑定的函数是 addEventListener，其中第三个参数可以指定事件是否在捕获阶段执行。

15.事件委托是什么？

        事件委托本质上是利用了浏览器事件冒泡的机制。因为事件在冒泡过程中会上传到父节点，并且父节点可以通过事件对象获取到 目标节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件，这种方式称为事件代理。 使用事件代理我们可以不必要为每一个子元素都绑定一个监听事件，这样减少了内存上的消耗。并且使用事件代理我们还可以实现事件的动态绑定，比如说新增了一个子节点，我们并不需要单独地为它添加一个监听事件，它所发生的事件会交给父元素中的监听函数来处理。

16.IE和DOM事件流的区别

事件流：描述的是从页面中接收事件的顺序；

事件流种类：

1. 事件冒泡流(IE事件流)：事件开始时由最具体的元素(文档中嵌套最深的那个节点)接收，然后逐级向上传播到较为不具体的节点(文档) 
2. 事件捕获流(Netscape事件流)：不太具体的节点最先接收到事件，而最具体的节点应该最后接收到事件(在事件到达预定目标之前捕获到) 
3. DOM事件流：事件流包括三个阶段，事件捕获阶段，处于目标阶段，事件冒泡阶段。首先发生的是事件捕获，为截获事件提供了机会；然后是实际的目标接收事件；最后是冒泡阶段，可以在这个阶段对事件做出响应。 
   

IE和DOM事件流的区别：

1.执行顺序不一样

<body>
   <div>
     <button id = 'btn'>点击<button>
   </div>
</body>

三种事件流分别是： 

 冒泡型事件模型(IE事件流)： button->div->body 

 捕获型事件模型(Netscape事件流)： body->div->button 

DOM事件模型： body->div->button->button->div->body (先捕获后冒泡) 

2.事件侦听函数的区别：

IE使用: [Object].attachEvent("事件名称", fnHandler); //绑定函数 
[Object].detachEvent("事件名称", fnHandler); //移除绑定

DOM使用： 
[Object].addEventListener("事件名称", fnHandler, bCapture); //绑定函数 
[Object].removeEventListener("事件名称", fnHandler, bCapture); //移除绑定
bCapture参数用于设置事件绑定的阶段，true为捕获阶段，false为冒泡阶段。

添加DOM2事件绑定：

①IE8之前，使用.attachEvent("onclick",函数);
②IE8之后，使用.addEventListener("click",函数，true/false);
参数三：false（默认）表示事件冒泡，传入true表示事件捕获。
③兼容所有浏览器的处理方式：

var btn=document.getElementById("btn1");
if(btn.attachEvent){btn.attachEvent("onclick",func1);//事件，事件需要执行的函数IE8可以
}else{
btn.attachEventListener("click",func1);
}

3.DOM事件名称没有on；IE事件名称有on；

4.this的指向不同；

DOM事件可以在一个DOM元素上绑定多个事件处理器，this关键字仍然指向被绑定的DOM元素；IE下利用attachEvent注册的处理函数调用时this指向不再是先前注册事件的元素，这时的this为window对象；

17.js事件循环是什么？

单线程：

单线程就是任务是串行的，后一个任务需要等待前一个任务的执行，这就可能出现长时间的等待；但由于类似ajax网络请求、setTimeout时间延迟、DOM事件的用户交互等，这些任务并不消耗 CPU，是一种空等，资源浪费，因此出现了异步。

事件循环

       因为js是单线程的，因此在执行过程中不断的将执行上下文中的任务压入执行栈中去执行，首先进行程序中的同步任务，自上而下执行，当遇到异步任务是将其挂起放在任务队列的末尾，不会阻碍同步任务的向下执行。

       当所有同步任务执行完毕之后，会将任务队列里的微任务提取出来压入执行栈中执行，同时若遇到宏任务将其放置于宏任务队列末尾，当微任务执行完毕后，会从宏任务队列中压入一个任务进入执行栈中，同时判断宏任务中是否有微任务，再下次抽取宏任务前执行微任务队列，再进行下一次事件循环。

宏任务

script(整体代码)、setTimeout、setInterval、UI 渲染、 I/O、postMessage、 MessageChannel、setImmediate(Node.js 环境)

微任务

Promise、 MutaionObserver、process.nextTick(Node.js环境）

事件循环参考：segmentfault.com/a/119000001…；

blog.csdn.net/qq_39207948…；

事件循环练习参考：blog.csdn.net/qq_39539687…

主要参考：木易杨和神三元博客；muyiy.cn/blog/1/1.4.…

juejin.cn/post/684490…

参考：www.fly63.com/article/det…

www.cnblogs.com/annika/p/90…

www.jb51.net/article/107…

blog.csdn.net/m0_37686205…