认识浏览器、js的一些基础 ----------js笔记

主流浏览器和其内核。

一、认识浏览器
1.浏览器分为两个部分，外壳shell部分和内核部分。外壳也就是用户正常操作的部分。
2.内核部分分为渲染引擎(html、css的代码解析)、js引擎、其他模块(比如异步等）。

小故事：
       2001年ie6发布后，把js单独从渲染引擎剥离出来了，从之前执行20行js代码就会卡死到执行万行代码都基本没问题的优化。革命性的改革。
       Chrome
是渲染最快的，因为在2008年Google把chrome内核发布后，v8引擎 直接把js代码解析成电脑可以解析的语言。

二、 主流浏览器的判定标准：
1.市场份额占比>=3%
2.有独立的内核

三、有哪些主流浏览器和及其内核。

浏览器	内核
IE	Trident
Chrome	Webkit(2004年前和Apple共同开发）、2004年后是Blink
Firefox	Gecko
Opera	Presto
Safari	Webkit

认识js

一、编译性语言和解释性语言
1.编译性语言就是把整篇代码分析完了之后再执行。
    优点：快(一般做游戏引擎、系统等)
    缺点：移植性不太好，windows上写的c语言代码，Linux和Ulinix不支持。Linux和Ulinx因为其开源的特性，使其整体性能不断被大众特别是黑客们完善，使其变得十分稳定强大以及安全。

小故事
Java 原来叫oak语言。Java牛逼的就是先通过javac 编译成 .class文件，然后再通过jvm 虚拟机解释执行，这样Java就可以跨平台执行，把c和c++ 打的满地找牙，bb机上都可以用Java。

2.解释性语言就是读一行翻译一行，凡是带<>都是解释性语言。
    优点：跨平台。
    缺点：相比编译性语言相对较慢一点点。不过现在科技发达，慢不到哪儿去。

二、了解js的运行。

1. js 解释性语言
2. js 是单线程

单线程 ：一个人同一时间只能干一件事。
一个执行体同一时间只能做一件事。如果要做另外一件事就要把手头的事情放下来去再去做另一件事情。


多线程：同一时间做多件事情叫多线程。 一个执行体可以同时做多件事情。这个叫多线程。


JavaScript的引擎是单线程的。但是你说为什么我看网页汇总到处都可以同时动，原因是因为JavaScript实际上还是单线程，
它是这里动一下哪里动一下，但是因为间隔太短了，视觉上根本看不出来而已，人的视觉是反应不过来的。
这种在极短的人肉眼看不出来的间隔时间里执行多件事情 我们叫做轮转时间片，比如js引擎现在要执行任务a和b。
它不会先执行a再执行b，而是把a和b切成很多很多的片段，然后把它们放在同一个队列中，随机摆放，可能第一个时间片和第二个时间片
或者第三个时间片都是同一个任务，完全随机的，这种也叫争抢时间片，然后在一个片段一个片段放进js引擎中执行。

3. js由ECMAscript和浏览器提供的DOM和BOM组成。
4. js是属于编程语言。

html和css不算编程语言，算脚本语言，计算机语言。 【有变量、有函数、有数据结构、可以进行基本的运算的语言才叫编程语言。】

Web开发标准

结构、行为、样式相分离。

数据类型

一、基本数据类型
1. 数值型（Number）
2. 字符串（String）
3. 布尔型（Boolean）
4. 未定义（Undefined）
5. 空（Null）

空Null的作用大部分时候是用来占位的，null一般用于占位，没有任何意义，比如你给一个变量赋值了一个函数方法，但是突然有一天这个方法要移出不用，这个变量还不能从代码中删除，那就可以让这个变量为Null来解决。

二、引用数据类型
1. 数组（Array）
2. 对象（Object）
3. 函数（Function）
4. 正则（RegExp）

堆和栈

一、栈 Stack
基本数据类型存放在栈中，比如你var a = 1; 因为js判断一个变量的类型是以其赋值的结果来判断的，所以可以判断1 是Number型，属于基本数据类型，那么它是存在于栈区，并且有不可删除和不可编辑的特性。但是如果说你按照以下方式输出：

var a = 1;
a = 2;
console.log(2);/*我们的常识会认为是2把1给替换了，
所以打印的结果是是2，这里首先打印的结果是2是没错的，
实际上【不一定】是2把1给替换了，2要替换1 是当内存
空间不足的时候，才会替换，否则实际的解析结果是：
1、先var a 在栈区声明一块区域，然后在这块区域里放入
基本数据类型的数字1。
2、如果空间还有剩余，就会重新开辟一片空间，声明变成a，
然后放入值 为2，
之前的1 占用的空间和1依然存在，但是没有变量指向它，就
无法访问它，除非空间已经满了，那么这时候就会把1给替换掉
，否则1 永远存在，并占用那部分空间，直到空间不足的时候
替换它。
*/

//理解了栈的存放数据的原理后，我们就可以试着计算以下结果：
var a = 10;
a = 2;
var b = a + 1;
console.log(a);// 结果是2;
console.log(b); //结果是 3;

二、堆 Heap

一般来说堆里存放的都是引用数据类型。
如果是以下情况：

var arr = [1,2];
/*
浏览器在解析这行代码的时候，首先会先解析变量声明：var arr，
然后就会在栈区开辟一块空间，命名为arr，随后解析其值的时候，
发现这是一个数组，属于引用数据类型，于是就会把值存在堆区，
那么对应栈区名为arr开辟的空间里存放的就是指向堆区的哪一堆
的指针，其实我们在电脑上打开的APP、文件夹都是这个原理，
我们在删除一些文件的时候其实也只是把其指针删除了，实际的
文件内容如果没有因为内存不足而被替换，那么就依然保存在我们
电脑的堆区，有些公司就有这个技术，替堆区里的没有指针的数据
找回它们的指针，然后就可以实现数据恢复。
*/

这时候如果有以下代码：

var arr = [1,2];
var arr1 = arr ;
arr.push(3);
console.log(arr); 
console.log(arr1);
/*
按照以上结果显示的话 arr 和arr1 打印出来都是[1,2,3];
原因是因为如下图所示：var arr1 = arr ;这个过程是：
1、现在栈区声明一块叫做arr1的区域，然后因为它等于arr，
但是因为arr的值是存在堆区的数组，所以它只能等于arr的指向堆区的
指针地址，因为arr1和arr的指向是一样的，所以当arr 值改变的时候，
arr1自然也会跟着改变。
*/

小拓展：
如下代码所示：

var arr = [1,2];
var arr1 = arr;
arr = [1,3];
console.log(arr);
console.log(arr1);
//打印出来的arr 和arr1 的结果是多少呢？
/*
分析： 
前两行代码：
var arr = [1,2];
var arr1 = arr;
和之前一样，指针地址和指向都完全一样，但是第三行代码，arr=[1,3];
虽然和初始的数组里都有1，但是本质上[1,2] !=[1,3] ,所以这是完全
两个不同的值，所以这行代码相当于arr 重新在栈区开辟了一块空间，
并命名为arr，同时其值[1,3] 也重新在堆区开辟了一块空间，并存放了
值[1,3]，于是实际的结果就由以下原本的图1，变成了图2.

所以答案就是： arr ==[1,3]  arr1==[1,2]
*/

图1：

图2：

js报错

js报错分为2种：语法解析错误和逻辑错误。

1、语法解析错误
浏览器在解析js代码的时候首先会在当前的代码块

<script></script> //一个这个标签叫一个代码块

中扫描下看看 是否存在语法错误，就是写一些js根本不支持的东西，如果存在，那么所有js代码都不会执行，无论语法错误在在第几行，举例如下：

var a= 1;
console.log(a);
、。/*我在这加入了中文字符、和。 */

在js中是根本不支持这么解析 中文字符 、 和 。
的，所以控制台的结果如下图所示：

2、逻辑错误
通俗一点理解来说就是少些了一些东西，导致这条语句无法成立，也无法正常解析运行，那么在当前代码块里，这条语句之前的代码正常执行，之后的代码无法运行。
如下所示：

var a = 0;
var b
console.log(a);
console.log(b);
console.log(c);
console.log(1);
console.log(2);

显示的结果如下图所示：
console.log( c ）之前的语句正常解析，之后的因为该语句存在逻辑错误，没有定义c，所以导致报错，随后的代码无法正常执行。

运算符

常用算术运算符有+、 - 、* 、/ 、%和++ 、- - 、+=、-= 、 *=、/=和%= 、（）权重最高，先算括号里的。
常用的运算符有：= 赋值运算符 权重最低

注意:

1. 0/0 == NaN;
2. 1/0 == infinity;
3. -1/0 == -infinity;
4. 4%7 == 4 ----> 因为7比4大，所以4模上7是商0余4。

++ 和 - - 在前后的区别

举例：
a++ 可以解析为 ： a = a； a = a + 1;
++ a 可以解析为： a = 1 + a； - - 同理;

++ 和 - - 在前或者在后的结果是根据语句来的，++在前的话是先+1然后再执行语句，在后的话是先执行语句，然后再+1， - -同理。如下所示：

var a = 1;
console.log(a++);  /*++ 在后，先执行语句，console.log(a); 然后a再加1,所以打印的结果是 1 ;
*/
console.log(a);// 因为上面已经执行了a = a + 1;所以打印的结果是2.

结果如下图所示：

而++ 和 - - 在前的话，是先执行++ 和 - - ，然后再执行语句。
如下所示：

var a = 10;
var b = ++a - 1 + a++;
console.log(a);
console.log(b);

/*
解析：首先第一个 ++a 就相当于 a = a + 1，就是 11, 这时候 a = 11 ; 
++ a -  == 11 - 1 == 10;
var b = 10 + a++;
var b = 10 + 11 == 21;
 a = 11++ ----> a = 11 + 1 =12;
所以这条语句打印的结果是: 12  21 如下图所示:
*/