原文链接：https://medium.com/better-programming/hoisting-in-javascript-6af97650dbb2

如果你是萌新，”变量提升”在JavaScript是一个难以理解的知识点。它几乎困惑了所有人。不要担心，我将会帮助你理解在JavaScript中”变量提升”工作机制。

什么是变量提升？

“变量提升”是移动所有定义到当前作用域顶部的JavaScript默认行为。

JavaScript没有提升以下项目：

• 1.用表达式定义的函数
• 2.用let或者const定义的变量和常量
• 3.箭头函数

在JavaScript中，一个变量可以被使用在它被定义之前。

1
2
3

x = 5;
console.log(x * 2); // Prints 10 in the console
var x;

好的…，但这是什么意思？我没有理解你要说的。

让我来通过几个新例子帮助你理解

1
2
3
4
5
6
7
8
9
10
11
12

// Example 1

function foo(){
    function bar() {
        return 7;
    }
    return bar();
    function bar() {
        return 11;
    }
}
console.log(foo()); // Prints 11

当一个函数定义被提升的时候整个函数体将被提升。因此解释完成第一个示例代码之后，它更像这样运行：

1
2
3
4
5
6
7
8
9
10
11
12
13

unction foo(){
    //define bar once
    function bar() {
        return 7;
    }
    //redefine it
    function bar() {
        return 11;
    }
    //return its invocation
    return bar();
}
console.log(foo());

But… isn’t the code after a return statement unreachable?(这句有点看不懂)

在JavaScript执行中，有上下文( ECMA 5 分为词法环境，变量环境，和绑定this指针)和进程(一组按顺序调用的语句)。当进入执行作用域时，定义贡献变量环境。它与语句不同的是它不受进程规则的限制。

让我们再看一个例子，这次是一个函数表达式。

1
2
3
4
5
6
7
8
9
10
11
12

// Example 2

function foo(){
    var bar = function() {
        return 7;
    };
    return bar();
    var bar = function() {
        return 11;
    };
}
console.log(foo()); // Prints 7

注意到当变量被创建时初始化是undefined。具有”初始值”的变量实在执行时分配表达式的值，而不是变量被创建的时候。

1
2
3

var myFunction = function () {
   // some executable code
}

在上面的代码片段中，左边的var myFunction是一个变量声明定义。

变量声明得到提升，但是他的分配表达式没有提升。所以，当myFunction被提升的时候，解释器初始化设置var myFunction = undefined。函数定义没有提升。

记住上面所有的知识点，然后让我们来看下例2如何工作的。

它运行就像这样：

1
2
3
4
5
6
7
8
9
10

function foo(){
    var bar = undefined; // declaration for first function expression
    var bar = undefined; // declaration for second function expression
    //first function expression is executed
    bar = function() {
        return 7;
    };
    return bar(); // function created by first function expression is invoked
}
console.log(foo()); // Prints 7

在调用第一个函数表达式后，第二个函数表达式无法访问。

在顶部声明你的变量以免混乱

变量提升非常有趣但它可能会导致bug，因为十分容易被忽略。

你可以使用严格模式，在顶部使用use strict指令。JavaScript严格模式下不允许使用还没有定义的变量。

什么是“函数柯里化”

curry 的概念:只传递给函数一部分参数来调用它，让它返回一个函数去处理剩下的参数

先看一个简单例子，add函数接受 2 个参数（或者多个），addX函数接受 1 个参数。
换而言之，所谓”柯里化”，就是把一个多参数的函数，转化为单参数函数。将一个函数转换为一个新的函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// 非柯里化
function add(x, y) {
    return x + y;
}

add(1, 2) === 3; // true

// 柯里化
function addX(y) {
    return function(x) {
        return x + y;
    };
}

addX(2)(1) == 3; // true

概述

IndexedDB 是一个事务型数据库系统，类似于基于 SQL 的 RDBMS。 然而不同的是它使用固定列表，IndexedDB 是一个基于 JavaScript 的面向对象的数据库。

现有的浏览器数据储存方案，都不适合储存大量数据：Cookie 的大小不超过 4KB，且每次请求都会发送回服务器 LocalStorage 在 2.5MB 到 10MB 之间（各家浏览器不同），而且不提供搜索功能，不能建立自定义的索引。所以，需要一种新的解决方案，这就是 IndexedDB 诞生的背景

简单来说，IndexedDB 就是浏览器提供的本地数据库。

IndexedDB 具有以下特点

• 键值对储存
• 异步操作（避免锁死浏览器）
• 支持事务
• 同源限制（协议+域名+端口）
• 存储空间大
• 支持二进制存储（ArrayBuffer 对象和 Blob 对象，可存储文件数据）

简介

为自己了解webpack的过程做一个总结，也希望对想要了解的小伙伴有所帮助。

准备工作

既然是学习了解webpack，那我假定你了解npm和node.js了。

核心概念

先对核心概念有个大概的了解，不理解也没关系，看完后面的例子应该会有一定的认识。

• Entry：入口，Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。
• Module：模块，在 Webpack 里一切皆模块，一个模块对应着一个文件。Webpack 会从配置的 Entry 开- 始递归找出所有依赖的模块。
• Chunk：代码块，一个 Chunk 由多个模块组合而成，用于代码合并与分割。
• Loader：模块转换器，用于把模块原内容按照需求转换成新内容。
• Plugin：扩展插件，在 Webpack 构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要的事情。
• Output：输出结果，在 Webpack 经过一系列处理并得出最终想要的代码后输出结果。

前言

本文主要总结了自己 vue 实际开发项目当中遇到的一些常见问题以及解决方案

前言

在开发过程中，我们总有类似于下面的需求

• 页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送。
• 又或者整个内容占满一页，页脚块粘贴在视窗底部，上面内容可滑动（一般出现在移动端）

1px问题产生的原因

从移动端的角度说个具体的场景，以iphone6为例。

iphone6的屏幕宽度为375px，设计师做的视觉稿一般是750px，也就是2x，这个时候设计师在视觉稿上画了1px的边框，于是你就写了“border-width:1px”，so…1px边框问题产生了。

对设计师来说它的1px是相对于750px的（物理像素），对你来说你的1px是相对于375px的（css像素）“实际上你应该是border-width:0.5px”。

let与const

let也是用来声明变量的关键字，与var的区别是

• 代码块内有效
• 不存在变量提升
• 不允许重复声明

代码块里有效

1
2
3
4
5
6
7

{
  let a = 10;
  var b = 1;
}

a // ReferenceError: a is not defined.
b // 1

不存在变量提升

1
2
3
4
5
6
7

// var 的情况
console.log(foo); // 输出undefined
var foo = 2;

// let 的情况
console.log(bar); // 报错ReferenceError
let bar = 2;

不允许重复声明

1
2
3
4
5
6
7
8
9
10
11

// 报错
function func() {
  let a = 10;
  var a = 1;
}

// 报错
function func() {
  let a = 10;
  let a = 1;
}

const用来声明常量

前言

vux文档的确很好。。。，但是有些细节部分不是那么清晰，希望此文对你有所帮助

什么是vw/vh?

CSS3引入的视口单位(了解视口可以参考web移动端适配中的视口介绍)

• vw = view width
• vh = view height

简而言之1vw = 视口宽度的1%，1vh = 视口高度的1%。