2018-4-26 javascript Writer的print和write ==和equals

1.深入理解JavaScript运行机制

前言

• 本文是写作在给团队新人培训之际，所以其实本文的受众是对JavaScript的运行机制不了解或了解起来有困难的小伙伴。也就是说，其实真正的原理和本文阐述的并不完全符合，就如中学课本和大学课本一样，大学老师会告诉你高中的一些东西是在某些理想情况下得到的结论，本文同理。
• 本文的目的是希望大家阅读之后能对JavaScript的运行机制有一个比较直观比较快的认识，但更重要的是自己动手实践，只有实践才能真正发现问题和得到提升:)
• 收到了大家的支持和反馈，非常感谢:)

想要理解JavaScript的运行机制，需要分别深刻理解以下几个点：

• JavaScript的单线程机制
• 任务队列（同步任务和异步任务）
• 事件和回调函数
• 定时器
• Event Loop（事件循环）

JavaScript的单线程机制

JavaScript的一个语言特性（也是这门语言的核心）就是单线程。什么是单线程呢？简单地说就是同一时间只能做一件事，当有多个任务时，只能按照一个顺序一个完成了再执行下一个。

JavaScript的单线程与它的语言用途是有关的。作为一门浏览器脚本语言，JavaScript的主要用途是完成用户交互、操作DOM。这就决定了它只能是单线程，否则会导致复杂的同步问题。

设想JavaScript同时有两个线程，一个线程需要在某个DOM节点上添加内容，而另一个线程的操作是删除了这个节点，那么浏览器应该以谁为准呢？

所以为了避免复杂性，JavaScript从诞生起就是单线程。

为了提高CPU的利用率，HTML5提出Web Worker标准，允许JavaScript脚本创建多个线程，但是子线程完全受主线程控制，且不得操作DOM。所以这个标准并没有改变JavaScript单线程的本质。

任务队列

一个接一个地完成任务也就意味着待完成的任务是需要排队的，那么为什么会需要排队呢？

通常排队有以下两种原因：

• 任务计算量过大，CPU处于忙碌状态；
• 任务所需的东西为准备好所以无法继续执行，导致CPU闲置，等待输入输出设备（I/O设备）。> 比如有的任务你需要Ajax获取到数据才能往下执行

由此JavaScript的设计者也意识到，这时完全可以先运行后面已经就绪的任务来提高运行效率，也就是把等待中的任务先挂起放到一边，等得到需要的东西再执行。就好比接电话时对方离开了一下，这时正好有另一个来电，于是你便把当前通话挂起，等那个通话结束后，再连回之前的通话。

所以也就出现了同步和异步的概念，任务也被分成了两种，一种是同步任务（Synchronous），另一种是异步任务（Asynchronous）。

• 同步任务：需要执行的任务在主线程上排队，一个接一个，前一个完成了再执行下一个
• 异步任务：没有马上被执行但需要执行的任务，存放在“任务队列”（task queue）中，“任务队列”会通知主线程什么时候哪个异步任务可以执行，然后这个任务就会进入主线程并被执行。> 所有的同步执行都可以看作是没有异步任务的异步执行

具体来说，异步执行如下：

• 所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。
  

  也就是所有能被马上执行的任务都在主线程上排好了队，一个接一个的被执行。

• 主线程之外，还存在一个“任务队列”（task queue）。只要异步任务有了运行结果，就在“任务队列”之中放置一个事件。
  

  也就是说每个异步任务准备好了就会立一个唯一的flag，这个flag用来标识对应的异步任务。

• 一旦“执行栈”中的所有同步任务执行完毕，系统就会读取“任务队列”，看看里面有哪些事件。那些对应的异步任务，就结束等待装袋，进入执行栈开始被执行。
  

  也就是主线程把之前的任务做完了之后，就会来看“任务队列”中的flag，来把对应的异步任务打包来执行。

• 主线程不断重复以上三步。
  

  只要主线程空了，就会去读取“任务队列”。这个过程会被不断重复，这就是JavaScript的运行机制。

事件和回调函数

事件

“任务队列”是一个事件的队列（也可以理解成是消息的队列），IO设备完成一项任务，就会在“任务队列”中添加一个时间，表示相关的异步任务可以进入“执行栈”。接着主线程读取“任务队列”，查看里面有哪些事件。

“任务队列”中的事件，除了IO设备的事件以外，还包括一些用户产生的事件（比如鼠标点击、页面滚动等等）。只要指定过回调函数，这些事件发生时就会进入“任务队列”，等待主线程读取。

回调函数

所谓“回调函数”（callback），就是那些会被主线程挂起来的代码。异步任务必须指定回调函数，当主线程开始执行异步任务，就是执行对应的回调函数。

“任务队列”是一个先进先出的数据结构，排在前面的事件，优先被主线程读取。主线程的读取过程基本上是自动的，只要执行栈一清空，“任务队列”上第一位的事件就自动进入主线程。但是，如果包含“定时器”，主线程首先要检查一下执行时间，某些事件只有到了规定的时间，才能返回主线程。

Event Loop

主线程从“任务队列”中读取事件，这个过程是循环不断的，所以整个的运行机制又称为“Event Loop”（事件循环）

为了更好地理解Event Loop，下面参照Philip Roberts的演讲中的一张图。

上图中，主线程在运行时，产生了heap（堆）和stack（栈），栈中的代码调用各种外部API，并在“任务队列”中加入各种事件（click，load，done）。当栈中的代码执行完毕，主线程就会读取“任务队列”，并依次执行那些事件所对应的回调函数。

执行栈中的代码（同步任务），总是在读取“任务队列”（异步任务）之前执行。

var req = new XMLHttpRequest();
req.open('GET', url);
req.onload = function (){};
req.onerror = function (){};
req.send();

上面的代码中的req.send方法是Ajax操作向服务器发送数据，它是一个异步任务，意味着只有当前脚本的所有代码执行完，系统才会去读取“任务队列”。所以，它与以下的写法是等价的。

var req = new XMLHttpRequest();
req.open('GET', url);
req.send();
req.onload = function (){};
req.onerror = function (){};

也就是说，指定回调函数的部分（onload和onerror），在send()方法的前面或后面是无关紧要的，因为它们属于执行栈的一部分，系统总是执行完它们才会去读取“任务队列”。

定时器

除了放置异步任务的事件，“任务队列”还可以放置定时事件，即指定某些代码在多少时间之后执行。这叫做定时器（timer）功能，也就是定时执行的代码。

SetTimeout()和setInterval()可以用来注册在指定时间之后单次或重复调用的函数，它们的内部运行机制完全一样，区别在于前者指定的代码是一次性执行，后者会在指定毫秒数的间隔里重复调用:

setInterval(updateClock, 60000); //60秒调用一次updateClock()

因为它们都是客户端JavaScript中重要的全局函数，所以定义为Window对象的方法。

但作为通用函数，其实不会对窗口做什么事情。

Window对象的setTImeout()方法用来实现一个函数在指定的毫秒数之后运行。所以它接受两个参数，第一个是回调函数，第二个是推迟执行的毫秒数。 setTimeout()和setInterval()返回一个值，这个值可以传递给clearTimeout()用于取消这个函数的执行。

console.log(1);
setTimeout(function(){console.log(2);}, 1000);
console.log(3);

上面代码的执行结果是1，3，2，因为setTimeout()将第二行推迟到1000毫秒之后执行。

如果将setTimeout()的第二个参数设为0，就表示当前代码执行完（执行栈清空）以后，立即执行（0毫秒间隔）指定的回调函数。

setTimeout(function(){console.log(1);}, 0);
console.log(2)

上面代码的执行结果总是2，1，因为只有在执行完第二行以后，系统才会执行“任务队列”中的回调函数。

总之，setTimeout(fn,o)的含义是，指定某个任务在主线程最早可得的空闲时间执行，也就是尽可能早地执行。它在“任务队列”的尾部添加一个事件，因此要等到同步任务和“任务队列”现有的事件都处理完，才会的到执行。

HTML5标准规定了setTimeout()的第二个参数的最小值（最短间隔），不得低于4毫秒，如果低于这个值，就会自动增加。

需要注意的是，setTimeout()只是将事件插入了“任务队列”，必须等到当前代码（执行栈）执行完，主线程才会去执行它指定的回调函数。要是当前代码耗时很长，有可能要等很久，所以并没有办法保证回调函数一定会在setTimeout()指定的时间执行。

由于历史原因，setTimeout()和setInterval()的第一个参数可以作为字符串传入。如果这么做，那这个字符串会在指定的超时时间或间隔之后进行求值（相当于执行eval()）。

关于深入理解定时器的工作原理，这里推荐阅读jQuery的作者John Resig的一篇文章： http://ejohn.org/blog/how-javascript-timers-work/

我自己也翻译了这篇文章，如有问题，欢迎指正：http://guoxunique.com/2016/12/07/how-javascript-timers-work/

参考阮一峰老师的博文 http://www.ruanyifeng.com/blog/2014/10/event-loop.html

参考《JavaScript权威指南》

2. javascript代码什么时候执行

果添加了defer=true属性，并且方法没有写在function里的话，会在整个页面加载完成后执行
如果没有添加了defer=true属性，并且方法没有写在function里的话，会从第一样代码开始，逐行执行
如果方法写在function里的话，会按照你的触发事件而执行，以下是各种事件

onabort 图像加载被中断
onblur 元素失去焦点
onchange 用户改变域的内容
onclick 鼠标点击某个对象
ondblclick 鼠标双击某个对象
onerror 当加载文档或图像时发生某个错误
onfocus 元素获得焦点
onkeydown 某个键盘的键被按下
onkeypress 某个键盘的键被按下或按住
onkeyup 某个键盘的键被松开
onload 某个页面或图像被完成加载
onmousedown 某个鼠标按键被按下
onmousemove 鼠标被移动
onmouseout 鼠标从某元素移开
onmouseover 鼠标被移到某元素之上
onmouseup 某个鼠标按键被松开
onreset 重置按钮被点击
onresize 窗口或框架被调整尺寸
onselect 文本被选定
onsubmit 提交按钮被点击
onunload 用户退出页面

3.write()和print()方法的区别：
  (1)、write()：仅支持输出字符类型数据，字符、字符数组、字符串等
  (2)、print()：可以将各种类型（包括Object）的数据通过默认编码转换成bytes字节形式，这些字节都通过write(int c)方法被输出

4.java 中 “==” 和 equals 的区别

　　在初学Java时，可能会经常碰到下面的代码：

1 String str1 = new String("hello");
2 String str2 = new String("hello");
3         
4 System.out.println(str1==str2);
5 System.out.println(str1.equals(str2));

　　为什么第4行和第5行的输出结果不一样？==和equals方法之间的区别是什么？如果在初学Java的时候这个问题不弄清楚，就会导致自己在以后编写代码时出现一些低级的错误。今天就来一起了解一下==和equals方法的区别之处。

一.关系操作符“==”到底比较的是什么？

　　下面这个句话是摘自《Java编程思想》一书中的原话：

　　“关系操作符生成的是一个boolean结果，它们计算的是操作数的值之间的关系”。

　　这句话看似简单，理解起来还是需要细细体会的。说的简单点，==就是用来比较值是否相等。下面先看几个例子：

public class Main {

    /**
     * @param args
     */
    public static void main(String[] args) {
        // TODO Auto-generated method stub
        
        int n=3;
        int m=3;
        
        System.out.println(n==m);
        
        String str = new String("hello");
        String str1 = new String("hello");
        String str2 = new String("hello");
        
        System.out.println(str1==str2);
        
        str1 = str;
        str2 = str;
        System.out.println(str1==str2);
    }

}

　　输出结果为 true false true

　　n==m结果为true，这个很容易理解，变量n和变量m存储的值都为3，肯定是相等的。而为什么str1和str2两次比较的结果不同？要理解这个其实只需要理解基本数据类型变量和非基本数据类型变量的区别。

　　在Java中游8种基本数据类型：

　　浮点型：float(4 byte), double(8 byte)

　　整型：byte(1 byte), short(2 byte), int(4 byte) , long(8 byte)

　　字符型: char(2 byte)

　　布尔型: boolean(JVM规范没有明确规定其所占的空间大小，仅规定其只能够取字面值"true"和"false")

　　对于这8种基本数据类型的变量，变量直接存储的是“值”，因此在用关系操作符==来进行比较时，比较的就是 “值” 本身。要注意浮点型和整型都是有符号类型的，而char是无符号类型的（char类型取值范围为0~2^16-1).

　　也就是说比如：

　　int n=3;

　　int m=3;　

　　变量n和变量m都是直接存储的"3"这个数值，所以用==比较的时候结果是true。

　　而对于非基本数据类型的变量，在一些书籍中称作为 引用类型的变量。比如上面的str1就是引用类型的变量，引用类型的变量存储的并不是 “值”本身，而是于其关联的对象在内存中的地址。比如下面这行代码：

　　String str1;

　　这句话声明了一个引用类型的变量，此时它并没有和任何对象关联。

　　而 通过new String("hello")来产生一个对象（也称作为类String的一个实例），并将这个对象和str1进行绑定：

　　str1= new String("hello");

　　那么str1指向了一个对象（很多地方也把str1称作为对象的引用），此时变量str1中存储的是它指向的对象在内存中的存储地址，并不是“值”本身，也就是说并不是直接存储的字符串"hello"。这里面的引用和C/C++中的指针很类似。

　　因此在用==对str1和str2进行第一次比较时，得到的结果是false。因此它们分别指向的是不同的对象，也就是说它们实际存储的内存地址不同。

　　而在第二次比较时，都让str1和str2指向了str指向的对象，那么得到的结果毫无疑问是true。

二.equals比较的又是什么？

　　equals方法是基类Object中的方法，因此对于所有的继承于Object的类都会有该方法。为了更直观地理解equals方法的作用，直接看Object类中equals方法的实现。

　　该类的源码路径为：C:\Program Files\Java\jdk1.6.0_14的src.zip 的java.lang路径下的Object.java（视个人jdk安装路径而定）。

　　下面是Object类中equals方法的实现：

　　

　　很显然，在Object类中，equals方法是用来比较两个对象的引用是否相等，即是否指向同一个对象。

　　但是有些朋友又会有疑问了，为什么下面一段代码的输出结果是true？

public class Main {

    /**
     * @param args
     */
    public static void main(String[] args) {
        // TODO Auto-generated method stub
        
        String str1 = new String("hello");
        String str2 = new String("hello");
        
        System.out.println(str1.equals(str2));
    }
}

　　要知道究竟，可以看一下String类的equals方法的具体实现，同样在该路径下，String.java为String类的实现。

　　下面是String类中equals方法的具体实现：

　　可以看出，String类对equals方法进行了重写，用来比较指向的字符串对象所存储的字符串是否相等。

　　其他的一些类诸如Double，Date，Integer等，都对equals方法进行了重写用来比较指向的对象所存储的内容是否相等。

　　总结来说：

　　1）对于==，如果作用于基本数据类型的变量，则直接比较其存储的 “值”是否相等；

　　　　如果作用于引用类型的变量，则比较的是所指向的对象的地址

　　2）对于equals方法，注意：equals方法不能作用于基本数据类型的变量

　　　　如果没有对equals方法进行重写，则比较的是引用类型的变量所指向的对象的地址；

　　　　诸如String、Date等类对equals方法进行了重写的话，比较的是所指向的对象的内容。