知识点(二）

1、Js原型与原型链

 

 

 

 

 

 

 

若是试图引用对象(实例instance)的某个属性,会首先在对象内部寻找该属性,直至找不到,而后才在该对象的原型(instance.prototype)里去找这个属性.

 

__proto__ 属性是指定原型的关键

以上, 经过设置 __proto__ 属性继承了父类, 若是去掉new 操做, 直接参考以下写法

 

 

 

 

 

 

 

2、做用域与做用域链

js的做用域是靠函数来造成的，也就是说一个函数的变量在函数外不能够访问。

一、全局做用域

任何地方都能访问到的对象拥有全局做用域。

1.1函数外面定义的变量拥有全局做用域

1.2未定义直接赋值的变量自动声明为拥有全局做用域

1.3.window对象的属性拥有全局做用

二、局部做用域

局部做用域通常只在固定的代码片断内可访问到，最多见的例如函数内部，因此在一些地方会把这种做用域成为函数做用域。

图一中，a是函数内部声明并赋值，拥有局部做用域，只能带函数fn内部使用，在fn外部使用就会报错，这就是局部做用域的特性，外部没法访问。

三、ES6的块级做用域

ES5只有全局做用域和函数做用域，没有块级做用域，

做用域链

通俗地讲，当声明一个函数时，局部做用域一级一级向上包起来，就是做用域链。

1.当执行函数时，老是先从函数内部找寻局部变量

2.若是内部找不到（函数的局部做用域没有），则会向建立函数的做用域（声明函数的做用域）寻找，依次向上

闭包

提到做用域就不得不提到闭包，简单来说，闭包外部函数可以读取内部函数的变量。

优势：闭包能够造成独立的空间，永久的保存局部变量。

缺点：保存中间值的状态缺点是容易形成内存泄漏，由于闭包中的局部变量永远不会被回收

3、vue渲染原理

 

在Vue1.0里面，模板实现跟Angular相似，以下图所示，把模板直接作成在浏览器里面parse成DOM树，而后去遍历这个树，提取其中的各类绑定。

在Vue2.0中，渲染层的实现作了根本性改动，那就是引入了虚拟DOM。

从架构来说，Vue2.0 依然是写同样的模板，（Vue2.0于前段时间发布，具体报道：更轻更快的Vue.js 2.0）。在最左边，Vue2.0跟1.0的模板语法绝大部分是兼容的。Vue的编译器在编译模板以后，会把这些模板编译成一个渲染函数。而函数被调用的时候就会渲染而且返回一个虚拟DOM的树。这个树很是轻量，它的职责就是描述当前界面所应处的状态。当咱们有了这个虚拟的树以后，再交给一个patch函数，负责把这些虚拟DOM真正施加到真实的DOM上。在这个过程当中，Vue有自身的响应式系统来侦测在渲染过程当中所依赖到的数据来源。在渲染过程当中，侦测到的数据来源以后，以后就能够精确感知数据源的变更。到时候就能够根据须要从新进行渲染。当从新进行渲染以后，会生成一个新的树，将新树与旧树进行对比，就能够最终得出应施加到真实DOM上的改动。最后再经过patch函数施加改动。

这样作的主要缘由是，在浏览器当中，JavaScript的运算在现代的引擎中很是快，但DOM自己是很是缓慢的东西。当你调用原生DOM API的时候，浏览器须要在JavaScript引擎的语境下去接触原生的DOM的实现，这个过程有至关的性能损耗。因此，本质的考量是，要把耗费时间的操做尽可能放在纯粹的计算中去作，保证最后计算出来的须要实际接触真实DOM的操做是最少的。

 

4、webpack loader、合并项目

webpack自己只能打包Javascript文件，对于其余资源例如 css，图片，或者其余的语法集好比jsx，是没有办法加载的。 这就须要对应的loader将资源转化，加载进来。

翻译过来：loader就是一个export出来的function。

---

既然是 node module，因此若是你本身要自定义一个loader，彻底能够这么写：

• 配置（推荐）：在 webpack.config.js 文件中指定 loader。   
• 内联：在每一个 import 语句中显式指定 loader。
• CLI：在 shell 命令中指定它们。

 

同时在 CommonComponents 目录下建立 index.js，其内容以下：

 

exports.ComponentA = require('./ComponentA')
exports.ComponentB = require('./ComponentB')
exports.ComponentC = require('./ComponentC')

5、keep-live activity激活

是Vue的内置组件，能在组件切换过程当中将状态保留在内存中，防止重复渲染DOM。

须要在router中设置router的元信息meta：

keep-alive生命周期钩子函数：activated、deactivated

使用<keep-alive>会将数据保留在内存中，若是要在每次进入页面的时候获取最新的数据，须要在activated阶段获取数据，承担原来created钩子中获取数据的任务。

6、promise

 

基本概念
Promise是一个构造函数，因此能够 new 出一个Promise的实例
在Promise上有两个函数 resolve(成功以后的回调函数)和 reject(失败后的回调函数)
在Promise构造函数的prototype属性上，有一个 .then() 方法。因此只要是Promise构造函数建立的实例，均可以访问到 .then()方法
Promise表示一个一步操做，每当咱们new一个Promise的实例，这个实例就表明具体的异步操做。
Promise建立的实例，是一个异步操做，这个异步操做结果，只有两种结果
状态1：异步执行成功，须要在内部调用成功的回调函数resolve把结果返回给调用者
状态2：异步执行失败，须要在内部调用失败的回调函数reject把结果返回调用者
因为Promise的实例是一个异步操做，因此内部拿到操做结果后，没法使用return把操做结果返回给调用者，这个时候只能使用回调函数的形式，把成功或失败的结果，返回给调用者
咱们能够在new出来的Promise实例上，调用 .then()方法，预先为这个Promise异步操做，指定成功(resolve)和失败(reject)回调函数

Promise中异常捕获两种方式的使用场景

需求 ：前面的Promise执行失败，可是不要影响后续promise正常执行。

• 此时能够单独为每一个promise经过.then()指定一下失败的回调

 

7、闭包

闭包就是指有权访问另外一个函数做用域中的变量的函数。

建立闭包最多见方式，就是在一个函数内部建立另外一个函数。

闭包只能取得包含函数中的任何变量的最后一个值

内存泄漏：闭包会引用包含函数的整个变量对象，若是闭包的做用域链中保存着一个HTML元素，那么就意味着该元素没法被销毁。因此咱们有必要在对这个元素操做完以后主动销毁。

8、flex

display:flex;
flex-direction:row;
justify-content:space-between;

 9、router

一、mode:history hash

二、this.$router.push({path: '/transport/dispatch', query: {paicheNo: obj.paicheNo})   

     this.$router.push({name: 'dispatch', params: {paicheNo: obj.paicheNo}})

10、父子组件通讯

父组件向子组件传值

在Child.vue中建立props，用于接收父组件传递的值

子组件向父组件传值

在事件的函数中使用$emit来触发一个自定义事件，并传递一个参数，这个参数就是子组件要传递给父组件的值