欢迎来到GeminiKnight的个人博客，这是我的第一篇博文，我会简单介绍一下自己

基本信息

1

$ hexo new "My New Post"

JavaScript共有7种数据类型，分为两种：基本类型和引用类型。基本类型包括Null，Undefined，Boolean，Number，String和ES6中新增的symbol;引用类型统称为Object(包括Array，Date，RegExp，Function)。基本类型值和引用类型值有很多不同之处：
1.基本类型值在内存中占据固定大小的空间，因此会被保存在栈内存中;引用类型的值是对象，保存在堆内存中(堆和栈都是内存中划分出来用来存储的区域,
栈（stack）为自动分配的内存空间，它由系统自动释放；而堆（heap）则是动态分配的内存，大小不定也不会自动释放);而且包含引用类型值的变量实际上包含的并不是对象本身，而是指向该对象的指针。
2.从一个变量向另一个变量复制基本类型值，会创建这个值的一个副本，二者不会互相影响。而从一个变量向另一个变量复制引用类型的值，复制的其实是指针，因此两个变量实际上指向同一个对象。
3.基本类型的值进行比较时比较的是值是否相等，而引用类型值在比较时比较的是存储地址是否相等

确定一个值是哪一种基本类型值可以用typeof 操作符：

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

var s = 'jack';
var b = false;
var i = 23;
var u;
var n = null;
var o = new Object();

console.log(typeof s);  // string
console.log(typeof b);  // bolean
console.log(typeof i);  // number
console.log(typeof u);  // undefined
console.log(typeof n);  // obejct
console.log(typeof o);  // object

对于引用类型值的时候，typeof均返回object。可以使用instanceof（是···的实例）操作符：

1
2
3

person instanceof Array;  //person是Array的是实例么？
person instanceof RegExp;  //person是RegExp的是实例么？
person instanceof Object;  //person是Object的是实例么？

基本数据类型的赋值是传值,在内存中新开辟一段栈内存，然后再把再将值赋值到新的栈中：

1
2
3
4
5

var a = 10;
var b = a;
a ++ ;
console.log(a); // 11
console.log(b); // 10

而引用类型的赋值是传（地）址,只是改变指针的指向，例如，也就是说引用类型的赋值是对象保存在栈中的地址的赋值，这样的话两个变量就指向同一个对象，因此两者之间操作互相有影响

1
2
3
4
5
6
7
8
9

var a = {}; // a保存了一个空对象的实例
var b = a;  // a和b都指向了这个空对象
a.name = 'jozo';
console.log(a.name); // 'jozo'
console.log(b.name); // 'jozo'
b.age = 22;
console.log(b.age);// 22
console.log(a.age);// 22
console.log(a == b);// true

JS垃圾回收机制：JS具有自动垃圾回收机制，也就是说执行环境会负责管理代码执行过程中使用的内存。垃圾回收的原理很简单：找出那些不在继续使用的的变量，释放其所占用的内存。主要的回收机制有两种：标记清除和引用计数。

1.标记清除

2.引用计数：
跟踪记录每个值被引用的次数：当声明一个变量并将一个引用类型值赋给该变量时，这个值得引用次数加一。（存在循环引用问题，导致内存泄漏。）

1. cookie

1.1 简介

cookie即HTTP cookie，是服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。通常，它用于告知服务端两个请求是否来自同一浏览器，如保持用户的登录状态。Cookie使基于无状态的HTTP协议记录稳定的状态信息成为了可能。
Cookie主要用于以下三个方面：

• 会话状态管理（如用户登录状态、购物车、游戏分数或其它需要记录的信息）
• 个性化设置（如用户自定义设置、主题等）
• 浏览器行为跟踪（如跟踪分析用户行为等）

当服务器收到HTTP请求时，服务器可以在响应头里面添加一个Set-Cookie选项。浏览器收到响应后通常会保存下Cookie，之后对该服务器每一次请求中都通过Cookie请求头部将Cookie信息发送给服务器。另外，Cookie的过期时间、域、路径、有效期、适用站点都可以根据需要来指定。

服务器通过在响应头部使用Set-Cookie向用户代理（一般是浏览器）发送Cookie信息

1

Set-Cookie: <cookie名>=<cookie值>

如一个响应头部可能如下:

1
2
3
4
5
6

HTTP/1.0 200 OK
Content-type: text/html
Set-Cookie: yummy_cookie=choco
Set-Cookie: tasty_cookie=strawberry

[页面内容]

之后，浏览器对该服务器发起的每一次新请求都会将之前保存的Cookie信息通过Cookie请求头部再发送给服务器，如

1
2
3

GET /sample_page.html HTTP/1.1
Host: www.example.org
Cookie: yummy_cookie=choco; tasty_cookie=strawberry

1.2 cookie的限制

cookie 在性质上是绑定在特定的域名下的。当设定了一个 cookie 后，再给创建它的域名发送请求时， 6 都会包含这个 cookie。这个限制确保了储存在 cookie 中的信息只能让批准的接受者访问，而无法被其他域访问
由于 cookie 是存在客户端计算机上的，还加入了一些限制确保 cookie 不会被恶意使用，同时不会占 据太多磁盘空间。每个域的 cookie 总数是有限的，不过浏览器之间各有不同：

• Firefox 和IE7 和之后版本限制每个域最多 50 个 cookie
• Opera 限制每个域最多 30 个 cookie
• Safari 和 Chrome 对于每个域的 cookie 数量限制没有硬性规定
  当超过单个域名限制之后还要再设置 cookie，浏览器就会清除以前设置的 cookie。浏览器中对于 cookie 的尺寸也有限制。大多数浏览器都有大约 4096B(加减 1)的长度限制。为了 最佳的浏览器兼容性，最好将整个 cookie 长度限制在 4095B(含 4095)以内。如果你尝试创建超过最大尺寸限制的 cookie，那么该 cookie 会被悄无声息地丢掉

1.3 cookie的构成

• 名称：一个唯一确定 cookie 的名称
• 值：储存在 cookie 中的字符串值
• 域（Domain）：cookie 对于哪个域是有效的，即Cookie应该发送给哪些URL。所有向该域发送的请求中都会包含这个 cookie 信息。这个值可以包含子域(subdomain，如 www.wrox.com)，也可以不包含它(如.wrox.com，则对于 wrox.com的所有子域都有效)。如果没有明确设定，那么这个域会被认作来自设置 cookie 的那个域（不包含子域名）。
• 路径（Path）：Path 标识指定了主机下的哪些路径可以接受Cookie（该URL路径必须存在于请求URL中）。以字符 %x2F (“/“) 作为路径分隔符，子路径也会被匹配。例如，设置 Path=/docs，则以下地址都会匹配：
  • /docs
  • /docs/Web/
  • /docs/Web/HTTP
• 失效时间：指定过期时间（Expires）或者有效期（Max-Age）确定cookie的有效期，其将在此时间过后被删除(只与用户代理的时间有关，与服务器时间无关)
• 安全标志：标记为 Secure 的Cookie只应通过被HTTPS协议加密过的请求发送给服务端
  为避免跨域脚本 (XSS) 攻击，通过JavaScript的 Document.cookie API无法访问带有 HttpOnly 标记的Cookie，它们只应该发送给服务端

例如：

1
2
3
4

HTTP/1.1 200 OK
Content-type: text/html
Set-Cookie: name=value; expires=Mon, 22-Nov-18 07:10:24 GMT; domain=.wrox.com ;secure;HttpOnly
Other-header: other-header-value

该头信息指定了一个叫做 name 的 cookie，它会在标准时间 2018 年 11 月 22 日 7:10:24 失效，同 时对于 www.wrox.com 和 wrox.com 的任何子域(如 p2p.wrox.com)都有效，并且只能通过HTTPS协议发送给服务器端，其只不能通过document.cookie访问

2.sessionStorage和localStorage

二者的概念和用法都相似，不同之处在于 localStorage 里面存储的数据没有过期时间设置，而存储在 sessionStorage 里面的数据在页面会话结束时会被清除。页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。用法如下：

1
2
3
4
5
6
7
8
9
10
11

// 保存数据到sessionStorage
sessionStorage.setItem('key', 'value');

// 从sessionStorage获取数据,注意其得到的值为字符串类型
var data = sessionStorage.getItem('key');

// 从sessionStorage删除保存的数据
sessionStorage.removeItem('key');

// 从sessionStorage删除所有保存的数据
sessionStorage.clear();

1
2
3
4
5
6
7
8
9
10
11

// 保存数据到localStorage
localStorage.setItem('key', 'value');

// 从localStorage获取数据,注意其得到的值为字符串类型
var data = localStorage.getItem('key');

// 从localStorage删除保存的数据
localStorage.removeItem('key');

// 从localStorage删除所有保存的数据
localStorage.clear();

1.1 跨域的概念

出于安全原因，浏览器限制从脚本内发起的跨源HTTP请求。 例如，XMLHttpRequest和Fetch API遵循同源策略， 这意味着使用这些API的Web应用程序只能从加载应用程序的同一个域（协议，域名，端口号均相同）请求HTTP资源。
跨域的解决方案：

1 图像Ping

我们知道，一个网业可以从任何网页中加载图像，不用担心跨域问题。所以可以利用标签，动态创建图像，使用他们的onload和onerror事件处理程序来确定是否接收到了响应。
图像ping是与服务器进行简单.单向通讯的一种方式，请求的数据是通过查询字符串形式发送的，而响应可以使任何内容，但通常是像素图或204（No Content）响应（表示目前请求成功，没有内容）。通过图像Ping，浏览器无法得到任何数据，但通过侦听load和error事件，他们能知道响应是何时接受到的。

1
2
3
4
5

var img = new Image();
img.onload = img.onerror = function(){
    alert('done')
}
img.src = 'http://www.example.com/test?name=GeminiKnight'

图像Ping常用于跟踪用户点击页面或动态广告曝光次数
主要有两个缺点： 1.只能发送GET请求（所以能发送的数据有限，也不安全）
2.无法访问服务器的响应文本

2 JSONP

既然可以利用img标签实现跨域，那同样不受跨域限制的script标签是否也能实现跨域呢？答案是当然可以。JSONP（JSON with padding）由两部分内容组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的，而数据就是传入回调函数中的JSON数据，例如：
http://freegeoip.net/json/?callback=handleResponse
这里指定回调函数为handleResponse

function handleResponse(response){
alert(‘你的IP地址是’+ response.ip +’位于’ +’response.city’)
}
var script = document.createElement(‘script)
script.src = ‘http://freegeoip.net/json/?callback=handleResponse'
document.body.insertBefore(script,document.body.firstChild)
`
与图像Ping相比，他的优点在于可以直接访问响应文本，支持浏览器和服务器双向通信。不过它也有两点不足：1.JSONP是从其他域中加载代码，如果其他域不安全，可能会在代码中加载恶意代码
2.很难判断JSONP请求成功与否。

2 JSONP