前端知识总结 js篇_前端js知识点总结

1.js运行机制

setTimeout(function(){
    console.log('1')
});
new Promise(function(resolve){
    console.log('2');
    resolve();
}).then(function(){
    console.log('3')
});
console.log('4');
new Promise(function(resolve){
    console.log('5');
    resolve();
}).then(function(){
    console.log('6')
});
setTimeout(function(){
    console.log('7')
});
function bar(){
    console.log('8')
    foo()
}
function foo(){
    console.log('9')
}
console.log('10')
bar()
 
首先浏览器执行Js代码由上至下顺序，遇到setTimeout，把setTimeout分发到宏任务Event Queue中
new Promise属于主线程任务直接执行打印2
Promis下的then方法属于微任务，把then分到微任务 Event Queue中
console.log(‘4’)属于主线程任务，直接执行打印4
又遇到new Promise也是直接执行打印5，Promise 下到then分发到微任务Event Queue中
又遇到setTimouse也是直接分发到宏任务Event Queue中，等待执行
console.log(‘10’)属于主线程任务直接执行
遇到bar()函数调用，执行构造函数内到代码，打印8，在bar函数中调用foo函数，执行foo函数到中代码，打印9
主线程中任务执行完后，就要执行分发到微任务Event Queue中代码，实行先进先出，所以依次打印3，6
微任务Event Queue中代码执行完，就执行宏任务Event Queue中代码，也是先进先出，依次打印1，7。
最终结果：2，4，5，10，8，9，3，6，1，7

 你是否觉得同步异步的执行机制流程就是JavaScript执行机制的全部？不是的，JavaScript除了广义上的的同步任务何异步任务，其对任务还有更精细的定义：
　　　　macro-task(宏任务)：包括整体代码script，setTimeout，setInterval
　　　　micro-task(微任务)：Promise，process.nextTick
不同类型的任务会进入对应的Event Queue。
事件循环的顺序，决定js代码的执行顺序。进入整体代码(宏任务)后，开始第一次循环。接着执行所有的微任务。然后再次从宏任务开始，找到其中一个任务队列执行完毕，再执行所有的微任务。

1、JS为什么是单线程的？

 　　JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。那么，为什么JavaScript不能有多个线程呢？这样能提高效率啊。
　　JavaScript的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？

所以，为了避免复杂性，从一诞生，JavaScript就是单线程，这已经成了这门语言的核心特征，将来也不会改变。

 4.2、JS为什么需要异步?

 　　如果JS中不存在异步，只能自上而下执行，如果上一行解析时间很长，那么下面的代码就会被阻塞。 对于用户而言，阻塞就意味着"卡死"，这样就导致了很差的用户体验。

 4.3、JS单线程又是如何实现异步的呢？

 　　既然JS是单线程的，只能在一条线程上执行，又是如何实现的异步呢？
　　是通过的事件循环(event loop)，理解了event loop机制，就理解了JS的执行机制。

2   JS面向对象编程之：封装、继承、多态

  一、封装

      （1）封装通俗的说，就是我有一些秘密不想让人知道，就通过私有化变量和私有化方法，这样外界就访问不到了。然后如果你有一些很想让大家知道的东西，你就可以通过this创建的属性看作是对象共有属性和对象共有方法，这样别人知道你的公共的东西啦，不止如此，你还可以访问到类或对象自身的私有属性和私有方法。哇，这种权利好大呀，外面的公共的方法和属性，和内部的私有属性和方法都可以访问到，都有特权啦，因此就叫做特权方法了。看个例子就知道啦

类的内部this上定义的属性和方法自然就可以复制到新创建的对象上，成为对象公有化的属性和方法，又可以访问私有属性和私有方法，因此就叫特权方法。这样调用就可以啦​​​​​​​​​​​​​​

（2）闭包实现的封装

　　闭包是有权访问另外一个函数作用域中变量的函数，即在一个函数内部创建另外一个函数。这时就可以将闭包作为创建对象的构造函数，这样它既是闭包又是可实例对象的函数。​​​​​​​

 二、继承

　（1）类

　　 每个类有3个部分：1,是构造函数内的，是供实例化对象复制用的。2,是构造函数外的，直接通过点语法添加的，这是供类使用的，实例化对象是访问不到的。3,是类的原型中的，实例化对象可以通过其原型链简介地访问到，也是为供所有实例化对象所共有的。

     （2）类式继承

     通过子类的原型prototype对象实例化来实现的​​​​​​​

 继承就是声明2个类，不过类式继承需要将第一个类的实例赋值给第二个类的原型。这段代码，在实现subClass继承superClass时是通过将superClass的实例赋值给subClass的原型prototype,所以subClass.prototype继承了superClass.

缺点就是：一个子类的实例原型从父类构造函数中继承来的共有属性就会直接影响到其他子类。比如：

额外知识点：instanceof是通过对象的prototype链来确定这个对象是否是某个类的实例，而不关心对象与类的自身结构。

（3）构造函数式继承

       构造函数式继承是通过在子类的构造函数作用环境中执行一次父类的构造函数来实现的。

​​​​​​​

SuperClass.call(this,id);是构造函数式继承的精华，call可以更改函数的作用环境。这个对SuperClass调用这个方法就是将子类中的变量子啊父类中执行一遍，由于父类中是给this绑定属性的，因此子类自然也就继承了父类的共有属性。由于这种类型的继承没有涉及原型prototype,所以父类的原型方法自然不会被子类继承，而如果要想被子类继承就必须要放在构造函数中。

（4）组合继承

    组合继承就是：类式继承+构造函数继承​​​​​​​

这里用例子来测试下 

​​​​​​​ 果然子类的实例中更改父类继承下来的引用类型属性如books,根本不会影响到其他实例，并且子类实例化过程中又能将参数传递到父类的构造函数中。​​​​​​​

（5）原型式继承

原型式继承跟类式继承一样，父类对象book中的值类型的属性被复制，引用类型的属性被共有。

（6）寄生式继承

      通过在一个函数内的过渡对象实现继承并返回新对象的方式，称之为寄生式继承。

 寄生就像寄生虫一样寄托于某个对象内部生长。就是对原型继承的第二次封装，并且在这第二次封装过程中对继承的对象进行了扩展，这样新创建的对象不仅仅有父类中的属性和方法而且还添加了新的属性和方法。

看下下面的例子吧

​​​​​​​​​​​​​​​​​​​​​

设计原则

单一职责原则（SRP）

一个对象或方法只做一件事情。如果一个方法承担了过多的职责，那么在需求的变迁过程中，需要改写这个方法的可能性就越大。

应该把对象或方法划分成较小的粒度。

最少知识原则（LKP）

一个软件实体应当 尽可能少地与其他实体发生相互作用

应当尽量减少对象之间的交互。如果两个对象之间不必彼此直接通信，那么这两个对象就不要发生直接的 相互联系，可以转交给第三方进行处理

开放-封闭原则（OCP）

软件实体（类、模块、函数）等应该是可以 扩展的，但是不可修改

当需要改变一个程序的功能或者给这个程序增加新功能的时候，可以使用增加代码的方式，尽量避免改动程序的源代码，防止影响原系统的稳定
设计模式

职责链模式：避免请求发送者与接收者耦合在一起，让多个对象都有可能接收请求，将这些对象连接成一条链，并且沿着这条链传递请求，直到有对象处理它为止。

主要解决：职责链上的处理者负责处理请求，客户只需要将请求发送到职责链上即可，无须关心请求的处理细节和请求的传递，所以职责链将请求的发送者和请求的处理者解耦了。

　　假设负责一个售卖手机的电商网站，经过分别交纳500元定金和200元定金的两轮预定后（订单已在此时生成），现在已经到了正式购买的阶段。公司针对支付过定金的用户有一定的优惠政策。在正式购买后，已经支付过500元定金的用户会收到100元的商城优惠券，200元定金的用户可以收到50元的优惠券，而之前没有支付定金的用户只能进入普通购买模式，也就是没有优惠券，且在库存有限的情况下不一定保证能买到

var order500 = function( orderType, pay, stock ){
    if ( orderType === 1 && pay === true ){
        console.log( '500 元定金预购，得到100 优惠券' );
    }else{
        return 'nextSuccessor'; // 我不知道下一个节点是谁，反正把请求往后面传递
    }
};
 
var order200 = function( orderType, pay, stock ){
    if ( orderType === 2 && pay === true ){
        console.log( '200 元定金预购，得到50 优惠券' );
    }else{
        return 'nextSuccessor'; // 我不知道下一个节点是谁，反正把请求往后面传递
    }
};
 
var orderNormal = function( orderType, pay, stock ){
    if ( stock > 0 ){
        console.log( '普通购买，无优惠券' );
    }else{
        console.log( '手机库存不足' );
    }
};
　　接下来需要把函数包装进职责链节点，定义一个构造函数Chain，在new Chain的时候传递的参数即为需要被包装的函数，同时它还拥有一个实例属性this.successor，表示在链中的下一个节点。此外Chain的prototype中还有两个函数，它们的作用如下所示：
 
var Chain = function( fn ){
    this.fn = fn;
    this.successor = null;
};
 
Chain.prototype.setNextSuccessor = function( successor ){
    return this.successor = successor;
};
 
Chain.prototype.passRequest = function(){
 
    var ret = this.fn.apply( this, arguments );
    if ( ret === 'nextSuccessor' ){
        return this.successor && this.successor.passRequest.apply( this.successor, arguments );
    }
    return ret;
};
现在把3个订单函数分别包装成职责链的节点：
 
var chainOrder500 = new Chain( order500 );
var chainOrder200 = new Chain( order200 );
var chainOrderNormal = new Chain( orderNormal );
　然后指定节点在职责链中的顺序：
 
chainOrder500.setNextSuccessor( chainOrder200 );
chainOrder200.setNextSuccessor( chainOrderNormal );
　　最后把请求传递给第一个节点：
 
chainOrder500.passRequest( 1, true, 500 ); // 输出：500 元定金预购，得到100 优惠券
chainOrder500.passRequest( 2, true, 500 ); // 输出：200 元定金预购，得到50 优惠券
chainOrder500.passRequest( 3, true, 500 ); // 输出：普通购买，无优惠券
chainOrder500.passRequest( 1, false, 0 ); // 输出：手机库存不足
　　通过改进，可以自由灵活地增加、移除和修改链中的节点顺序，假如某天网站运营人员又想出了支持300元定金购买，那就在该链中增加一个节点即可：

工厂模式：

优点： 1、一个调用者想创建一个对象，只要知道其名称就可以了。 2、扩展性高，如果想增加一个产品，只要扩展一个工厂类就可以。 3、屏蔽产品的具体实现，调用者只关心产品的接口。

缺点：每次增加一个产品时，都需要增加一个具体类和对象实现工厂，使得系统中类的个数成倍增加，在一定程度上增加了系统的复杂度，同时也增加了系统具体类的依赖。这并不是什么好事

工厂模式大体分为三类：简单工厂模式、工厂方法模式、抽象工厂模式。下面就分别对这三类工厂模式一一举例解析。

1.简单工厂模式

简单工厂模式是由一个工厂对象来创建某一类产品的实例。

比如说，我来到一家书店买书，我要买编程类的书，分别是“JS高级编程，第三版，2013年出版”、“CSS世界，第一版，2017年出版”、“VUE权威指南，第一版，2018年出版”，我不用自己去找这些书，而是口头告诉给店员，让他帮我找，并且告诉我价格。

这时，店员就是这个工厂对象，而返回给我的书的信息以及价格则是这个产品的实例。拿起键盘开始实现：

function bookShop (name, year, vs) {
  var book = new Object();
  book.name = name;
  book.year = year;
  book.vs = vs;
  book.price = '暂无标价';
  if (name === 'JS高级编程') {
    book.price = '79';
  }
  if (name === 'css世界') {
    book.price = '69';
  }
  if (name === 'VUE权威指南') {
    book.price = '89';
  }
  return book;
}
var book1 = bookShop('JS高级编程', '2013', '第三版');
var book2 = bookShop('ES6入门教程', '2017', '第六版');
var book3 = bookShop('css世界', '2015', '第一版');
console.log(book1)
console.log(book2)
console.log(book3)

2、工厂方法模式

2.工厂方法:

工厂方法模式本意是将实际创造的对象推迟到子类中,这样核心类就变成了抽象类。但是在js中很难像那些传统面向对象语言那样去实现抽象类,所以在js中我们只需要参考他的思想即可。

我们可以把工厂函数看成是一个工厂类。在简单模式我们,我们添加一个新的对象需要修改二处地方,在加入工厂方法模式以后,我们只需要修改一处即可。工厂方法的工厂类,他只做实例化这一件事情。我们只需要修改他的原型类即可。我们采用安全模式创建工厂对象。

let factory = function (role) {
    if(this instanceof factory) {
        var s = new this[role]();
        return s;
    } else {
        return new factory(role);
    }
}
 
factory.prototype = {
    admin: function() {
        this.name = '平台用户';
        this.role = ['登录页', '主页']
 
    },
    common: function() {
        this.name = '游客';
        this.role = ['登录页']
    },
    test: function() {
        this.name = '测试';
        this.role =  ['登录页', '主页', '测试页'];
        this.test = '我还有一个测试属性哦'
    }
}
 
let admin = new factory('admin');
let common = new factory('common');
let test = new factory('test');