前端361

class定义类是es6提供的新的api，比较直观，class类继承也有着一定的规律性，在egg, webpack等库的源码中有着很多的应用场景。结合一些初学者可能遇到的难点，本文主要对其链式继承进行总结，关于super关键字的使用请参考我的其他文章es6中super关键字的理解。class定义class App { constructor(options){ s...

javaScript中实例，类，原型等是js语言的核心概念，在充分理解并掌握的情况下，才能在编程中得心应手。近期进行知识归类总结，对js中的实例，类，类的原型，实例的原型，类的prototype，实例的prototype进行一个总结。核心概念：prototype指的是原型对象， __proto__指的是原型看一个简单的例子：class a{ constructor(optio...

decorator作为一个提案，经过了多次修改，还未正式发布，不过在实际编程过程中，装饰器已经有了很多的应用。装饰器很受欢迎的主要原因是其借鉴了java中注解的概念，让代码结构性和可读性大大增强。装饰器的意义：更好地解释类的相关属性和概念，将不同的功能归类区分，便于维护和扩展。demo:@Component({ tag: 'my-component', styleUrl: '...

babel作为当前源码编译的重要工具，有着很重要的地位。babel编译的核心流程是，先把代码解析为AST语法树，再遍历AST语法树并执行操作，最后根据规则生成代码。流程不复杂，复杂的是如何操作AST语法树，以及如何编写babel的插件。网上有很多帖子在讲如何编写babel插件，但是讲的都比较浅显，看过之后并不能真正意义上去编写babel插件。在实际的项目中，我们需要的插件不仅仅是替换字符串或者...

不需要对外操作和访问的属性使用Symbol来定义使用JSON.stringify()将对象转换成JSON字符串的时候，Symbol属性也会被排除在输出内容之外所以：场景一：利用这一特点来更好的设计我们的数据对象，让“对内操作”和“对外选择性输出”变得更加优雅。Object.getOwnPropertySymbols(obj) // [Symbol(name)]// 使用...

箭头函数的诞生使得js编程在一定程度上得到了简化，代码简洁明了。箭头函数实现了this作用域上和函数外部保持一致，但是在箭头函数简写上有时是相对抽象的。对于一般简写：name => `my name is ${name}`这种可以理解为参数name经过函数后变为my name is name。是相对比较好理解的。还有一种比较复杂的简写，链式调用const chain...

基本语法：let fn = new Function(...arg, content);arg是行数fn的参数content是fn的内容体，即函数运行主体实例：let str = 'return ' + '`Hello ${name}!`';let func = new Function('name', str);func('Jack') // "Hello Jack!"...

async作为generator的一个语法糖，await作为then命令的语法糖，是的异步操作变得很简洁，然了解其执行逻辑和原理对于一个高级前端来讲是必要的。执行逻辑：1，async内部没有异步操作，此时返回未定义的Promise，返回值为undefined,但会等代码执行完2，async内部有异步操作和同步操作混合，返回new Promise， 但是then没有data3...

es6提供了一个全新的api----reflectl，reflect和proxy是相对的，我们可以用reflect操作对象。reflect存在的意义：1，将object对象一些内部的方法，放到Reflect对象上。比如：object.defineProperty说明：现阶段这些方法存在于object和Reflect对象上，未来只存在于Reflect对象上。意义：也就是说，从Refl...

promise/A+规范内容：1，不管进行什么操作，都返回一个Promise对象，类似于jquery的链式操作；2，一个 Promise 的当前状态必须为以下三种状态中的一种：等待态（Pending）、执行态（Fulfilled）和拒绝态（Rejected）。等待态（Pending）处于等待态时，promise 需满足以下条件：可以迁移至执行态或拒绝态执行态（Fulfil...

AST语法树 结构：AST语法树每一层都拥有相同的结构，这样的每一层结构也被叫做节点（Node）。一个 AST 可以由单一的节点或是成百上千个节点构成。 它们组合在一起可以描述用于静态分析的程序语法。单层AST节点示例：{ type: "BinaryExpression", operator: ..., left: {...}, right: {...}}...

在前端开发工程中，实现项目自动化和工程化越来越重要，而每次搭建前端项目的时候，很多文件都源自复制粘贴，这是一些重复的工作。虽然现在已经有了很多大的脚手架生成工具，像create-react-app, vue-cli，但是这些工具生成的脚手架可能和我们的业务场景相差较远，生成过后还需要手动更改，也是比较麻烦的，另外，对于自己封装的脚手架可以加入定制的东西，对于开发团队而言，扩展性较强。前端脚手架...

   generator生成器的设计原理：状态机，简化函数内部状态存储； 半协程实现 上下文冻结应用场景：异步操作的同步化表达 控制流管理 部署 Iterator 接口 作为数据结构首先介绍几个概念：coroutine美: [kəru'tin] n.联立程序；协同程序function* asyncJob() { //协程的简单实现 // ...其他...

es6新增了一种定义对象实例的方法，使用class关键字定义类，与class相关的知识点也逐步火热起来，但是部分理解起来相对抽象，简单对class相关的知识点进行总结，更好的使用class。对于基本概念，请参见阮一峰老师的es6入门教程。本文主要总结class静态相关。关于类有两个概念，1，类自身,；2，类的实例对象总的来说：静态的是指向类自身，而不是指向实例对象，主要是归属不同，这是静态...

有时候想写出只能被继承使用的类，这时候就要用到new.target1含义：new.target返回使用new方法调用类时的类的名称，子类继承父类时，new.target会返回子类class Rectangle { constructor(length, width) { console.log(new.target === Rectangle); // ... ...

学习一种新的数据结构，一般从三方面切入；第一：数据结构的结构类型第二：数据结构的定义方法第三：数据结构的操作方法和属性—————————————————————————————————————————————————————以下从以上几个方面解析下set数据结构：1，set结构类型：类似于数组；成员都是唯一的；是一个构造函数2，set数据结构定义方法        ...

 学习一种新的数据结构，一般从三方面切入；第一：数据结构的结构类型第二：数据结构的定义方法第三：数据结构的操作方法和属性—————————————————————————————————————————————————————传统局限性：JavaScript 的对象（Object），本质上是键值对的集合（Hash 结构），但是传统上只能用字符串当作键。这给它的使用带来了...

combineReducers简单封装const combineReducers = reducers => { return (state = {}, action) => { return Object.keys(reducers).reduce( (nextState, key) => { nextState[key] = re...

复杂逻辑判断时需要写很多if/else，代码可读性较差，可以用es6新增的Map来简化代码列举六种实例，逐步简化/** * 按钮点击事件 * @param {number} status 活动状态：1 开团进行中 2 开团失败 3 商品售罄 4 开团成功 5 系统取消 */const onButtonClick = (status) => { if (stat...

随着前端技术的发展，数据驱动视图的框架设计理念越来越火，而说到数据，就不得不探讨浅拷贝和深拷贝。学习目的：1，什么是深拷贝2，什么是浅拷贝3，深拷贝和浅拷贝的本质区别4，深拷贝的方法和使用场景5，浅拷贝的方法和使用场景6，怎么比较层次较深的对象是否相等（发生改变）接下来逐个探讨：1，深拷贝：1，是指拷贝一个对象时，不仅仅把对象的引用进行复制，还把该对象引用...

proxy和reflect都是es6为了更好的操作对象而提供的新的API，接下来探讨一下二者的作用，联系。设计proxy，reflect的作用：proxy的作用：Proxy的设计目的在于（修改编程语言），修改某些操作方法的默认行为，等同于在语言层面作出修改，是元编程（meta programming）  例如修改set，get方法reflect的作用：1，映射一些明显属于对...

Mixin是mix in的缩写，掌握这一点很重要。mix 英 [mɪks]   vi&vt 混合，调配  mix in : 把......混入设计理念：在这里mix in是指 把多个对象混入到一个对象之中，即合成一个对象，合成之后的新对象具有各个组成成员的接口；mix模式实现：function mix(...mixins){ class Mix{} for (...

介绍Iterator之前先列举下js的表示数据集合结构的几种方式：在es6之前有 Array , Object, es6新增了 map, set，当然用户也可以组合使用这几种数据结构，灵活存储数据。但是当数据结构变得复杂后，怎样取到里面的数据就也相对复杂，这就需要有一种读取数据的统一的接口机制，来处理不同的数据结构。遍历器就是这样一种接口机制，Iterator是一种接口，为不同数据结构...

前面介绍了static关键字，class类还有另外一个关键字supersuper不仅仅是一个关键字，还可以作为函数和对象。函数：在子类继承父类中，super作为函数调用，只能写在子类的构造函数（constructor）里面，super代表的是父类的构造函数，难点理解但是执行过时supre()代表的是子类，super()里面的this指向子类的实例对象this。class A ...