Electron学习二：学习Electron和Node.js需要知道的JavaScript知识

写在前面

我们在Electron、Node.js上面做开发，开发语言就是JavaScript，另外，很多库也是利用JavaScript封装而成，了解JavaScript的核心知识是必须的。

JavaScript入门学习地址参见：W3chool 教程，里面教程简洁全面，入门足够。这里只将学习的核心的一些概念和知识列出。

JavaScript语言特性

Javascript语言标准规范是ECMAScript，浏览器内置的JavaScript脚本引擎大部分实现遵循该规范；

通用支持：浏览器自带脚本引擎，无需插件，因此现在前端动态语言基本上只有JavaScript，后端五花八门；

动态性：

动态类型：变量的类型可变，根据变量当前的值的类型确定，提供获取变量类型的方法；

运行计算：提供eval函数，在运行时对字符串语句代码进行动态执行和计算；

基于原型和面向对象：

一切几乎都是对象，对象本质上是个关联数组，支持使用原型进行扩展，对象属性可以在运行时添加、重新绑定、删除；

原型：JS利用原型实现继承性，与Java等面向对象语言使用类实现不同，原型和类一样，是对象的元定义和模板；

函数作为对象构造器，使用new和object.create创建原型实例，也就是对象；

函数也作为方法，函数定义和对象方法定义没有区别；

支持函数，函数本质上也是对象，有方法和属性，支持内嵌函数和匿名函数；

DOM、BOM和JavaScript的关系

完整的JavaScript应该包括ECMAScript、DOM和BOM；

ECMAScript：规定语言语法规则，定义语言的所有属性、方法和对象；

DOM:文档对象模型，定义对象和方法，使用树来表示文档，从而提供对文档所有元素的控制能力，可以在不重载网页的情况下改变网页外观和内容；

BOM：浏览器对象模型，定义对象和接口，提供访问浏览器交互的能力，可以控制窗口、屏幕、cookie以及IE中的ActiveX插件等；

JavaScript网景自发布起，基本就提供语言、BOM、DOM不同程度的支持，单独的JavaScript语言并无法发挥最大作用；

JavaScript开发调试

开发环境

开发工具：记事本、vs code、JetBrains Webstorm、网页编辑器都可

测试运行：chrome浏览器、IE浏览器开发工具，建议用chrome的开发者模式

浏览器内置引擎直接执行js脚本

在地址栏输入：javascript:alert(“运行JS”)，回车即可运行

F12打开开发者工具，在控制台输入js代码，即可运行，或者新建snippet脚本片段运行

新建空白网页，引入js脚本，用浏览器打开即可运行

设置断点和控制台输出

javascript代码中加入 debugger;手工设置断点；

打开chrome的开发者工具，手工设置断点，执行观察调试；

代码行太长换行，只能在文本字符串中使用反斜杠\换行，不能随意断行；

重点知识

undefined值和null的区别

变量声明时未赋值，读取该变量时输出为undefined，表示变量不含有值；

变量赋值为null，就是清空变量，变量的值为null；

函数无明确返回值是调用返回的值是undefined,Null类型只有一个合法值null，值undefined是从其派生的，因此null === undefined；

undefined表示声明了变量但未对其初始化，null表示尚未存在的对象

typeof和instanceof 区别

typeof 对引用类型输出都是 object，无法识别处理的对象实际类型

instanceof 可以测试引用类型是否特定类型的实例，返回值为true或者false

数据类型

js是动态类型，变量类型可变，相同变量可随意赋值其它类型的值

js只有一种数字类型，该类型可以是小数或者整数

变量本质上是对象，函数本身也是对象

数据类型分为两种，原始类型和引用类型，原始类型五种： Undefined、Null、Boolean、Number 和 String，使用typeof variable可以查看变量当前的类型

当变量是一种引用类型或者值为Null类型的，使用typeof，输出object，这是实现的错误，null被认为对象的占位符，技术上看null是原始类型

引用类型同样称为类，传统意义上，JS并没有真正的类，JavaScript称为为“对象定义”，也就是对象的模板；

JavaScript中字符串作为原始类型，而不是引用类型，与大部分语言不一样；

原始类型是在栈上分配，引用类型值是在堆上分配，栈上保留引用地址；

类型转换与NaN

NaN：表示非数，类型转换失败时出现，NaN不能用于算术计算，NaN与自身不相等，NaN === NaN 返回false

isNaN(“”):测试使用能转换成数字

对象提供toString方法转换成字符串

使用parseInt()和parseFloat()将字符串转换成数字类型，对其它类型转换返回NaN，转换时会对非合法数字从位置0处开始处理，如果0处非法返回NaN，其它则截取非有效字符为主；

强制类型转换：Boolean()函数返回值为false或者true、Number()函数对整个值进行转换，失败返回NaN、String()函数可以将任何值转换成为字符串

变量声明周期

在函数内部使用var声明的变量是局部变量，只能在函数内部访问，函数运行完毕，变量就被删除；

在函数外声明的变量是全局变量，在页面关闭才会删除，页面所有脚本和函数均可访问；

即使在函数内部，直接赋值给为显式声明的变量，该变量自动作为全局变量；‘

函数本质

函数使用function声明，不需要声明返回类型和参数类型，函数无返回值或者调用无参数的return语句，返回值为undefined；

定义的函数可以接受任意个数的参数，JS与其它语言不一样，不验证传递给函数个数是否等于函数定义的参数，遗漏的参数以undefined传递，多余的参数被忽略；

函数提供属性arguments数组检测参数个数和参数；

JavaScript定义的函数实际上是功能完整的对象，也就是Function类的实例，定义函数相当于new个函数对象

利用Function类创建函数：var function_name = new function(arg1, arg2, …, argN, function_body)，其中参数必须是字符串类型

传统写法function function_name(args),function_name相当于普通的引用变量，因此可以赋值给其它变量，也可以作为其它函数的参数；

new Function类方式创建函数，比用function直接创建，效率慢的多；

函数是对象，也就具有属性和方法，属性length查看参数个数,继承的valueOf()和toString()可以返回函数源码；

函数闭包

函数闭包也就是函数可以使用函数之外定义的变量；

函数当前作用域内除了访问局部变量以外，可以访问外在函数变量和全局变量，支持函数嵌套；

函数内部直接使用function声明一个新的函数，这个函数是全局函数，因为没有使用var显式声明；

函数闭包会保存大量的局部函数变量引用，内存消耗大，容易导致内存泄露；

函数闭包突破了变量的作用域的限制，可以在任意地方通过函数闭包间接访问其它局部变量；

JavaScript的面向对象理解

对象定义为属性的无序集合，每个属性存放一个原始值、对象或函数，也就是无特定顺序的值的数组；

JS没有真正的类定义，对象定义实际上等于对象本身；

面向对象的封装、聚集、继承和多态特性，JS均能支持，因此称为JS具备面向对象特性；

JS认为，对象是特性构成，特性可以是原始值或者引用值，如果特定存放的是函数对象，当做对象的方法，否则可以认为是属性；

JS提供垃圾回收程序，自动销毁对象释放内存，使用Object=null;可以强制在下次回收对象，当对象具备多个引用时，必须都设置为null才可以释放；

JS对象只有一种作用域即是公有作用域，建议性的编码规范是使用varilablename作为私有变量的声明

JS中没有静态作用域，通过给构造函数添加方法，可以模拟，即使这样，构造函数也只是普通的函数对象，添加的函数也是公共作用域函数；

this关键字

this总是指向调用该方法的对象；

实例化对象时，不确定开发者使用的变量名称，因此需要通过this泛指；

引用对象的属性必须使用this，否则JS认为是局部变量或者全局变量，无法找到；

基础语法

编码规则

命名区分大小写，console和Console是两个不同对象

语句使用分号分割，也可以不使用分号结束语句

空格与断行无关，js会自动删除所有空格，因此代码可以跨多行

变量

变量必须以字母开头，或者以$或者_符号开头（不建议）

变量使用前可以显式声明：var my; 也可以不声明；

基本数据类型：字符串、数字、布尔、数组、对象、null、Undefined

使用new声明对象类型，变量本身也是对象：String,Number,Boolean,Array,Object;

对象类型

对象分为本地对象、内置对象、宿主对象

本地对象也就是ECMAScript标准定义的引用类型：Object,Function,Array,String,Boolean,Number,Date,RegExp,Error(EvalError,RangeError,ReferenceError,SyntaxError,TypeError,URIError);

内置对象：标准定义的，不需明确实例化对象，运行前已经初始化，主要有Global对象和Math对象；

Golbal对象：全局对象是预定义的对象，作为 JavaScript 的全局函数和全局属性的占位符。通过全局对象可以访问预定义的属性、函数和对象，全局对象不是任何对象的属性，没有名称，没有构造函数，具备环境特定的属性，例如在浏览器中，全局对象就是Windows对象，不是真正存在一个Global的类型；全局对象提供全局函数和全局属性，例如eval(),escape(),parseInt()等；this可以引用全局对象；

Math对象：数学运算的对象

宿主对象：由实现ECMAScript实现的宿主环境提供，所有的BOM和DOM对象都是；

数组写法

动态添加写法：
var cars = new Array();
cars[0] = "Audi";
cars[1] = "BMW";
cars[2] = "Volvo";

对象构造函数生成：
var cars=new Array("Audi","BMW","Volvo");

常量式写法：
var cars=["Audi","BMW","Volvo"];

两种对象创建方式

var person={
firstname : "Bill",
lastname  : "Gates",
id        :  5566
};

person=new Object();
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";

对象属性寻址：
name=person.lastname;
name=person["lastname"];

最佳的对象定义方式

混合的构造函数/原型方式

非函数属性在构造函数中创建，利用函数参数改变属性的值；

函数属性采用原型方式，这是ECMAScript采用的主要方式，唯一不美可能是没有进行方法和属性的视觉封装。

function Car(sColor,iDoors,iMpg) {
this.color = sColor;
this.doors = iDoors;
this.mpg = iMpg;
this.drivers = new Array("Mike","John");
}

Car.prototype.showColor = function() {
alert(this.color);
};

var oCar1 = new Car("red",4,23);
var oCar2 = new Car("blue",3,25);

oCar1.drivers.push("Bill");
alert(oCar1.drivers);   //输出 "Mike,John,Bill"
alert(oCar2.drivers);   //输出 "Mike,John"

动态原型方法

与混合的构造函数/原型方式相同，区别是赋予对象方法的位置，也在构造函数里面。

function Car(sColor,iDoors,iMpg) {
this.color = sColor;
this.doors = iDoors;
this.mpg = iMpg;
this.drivers = new Array("Mike","John");

if (typeof Car._initialized == "undefined") {
Car.prototype.showColor = function() {
alert(this.color);
};

Car._initialized = true;
}
}

常用代码

基本语法

<script> js代码 </script>  网页中嵌入js代码
<script src="sample.js"></script>  网页中引入外部js文件

循环遍历对象的属性

for/in循环：遍历对象的属性，注意：无法遍历全局对象this的预定义属性，自定义属性可以访问

var person={fname:"John",lname:"Doe",age:25};
for (x in person)
{
txt=txt + person[x];
}

异常处理语法

异常处理方式：
try
{
}
catch(err)
{
}
自定义错误对象：throw 字符串/数字/逻辑值/对象 都可以

DOM操作方法

document.getElementById(id)   根据id获取html元素
document.getElementById("demo").innerHTML="Hello World";  修改html元素的html文本属性

document.write("html内容")   输出内容到当前文档，如果文档加载完成以后调用，覆盖当前内容

定时操作方法

var t=setTimeout("javascript语句",毫秒)   设置定时，返回定时对象
clearTimeout(setTimeout_variable)  取消定时

模拟函数重载：JavaScript不支持函数重名

function doAdd() {
if(arguments.length == 1) {
alert(arguments[0] + 5);
} else if(arguments.length == 2) {
alert(arguments[0] + arguments[1]);
}
}
doAdd(10);  //输出 "15"
doAdd(40, 20);  //输出 "60"

构造函数添加属性和方法，重点理解：函数本身也是对象，所以可以添加属性和方法，方法也是函数：
// 模拟定义构造函数sayHello
function sayHello() {
alert("hello");
}
sayHello.alternate = function() {
alert("hi");
}

sayHello();     //输出 "hello"
sayHello.alternate();   //输出 "hi"

this关键字使用：总算指向调用的对象

function showColor() {
alert(this.color);
};
var oCar1 = new Object;
oCar1.color = "red";
oCar1.showColor = showColor;

var oCar2 = new Object;
oCar2.color = "blue";
oCar2.showColor = showColor;

oCar1.showColor();      //输出 "red"
oCar2.showColor();

高效字符串操作

js的字符串是不可变的，采用+字符串连接操作产生大量的字符串对象，效率低；

普通的+操作符完全可以满足需要；

采用数组方式，一次连接多个字符串：
var arr = new Array();
arr[0] = "hello ";
arr[1] = "world";
var str = arr.join("");

// 定义StringBuffer，打包功能，可读性高

function StringBuffer () {
this._strings_ = new Array();
}

StringBuffer.prototype.append = function(str) {
this._strings_.push(str);
};

StringBuffer.prototype.toString = function() {
return this._strings_.join("");
};

var buffer = new StringBuffer ();
buffer.append("hello ");
buffer.append("world");
var result = buffer.toString();