1. var

（1）var声明作用域

使用var操作符定义的变量会成为包含它的函数的局部变量，换句话说var声明的变量的作用域是它当前的执行上下文及其闭包

局部变量说明：在函数调用完之后会被销毁

1
2
3
4
5

function test() {
	var message = 'hi';   // message是test函数的局部变量
}
test(); 
console.log(message);  //  报错

（2）var声明提升

var声明的变量会自动提升到作用域顶部

1
2

console.log(message); // undefined
var message = 'hi';

2. let

（1）块级作用域

let声明的范围是块级作用域，var声明的范围是函数作用域

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

if (true) {
	var name = 'Matt';
	console.log(name);   // Matt
};
console.log(name);  // Matt


if (true) {
	let age = 26;
	console.log(age);  // 26
};
console.log(age); // ReferenceError: age没有定义

（2）不允许重复声明

let不允许在同一个块作用域中出现冗余声明，注意是同一块级作用域！

1
2
3
4
5

var name;
var name;

let age;
let age;  // SyntaxError: 标识符age已经声明过了

（3）暂时性死区

let声明的变量不会在作用域中提升

暂时性死区：在let声明之前不允许任何方式来引用未声明变量，会抛出错误ReferenceError

1
2
3
4
5
6
7

// name会被提升
console.log(name);   // undefined
var name = 'Matt';  

// age不会被提升
console.log(age);   // ReferenceError:age没有定义
let age = 16;

（4）全局声明

let声明的变量不会成为window对象的属性，而var会

1
2
3
4
5

var name = 'Matt';
console.log(windew.name);   // Matt 

var age = 16;
console.log(window.age);   // undefined

3. const

const具有let的以上行为

（1）声明即初始化

const声明变量时必须同时初始化

（2）声明后不允许改变

const声明后为常量，不允许改变

const声明的限制只适用于它指向的变量的引用

1
2

const person = {};
person.name = 'Jack';  // 不会报错！

4. 面试题

（1）for循环中的let声明

• 循环泄漏问题

  1 2 3 4 5 6 7 8 9 10

  for (var i = 0; i<5; i++) { // 循环逻辑 }; console.log(i); // 5 for (let i = 0; i<5; i++) { // 循环逻辑 }; console.log(i); // i is undefined

• 迭代变量的奇特声明和修改

  1 2 3 4 5 6 7 8 9

  for (var i = 0; i < 5; i++) { setTimeout(() => console.log(i), 0); }; // 5 5 5 5 5 for (let i = 0; i < 5; i++) { setTimeout(() => console.log(i), 0); }; // 0 1 2 3 4

for…of..

for…of用于遍历可迭代对象的元素，在可迭代对象上创建一个迭代循环，调用自定义迭代钩子的next()方法来遍历元素，是有序遍历

for…in..

for…in用于枚举对象中的属性（包括原型链上的可枚举属性），是无序遍历

面试题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

let o = {
	name: 'Katrina',
	age: 18,
};

Object.prototype.gender = 'female';

for (let key in o) {
    console.log(key);   // name age gender
};

// 根据打印结果可以看到 for...in枚举原型链上的属性，那么如何改进呢？使用hasOwnProperty
let o = {
	name: 'Katrina',
	age: 18,
};

Object.prototype.gender = 'female';
for (let key in o) {
    if (o.hasOwnProperty(key)) {
        console.log(key)   // name age
    }
};

回顾

• 每一个函数都是Function类型的实例，Function有属性和方法

• 函数是对象，函数名就是指向函数对象的指针

• 所有函数对象都会暴露一个只读的name属性，其中包含关于函数的信息

  • 情况一：正常情况 => 标识符，或者字符串化的变量名
  • 情况二：函数没有名称 => 空字符串
  • 情况三：构造函数创建 => anonymous
  • 情况四：如果函数是set get 函数或者使用bind实例化 => 前缀 + 函数名

  1 2 3 4 5 6 7 8 9 10

  function foo() {}; let bar = function() {}; let baz = () => {}; console.log(foo.name); // foo console.log(bar.name); // bar console.log(baz.name); // baz console.log((() => {}).name); // (空字符串) console.log((new Function()).name); // anonymous console.log(foo.bind(null).name); // bind foo

函数名是函数指针

注意：使用不带括号的函数名会访问函数指针，而不会执行函数

1
2
3
4
5
6
7
8
9
10
11

function sum(num1, num2) {
	return num1 + num2;
}

console.log(sum(10, 10));   // 20

let anotherSum = sum;   // #1
console.log(anotherSum(10, 10));   //  20

sum = null;  // #2
console.log(anotherSum(10, 10));   //  20

以上过程可抽象为下图：

Step1：将sum赋值给anotherSum的时候其实是相当于把指针赋值给anotherSum，于是anotherSum也指向求和函数

Step2：将sum的指针指向null，这并没有改变anotherSum的指针指向，所以并不会影响anotherSum执行

没有重载

重载函数：允许在同一范围中声明几个功能类似的同名函数，但是同名函数的签名不同，比如形参类型不同，数量不同等。

如果在JS中定义两个同名函数会发生什么情况？

1
2
3
4
5
6
7
8
9

function add(num) {
	return num += 100;
}

function add(num) {
	return num+=200
}

console.log(add(100)); // 300

从打印结果来看，前一个add被后一个add给覆盖了

其实理解了”函数名是函数指针“之后，很容易能够抽象出下图：

当然，函数表达式也是一样的情况，这里不再赘述。

这部分有一句很重要但是比较难理解的话：

ECMAScript 中所有函数的参数都是按值传递的

一看很懵，红宝书紧接着就做出了解释：

这意味着函数外的值会被复制到函数内部的参数中，就像从一个变量复制到另一个变量一样

如果是原始值，那么就跟原始值变量的复制一样，如果是引用值，那么就跟引用值变量的复制一样

大概理解了，但是还是云里雾里，那么我们首先要清楚，按值传递和按引用传递参数会造成什么样的结果？

按值传递参数：值会被复制到一个局部变量（可以理解为arguments的一个槽位【补充：agruments是一个类数组对象，包含调用函数时传入的所有参数】）

按引用传递参数：在按引用传递参数时，值在内存中的位置会被保存在一个局部变量，这意味着对本地变量的修改会反映到函数外部（在ECMAScript中显得不科学）

• 看一下这个例子：

1
2
3
4
5
6
7
8
9

function addTen(num) {
    num += 10;
    return num;
};

let count = 10;
let res = addTen(count);
console.log(count); // 10  没有变化
console.log(res);  // 20

原始值的例子很容易理解，num是一个局部变量，在调用时，count作为参数传入，被复制到num一边在addTen内部使用

在函数内部，参数num的值被加上了10，但这不会影响函数外部的原始变量count，参数num 和变量count 互不干扰，如果num 是按引用传递的，那么count 的值也会被修改为20

• 再看一下一个引用数据类型的例子：（比较不容易理解）

1
2
3
4
5
6
7
8
9
10

function setName(obj) {
	obj.name = 'Jenny';    // 修改传入obj的name属性的值
};

let person = {
    name: 'Katrina',
};

setName(person);   // 调用函数
console.log(person);  // {name: 'Jenny'}

这次创建了一个对象并保存在person中，然后这个对象被传给setName方法，并且复制给obj

在函数内部，obj和person是指向同一个对象的，这样就会导致，即使对象是按值传进函数的，obj也会通过引用访问对象，这样的话，当函数内部修改了obj的name属性的值的时候，函数外部的对象也会反映这个变化，因为，obj指向的对象保存在全局作用域的堆内存上

上面的过程会给人一种错觉：你在函数局部作用域中修改对象而导致反映到全局，不就意味着参数是按引用传递的吗？（一开始我也这样以为的！！！）

那么请看下面这个例子：

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

function setName(obj) {
	obj.name = 'Jenny';    
    obj = {
        name: 'Jack',
    };
};

let person = {
    name: 'Katrina',
};

setName(person);   // 调用函数
console.log(person);  // {name: 'Jenny'}

这个例子比上面的例子就多了一行，也就是在函数内部将obj重新定义为了一个有着不同name的新对象

分析整个过程：

• 创建了一个对象并保存在person中，然后这个对象被传给setName方法，并且复制给obj

• 在函数内部内部修改了obj的name属性的值，并且又作妖地把obj设置为name为'Jack'的一个新对象

• 但是，当我们访问person.name的时候，打印的结果是Jenny而不是Jack

• 这表明函数中参数的值改变之后，原始的引用仍然没变，当obj 在函数内部被重写时，它变成了一个指向本地对象的指针，而那个本地对象在函数执行结束时就被销毁了

函数定义

函数通常可以以（1）函数声明；（2）函数表达式 ；（3）Function构造函数【不推荐】 三种方式进行定义。

函数声明

（一般来说，函数声明最后没有分号，因为在代码块的结尾不需要加分号）

1
2
3

function sum(num1, num2) {
 	reutrn num1 + num2;   
}

函数表达式

（函数表达式实际上是赋值的形式，建议加上分号）

函数表达式就像一个普通的变量定义和赋值，即创建一个函数再把它赋值给一个变量functionName，这样创建的函数叫做匿名函数（未赋值给其他变量的匿名函数的name属性是空字符串）

1
2
3

let sum = function(num1, num2) {
	return num1 + num2;
};

函数表达式有几种不同的形式：

• 形式一（最常见）：

  1 2 3

  let functionName = function(...args) { // 函数体 };

• 形式二：一个函数把另一个函数当作值返回

  1 2 3 4 5 6 7 8

  function createComparisonFunction(propertyName) { return function(object1, object2) { let value1 = object1[propertyName]; let value2 = object2[propertyName]; return value1 + value2; }; }

  createComparisonFunction()函数返回一个匿名函数，这个匿名函数可以被赋值给一个变量或者直接调用，任何时候，只要函数被当作值来使用，它就是一个函数表达式

函数声明 和 函数表达式的区别

两者最主要的区别是：函数声明提前

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

// eg1:函数声明提前
console.log(sum(10, 10));  // 20
function sum(num1, num2) {
 	reutrn num1 + num2;   
}


//eg2:函数表达式不提前 
console.log(sum(10, 10));   // Uncaught ReferenceError: sum is not defined
let sum = function(num1, num2) {
	return num1 + num2;
};

// 注意：这个报错并不是let引起的，将let改为var也会报错，即使var也会声明提前，但console.log的时候，sum为undefined，所以会引起报错：Uncaught TypeError: sum is not a function

红宝书解释如下： JavaScript引擎在任何代码执行之前，会先读取函数声明，并在执行器上下文中生成函数定义，而函数表达式必须等到代码执行到它那一行，才会在执行上下文中生成函数定义。

面试题

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

// eg1
console.log(sum(10));           // 打印结果为13，函数声明提前+函数覆盖

var sum = function(num) {
    return num+1;
};

function sum(num) {
	return num+2;
}

function sum(num) {
	return num+3;
};

Hexo建立个人博客

准备工作

• 安装Git
• 安装Node
• 新建github仓库 仓库名为username.github.io
• 安装hexo 及初始化

Hexo Command

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

npm install -g  #安装Hexo
npm update hexo -g #升级
hexo init #初始化博客

hexo n '我的文章' == hexo new '我的文章' #新建文章
hexo g == hexo gengerate #生成
hexo s == hexo server #启动
hexo d == hexo deploy #部署

hexo server #Hexo会监视文件变动并自动更新，无须重启服务器
hexo server -s #静态模式
hexo server -p 5000 #更改端口
hexo server -i 192.168.1.1 #自定义IP
hexo clean #清除缓存，若是网页正常情况可以忽略这条命令

新建post

按如下命令：

1
2
3

hexo new (post name)
hexo g
hexo s

推送网站

关联Hexo和Github

在blog/_config.yml中作如下修改：

保存站点配置文件

意思是给hexo deploy这个命令做相应的配置，让hexo知道你要把blog部署在哪个位置，显然，要部署在github仓库中

1

npm install hexo-deployer-git --save

继续输入以下命令：

1
2
3

hexo clean
hexo g
hexo d

然后在网址栏输入：XXX.github.io 就可以在线上访问个人博客了！

绑定域名

没买 直接跳过！

主题配置

https://hexo.io/zh-cn/docs/themes

https://hexo.io/themes/

秉承简约风格，我选择了Next主题

下载主题

1

git clone https://github.com/next-theme/hexo-theme-next themes/next

可以看到theme文件夹里面已经有next文件夹了

相关配置

打开site的配置文件（blog/_config.yml）,把theme改为next

NexT主题有四个样式可以选择配置：（next/_config.yml）

本地查看

1
2

hexo clean
hexo s

远程配置

1
2
3
4

npm install hexo-deployer-git --save
hexo clean
hexo g
hexo d

发布文章

文章主要用markdown编写，放置在/blog/source/_posts文件夹下

预览文章

自带Markdown编辑器或者本地hexo预览

个性化设置

站点配置

标题、副标题、描述、关键词、语言、时区

主题配置

https://theme-next.js.org/docs/theme-settings/

设置社交账号

侧边栏配置

把想要的开启即可

文档中有提及：除了Home和archives，其他的页面都需要自己配置，配置流程看

• Step1：Adding new pages

1

npm install hexo-deployer-git --save

• Step2: Setting page type

1
2
3
4
5

---
title: Tags
date: 2022-07-04 21:00:03
type: tags
---

• 如果是tag和categoty的话，需要在文章里面配置就会显示到页面上

踩坑&&问题记录

1. github 和 hexo关联没有关联上

• 原因1：注意仓库大小写问题

  

• 原因2：配置url

  

  注意这里一定要根据你的仓库来，因为我是直接配置在仓库里的，而我之前手贱错吧SuperKatrina_Blog当成了project name，所以后面样式失效了，控制台查看原因后发现是路径的问题

  

2. 配置主题后本地生效 但是 站点一直没生效

• 解决方法：清除缓存法

  依次输入下列命令行

  1 2 3

  hexo clean hexo g hexo d

3. 图片显示问题

• 站点_config.yml中，post_asset_folder设置为true，目的是为了新建文章时自动帮我们建一个与文章名相同的文件夹用来从放图片文件

  1	post_asset_folder: true

• 安装hexo-asset-image

  1	npm install hexo-asset-image --save

• 打开/node_modules/hexo-asset-image/index.js，内容替换为如下：

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61

  'use strict'; var cheerio = require('cheerio'); // http://stackoverflow.com/questions/14480345/how-to-get-the-nth-occurrence-in-a-string function getPosition(str, m, i) { return str.split(m, i).join(m).length; } var version = String(hexo.version).split('.'); hexo.extend.filter.register('after_post_render', function(data){ var config = hexo.config; if(config.post_asset_folder){ var link = data.permalink; if(version.length > 0 && Number(version[0]) == 3) var beginPos = getPosition(link, '/', 1) + 1; else var beginPos = getPosition(link, '/', 3) + 1; // In hexo 3.1.1, the permalink of "about" page is like ".../about/index.html". var endPos = link.lastIndexOf('/') + 1; link = link.substring(beginPos, endPos); var toprocess = ['excerpt', 'more', 'content']; for(var i = 0; i < toprocess.length; i++){ var key = toprocess[i]; var $ = cheerio.load(data[key], { ignoreWhitespace: false, xmlMode: false, lowerCaseTags: false, decodeEntities: false }); $('img').each(function(){ if ($(this).attr('src')){ // For windows style path, we replace '\' to '/'. var src = $(this).attr('src').replace('\\', '/'); if(!/http[s]*.*|\/\/.*/.test(src) && !/^\s*\//.test(src)) { // For "about" page, the first part of "src" can't be removed. // In addition, to support multi-level local directory. var linkArray = link.split('/').filter(function(elem){ return elem != ''; }); var srcArray = src.split('/').filter(function(elem){ return elem != '' && elem != '.'; }); if(srcArray.length > 1) srcArray.shift(); src = srcArray.join('/'); $(this).attr('src', config.root + link + src); console.info&&console.info("update link as:-->"+config.root + link + src); } }else{ console.info&&console.info("no src attr, skipped..."); console.info&&console.info($(this)); } }); data[key] = $.html(); } } });

• 图片按照如下格式引入

  1	{% asset_img example.jpg This is an example image %}

插件

字数统计

根据步骤来

https://github.com/next-theme/hexo-word-counter

注意（踩坑！！！）：配置完成后必须hexo clean，否则会出现时间为NaN 的情况！

版权声明_hexo-addlink

安装后在站点配置文件中配置

1
2
3
4

# 版权信息
addlink:
  before_text: 本文作者：XXX，本文地址： # text before the post link
  after_text: 转载请注明出处！ # text after the post link

参考

https://zhuanlan.zhihu.com/p/26625249（GitHub+Hexo 搭建个人网站详细教程）

https://hexo.io/zh-cn/ （Hexo中文文档）

https://theme-next.js.org/docs/theme-settings/ （主题配置）

https://theme-next.js.org/（NexT主题文档）

https://github.com/next-theme/hexo-word-counter（字数统计插件）

https://juejin.cn/post/7006594302604214280 （图片显示问题）