zoukankan      html  css  js  c++  java

  • 前端基础-JavaScript

    引自狂神说Java：https://space.bilibili.com/95256449/video

    1. 什么是JavaScript

    1.1 概述

    JavaScript是一种运行在浏览器中的解释型的编程语言。

    浏览器=shell(壳)+kernel（内核）

    解释性语言、单线程

    为什么我们要学JavaScript？尤其是当你已经掌握了某些其他编程语言如Java、C++的情况下。

    简单粗暴的回答就是：因为你没有选择。在Web世界里，只有JavaScript能跨平台、跨浏览器驱动网页，与用户交互。

    主流浏览器及其内核

    IE trident
    Chrome webkit/blink
    Firefox Gecko
    Opera presto
    Safari webkit

    1.2 历史

    在上个世纪的1995年，当时的网景公司正凭借其Navigator浏览器成为Web时代开启时最著名的第一代互联网公司。

    由于网景公司希望能在静态HTML页面上添加一些动态效果，于是叫Brendan Eich这哥们在两周之内设计出了JavaScript语言。你没看错，这哥们只用了10天时间。

    为什么起名叫JavaScript？原因是当时Java语言非常红火，所以网景公司希望借Java的名气来推广，但事实上JavaScript除了语法上有点像Java，其他部分基本上没啥关系。

    ECMAScript

    因为网景开发了JavaScript，一年后微软又模仿JavaScript开发了JScript，为了让JavaScript成为全球标准，几个公司联合ECMA（European Computer Manufacturers Association）组织定制了JavaScript语言的标准，被称为ECMAScript标准。

    所以简单说来就是，ECMAScript是一种语言标准，而JavaScript是网景公司对ECMAScript标准的一种实现。

    那为什么不直接把JavaScript定为标准呢？因为JavaScript是网景的注册商标。

    不过大多数时候，我们还是用JavaScript这个词。如果你遇到ECMAScript这个词，简单把它替换为JavaScript就行了。

    ECMAScript 版本

    年份 名称 描述
    1997 ECMAScript 1 第一个版本
    1998 ECMAScript 2 版本变更
    1999 ECMAScript 3 添加正则表达式 添加 try/catch
    ECMAScript 4 没有发布
    2009 ECMAScript 5 添加 "strict mode"，严格模式 添加 JSON 支持
    2011 ECMAScript 5.1 版本变更
    2015 ECMAScript 6 添加类和模块
    2016 ECMAScript 7 增加指数运算符 (**) 增加 Array.prototype.includes

    2. 快速入门

    JavaScript代码可以直接嵌在网页的任何地方，不过通常我们都把JavaScript代码放到``中

    2.1 引入JavaScript

    方法1:由<script></script>包含的代码就是JavaScript代码，它将直接被浏览器执行。

    <html>
<head>
  <script>
    alert('Hello, world');
  </script>
</head>
<body>
</body>
</html>

    方法2:把JavaScript代码放到一个单独的.js文件，然后在HTML中通过``引入这个文件：

    <html>
<head>
  <script src="/static/js/abc.js"></script>
</head>
<body>
  ...
</body>
</html>

    2.2 基本语法

    JavaScript的语法和Java语言类似，每个语句以;结束，语句块用{...}。但是，JavaScript并不强制要求在每个语句的结尾加;，浏览器中负责执行JavaScript代码的引擎会自动在每个语句的结尾补上;。

    注释

    行注释：以//开头直到行末的字符被视为行注释

    块注释：用/*...*/把多行字符包裹起来，把一大“块”视为一个注释

    2.3 数据类型

    1. 基本数据类型(值类型)：字符串（String）、数字(Number)、布尔(Boolean)。
    2. 引用数据类型：对象(Object)、数组(Array)、函数(Function)。
    3. 特殊数据类型：空（Null）、未定义（Undefined）、Symbol(ES6 引入了一种新的原始数据类型，表示独一无二的值)。
    2.3.1、字符串

    字符串是以单引号'或双引号"括起来的任意文本，比如'abc'，"xyz"等等。请注意，''或""本身只是一种表示方式，不是字符串的一部分，因此，字符串'abc'只有a，b，c这3个字符。

    2.3.2、Number

    JavaScript不区分整数和浮点数，统一用Number表示。

    123; // 整数123
0.456; // 浮点数0.456
1.2345e3; // 科学计数法表示1.2345x1000，等同于1234.5
-99; // 负数
NaN; // NaN表示Not a Number，当无法计算结果时用NaN表示
Infinity; // Infinity表示无限大，当数值超过了JavaScript的Number所能表示的最大值时，就表示为Infinity
    2.3.3、布尔值

    布尔值和布尔代数的表示完全一致，一个布尔值只有true、false两种值，要么是true，要么是false。

    2.3.4、null和undefined

    null表示一个“空”的值，它和0以及空字符串''不同，0是一个数值，''表示长度为0的字符串，而null表示“空”。

    在其他语言中，也有类似JavaScript的null的表示，例如Java也用null，Swift用nil，Python用None表示。但是，在JavaScript中，还有一个和null类似的undefined，它表示“未定义”。

    JavaScript的设计者希望用null表示一个空的值，而undefined表示值未定义。事实证明，这并没有什么卵用，区分两者的意义不大。大多数情况下，我们都应该用null。undefined仅仅在判断函数参数是否传递的情况下有用。

    2.3.5、数组

    数组是一组按顺序排列的集合，集合的每个值称为元素。JavaScript的数组可以包括任意数据类型。

    //两种创建方式：
//方式1：
[1, 2, 3.14, 'Hello', null, true];
//方式2：
new Array(1, 2, 3); // 创建了数组[1, 2, 3]
    2.3.6、对象

    JavaScript的对象是一组由键-值组成的无序集合。

    var person = {
    name: 'Bob',
    age: 20,
    tags: ['js', 'web', 'mobile'],
    city: 'Beijing',
    hasCar: true,
    zipcode: null
};

//要获取一个对象的属性，我们用对象变量.属性名的方式：
person.name; // 'Bob'
person.zipcode; // null

    比较运算符

    JavaScript在设计时，有两种比较运算符：

    第一种是==比较，它会自动转换数据类型再比较，很多时候，会得到非常诡异的结果；

    第二种是===比较，它不会自动转换数据类型，如果数据类型不一致，返回false，如果一致，再比较。

    由于JavaScript这个设计缺陷，不要使用==比较，始终坚持使用===比较。

    另一个例外是NaN这个特殊的Number与所有其他值都不相等，包括它自己：

    NaN === NaN; // false

    唯一能判断NaN的方法是通过isNaN()函数：

    isNaN(NaN); // true

    最后要注意浮点数的相等比较：

    1 / 3 === (1 - 2 / 3); // false

    这不是JavaScript的设计缺陷。浮点数在运算过程中会产生误差，因为计算机无法精确表示无限循环小数。要比较两个浮点数是否相等，只能计算它们之差的绝对值，看是否小于某个阈值：

    Math.abs(1 / 3 - (1 - 2 / 3)) < 0.0000001; // true

    2.4 严格检查模式

    "use strict" 指令在 JavaScript 1.8.5 (ECMAScript5) 中新增。

    严格模式下你不能使用未声明的变量。

    JavaScript在设计之初，为了方便初学者学习，并不强制要求用var申明变量。这个设计错误带来了严重的后果：如果一个变量没有通过var申明就被使用，那么该变量就自动被申明为全局变量：

    在同一个页面的不同的JavaScript文件中，如果都不用var申明，恰好都使用了变量i，将造成变量i互相影响，产生难以调试的错误结果。

    使用var申明的变量则不是全局变量，它的范围被限制在该变量被申明的函数体内（函数的概念将稍后讲解），同名变量在不同的函数体内互不冲突。

    为了修补JavaScript这一严重设计缺陷，ECMA在后续规范中推出了strict模式，在strict模式下运行的JavaScript代码，强制通过var申明变量，未使用var申明变量就使用的，将导致运行错误。

    启用strict模式的方法是在JavaScript代码的第一行写上：

    'use strict';

    3. 数据类型详解

    3.1 字符串

    简单字符串：用''或""括起来的字符表示。

    多行字符串：由于多行字符串用 写起来比较费事，所以最新的ES6标准新增了一种多行字符串的表示方法，用反引号 * ... * 表示：

    `这是一个
多行
字符串`;

    模版字符串：如果有很多变量需要连接，用+号就比较麻烦。ES6新增了一种模板字符串，表示方法和上面的多行字符串一样，但是它会自动替换字符串中的变量：

    var name = '小明';
var age = 20;
var message = `你好, ${name}, 你今年${age}岁了!`;
alert(message);

    重要函数的使用：toUpperCase、toLowerCase、indexOf、charAt()、substring、concat()、lastIndexOf()、match()、replace()、split()、slice()、trim()...

    var x = "JohnJohn";              // x 是字符串
y = x.charAt(2); // h
y = x.charCodeAt(2); // 104
y = x.concat(y, y); // JohnJohn104104, x+y+y
y = x.indexOf('h'); // 2, 索引从0开始
y = x.lastIndexOf('h'); // 6
y = x.slice();
y = x.split('o'); //J,hnJ,hn
y = x.substr(2); // hnJohn
y = x.substring(2,4) // hn，[2,3]
y = x.toLocaleLowerCase(); // johnjohn,小写
y = x.toLocaleUpperCase(); // JOHNJOHN,大写
y = x.toString(); // 转成Stirng
y = x.toUpperCase(); // JOHNJOHN,大写
y = x.trim(); // JohnJohn,去除两端的空格
y = x.valueOf(); // 返回某个字符串对象的原始值

    3.2 数组

    JavaScript的Array可以包含任意数据类型，并通过索引来访问每个元素。

    要取得Array的长度，直接访问length属性。

    请注意，直接给Array的length赋一个新的值会导致Array大小的变化。

    Array可以通过索引把对应的元素修改为新的值，因此，对Array的索引进行赋值会直接修改这个Array。

    请注意，如果通过索引赋值时，索引超过了范围，同样会引起Array大小的变化。

    大多数其他编程语言不允许直接改变数组的大小，越界访问索引会报错。然而，JavaScript的Array却不会有任何错误。在编写代码时，不建议直接修改Array的大小，访问索引时要确保索引不会越界。

    var arr = [1, 2, 3];
arr.length; // 3
arr.length = 6;
arr; // arr变为[1, 2, 3, undefined, undefined, undefined]
arr.length = 2;
arr; // arr变为[1, 2]

    重要函数的使用：indexOf、slice()、push和pop、unshift和shift、sort、reverse、splice、concat、join、...

    [10, 20, 1, 2].sort(); // [1, 10, 2, 20]
//`Array`的`sort()`方法默认把所有元素先转换为String再排序，结果'10'排在了'2'的前面，因为字符'1'比字符'2'的ASCII码小。

    多维数组：

    'use strict';
var arr = [[1, 2, 3], [400, 500, 600], '-'];

    3.3 对象

    JavaScript的对象是一种无序的集合数据类型，它由若干键值对组成。

    由于JavaScript的对象是动态类型，你可以自由地给一个对象添加或删除属性：

    var xiaoming = {
    name: '小明'
};
xiaoming.age; // undefined
xiaoming.age = 18; // 新增一个age属性
xiaoming.age; // 18
delete xiaoming.age; // 删除age属性
xiaoming.age; // undefined
delete xiaoming['name']; // 删除name属性
xiaoming.name; // undefined
delete xiaoming.school; // 删除一个不存在的school属性也不会报错

    //如果我们要检测xiaoming是否拥有某一属性，可以用in操作符：
var xiaoming = {
    name: '小明',
    birth: 1990,
    school: 'No.1 Middle School',
    height: 1.70,
    weight: 65,
    score: null
};
'name' in xiaoming; // true
'grade' in xiaoming; // false

//不过要小心，如果in判断一个属性存在，这个属性不一定是xiaoming的，它可能是xiaoming继承得到的：
'toString' in xiaoming; // true

//因为toString定义在object对象中，而所有对象最终都会在原型链上指向object，所以xiaoming也拥有toString属性。

//要判断一个属性是否是xiaoming自身拥有的，而不是继承得到的，可以用hasOwnProperty()方法：
xiaoming.hasOwnProperty('name'); // true
xiaoming.hasOwnProperty('toString'); // false

    3.4 流程控制

    3.4.1、条件判断
    var age = 3;
if (age >= 18) {
    alert('adult');
} else if (age >= 6) {
    alert('teenager');
} else {
    alert('kid');
}
    3.4.2、循环

    JavaScript的循环有两种，一种是for循环，另一种是while循环

    var arr = ['Apple', 'Google', 'Microsoft'];
var i, x;
for (i=0; i<arr.length; i++) {
    x = arr[i];
    console.log(x);
}
//for循环的3个条件都是可以省略的，如果没有退出循环的判断条件，就必须使用break语句退出循环，否则就是死循环。
//for循环的一个变体是for ... in循环，它可以把一个对象的所有属性依次循环出来：
var o = {
    name: 'Jack',
    age: 20,
    city: 'Beijing'
};
for (var key in o) {
    console.log(key); // 'name', 'age', 'city'
}

//要过滤掉对象继承的属性，用hasOwnProperty()来实现：
var o = {
    name: 'Jack',
    age: 20,
    city: 'Beijing'
};
for (var key in o) {
    if (o.hasOwnProperty(key)) {
        console.log(key); // 'name', 'age', 'city'
    }
}
//请注意，for ... in对Array的循环得到的是String而不是Number。

//while循环
var x = 0;
var n = 99;
while (n > 0) {
    x = x + n;
    n = n - 2;
}
x; // 2500

//do ... while循环
var n = 0;
do {
    n = n + 1;
} while (n < 100);
n; // 100
//用do { ... } while()循环要小心，循环体会至少执行1次，而for和while循环则可能一次都不执行。

    3.5 Map和Set

    Map和Set是ES6标准新增的数据类型:

    1. Map是一组键值对的结构，具有极快的查找速度。
    2. Set和Map类似，也是一组key的集合，但不存储value。由于key不能重复，所以，在Set中，没有重复的key。

    3.6 iterator

    遍历Array可以采用下标循环，遍历Map和Set就无法使用下标。为了统一集合类型，ES6标准引入了新的iterable类型，Array、Map和Set都属于iterable类型，具有iterable类型的集合可以通过新的for ... of循环来遍历。

    for ... of循环是ES6引入的新的语法。

    var a = ['A', 'B', 'C'];
var s = new Set(['A', 'B', 'C']);
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
for (var x of a) { // 遍历Array
    console.log(x);
}
for (var x of s) { // 遍历Set
    console.log(x);
}
for (var x of m) { // 遍历Map
    console.log(x[0] + '=' + x[1]);
}

    4. 函数及面向对象

    4.1 函数定义及变量作用域

    两种定义函数的方式：

    //第一种
function abs(x) {
    if (x >= 0) {
        return x;
    } else {
        return -x;
    }
}
//第二种
var abs = function (x) {
    if (x >= 0) {
        return x;
    } else {
        return -x;
    }
};

    调用函数：

    abs(10); // 返回10
abs(-9); // 返回9
由于JavaScript允许传入任意个参数而不影响调用，因此传入的参数比定义的参数多也没有问题，虽然函数内部并不需要这些参数：
abs(10, 'blablabla'); // 返回10
abs(-9, 'haha', 'hehe', null); // 返回9
传入的参数比定义的少也没有问题：
abs(); // 返回NaN,此时abs(x)函数的参数x将收到undefined，计算结果为NaN。

    arguments

    JavaScript还有一个免费赠送的关键字arguments，它只在函数内部起作用，并且永远指向当前函数的调用者传入的所有参数。

    由于JavaScript函数允许接收任意个参数，于是我们就不得不用arguments来获取所有参数。

    ES6标准引入了rest参数，多余的参数以数组形式交给变量rest。

    function foo(a, b, ...rest) {
    console.log('a = ' + a);
    console.log('b = ' + b);
    console.log(rest);
}

foo(1, 2, 3, 4, 5);
// 结果:
// a = 1
// b = 2
// Array [ 3, 4, 5 ]

foo(1);
// 结果:
// a = 1
// b = undefined
// Array []

    变量作用域：

    如果一个变量在函数体内部申明，则该变量的作用域为整个函数体，在函数体外不可引用该变量；

    如果两个不同的函数各自申明了同一个变量，那么该变量只在各自的函数体内起作用。换句话说，不同函数内部的同名变量互相独立，互不影响；

    由于JavaScript的函数可以嵌套，此时，内部函数可以访问外部函数定义的变量，反过来则不行；

    JavaScript的函数在查找变量时从自身函数定义开始，从“内”向“外”查找。如果内部函数定义了与外部函数重名的变量，则内部函数的变量将“屏蔽”外部函数的变量。

    不在任何函数内定义的变量就具有全局作用域。实际上，JavaScript默认有一个全局对象window，全局作用域的变量实际上被绑定到window的一个属性；全局变量会绑定到window上，不同的JavaScript文件如果使用了相同的全局变量，或者定义了相同名字的顶层函数，都会造成命名冲突，并且很难被发现。减少冲突的一个方法是把自己的所有变量和函数全部绑定到一个全局变量中。例如：

    // 唯一的全局变量MYAPP:
var MYAPP = {};

// 其他变量:
MYAPP.name = 'myapp';
MYAPP.version = 1.0;

// 其他函数:
MYAPP.foo = function () {
    return 'foo';
};

    把自己的代码全部放入唯一的名字空间MYAPP中，会大大减少全局变量冲突的可能。

    许多著名的JavaScript库都是这么干的：jQuery，YUI，underscore等等。

    为了解决块级作用域，ES6引入了新的关键字let，用let替代var可以申明一个块级作用域的变量。

    ES6标准引入了新的关键字const来定义常量，const与let都具有块级作用域。

    解构赋值：把一个数组的元素分别赋值给几个变量：

    let [x, [y, z]] = ['hello', ['JavaScript', 'ES6']];
x; // 'hello'
y; // 'JavaScript'
z; // 'ES6'

    4.2 方法

    绑定到对象上的函数称为方法，和普通函数也没啥区别，但是它在内部使用了一个this关键字，这个东东是什么？

    在一个方法内部，this是一个特殊变量，它始终指向当前对象，也就是xiaoming这个变量。所以，this.birth可以拿到xiaoming的birth属性。

    var xiaoming = {
    name: '小明',
    birth: 1990,
    age: function () {
        var y = new Date().getFullYear();
        return y - this.birth;
    }
};

xiaoming.age; // function xiaoming.age()
xiaoming.age(); // 今年调用是25,明年调用就变成26了
//拆开来写
function getAge() {
    var y = new Date().getFullYear();
    return y - this.birth;
}

var xiaoming = {
    name: '小明',
    birth: 1990,
    age: getAge
};

xiaoming.age(); // 25, 正常结果
getAge(); // NaN
//如果以对象的方法形式调用，比如xiaoming.age()，该函数的this指向被调用的对象，也就是xiaoming，这是符合我们预期的。
//如果单独调用函数，比如getAge()，此时，该函数的this指向全局对象，也就是window。

    apply:控制this的指向的

    function getAge() {
    var y = new Date().getFullYear();
    return y - this.birth;
}

var xiaoming = {
    name: '小明',
    birth: 1990,
    age: getAge
};

xiaoming.age(); // 25
getAge.apply(xiaoming, []); // 25, this指向xiaoming, 参数为空

    4.3 闭包

    4.4 箭头函数

    ES6标准新增了一种新的函数：Arrow Function（箭头函数）。

    x => x * x
//上面的箭头函数相当于：
function (x) {
    return x * x;
}

    箭头函数相当于匿名函数，并且简化了函数定义。箭头函数有两种格式，一种像上面的，只包含一个表达式，连{ ... }和return都省略掉了。还有一种可以包含多条语句，这时候就不能省略{ ... }和return：

    // 两个参数:
(x, y) => x * x + y * y

// 无参数:
() => 3.14

// 可变参数:
(x, y, ...rest) => {
    var i, sum = x + y;
    for (i=0; i<rest.length; i++) {
        sum += rest[i];
    }
    return sum;
}

    4.5 generator

    generator（生成器）是ES6标准引入的新的数据类型。一个generator看上去像一个函数，但可以返回多次。

    generator和函数不同的是，generator由function*定义（注意多出的*号），并且，除了return语句，还可以用yield返回多次。

    function* foo(x) {
    yield x + 1;
    yield x + 2;
    return x + 3;
}
//编写一个产生斐波那契数列的函数，可以这么写：
function fib(max) {
    var
        t,
        a = 0,
        b = 1,
        arr = [0, 1];
    while (arr.length < max) {
        [a, b] = [b, a + b];
        arr.push(b);
    }
    return arr;
}

// 测试:
fib(5); // [0, 1, 1, 2, 3]
fib(10); // [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]
//函数只能返回一次，所以必须返回一个Array。但是，如果换成generator，就可以一次返回一个数，不断返回多次。用generator改写如下：
function* fib(max) {
    var
        t,
        a = 0,
        b = 1,
        n = 0;
    while (n < max) {
        yield a;
        [a, b] = [b, a + b];
        n ++;
    }
    return;
}
//直接调用试试：
fib(5); // fib {[[GeneratorStatus]]: "suspended", [[GeneratorReceiver]]: Window}
//直接调用一个generator和调用函数不一样，fib(5)仅仅是创建了一个generator对象，还没有去执行它。

//调用generator对象有两个方法，一是不断地调用generator对象的next()方法：
var f = fib(5);
f.next(); // {value: 0, done: false}
f.next(); // {value: 1, done: false}
f.next(); // {value: 1, done: false}
f.next(); // {value: 2, done: false}
f.next(); // {value: 3, done: false}
f.next(); // {value: undefined, done: true}
//next()方法会执行generator的代码，然后，每次遇到yield x;就返回一个对象{value: x, done: true/false}，然后“暂停”。返回的value就是yield的返回值，done表示这个generator是否已经执行结束了。如果done为true，则value就是return的返回值。
//当执行到done为true时，这个generator对象就已经全部执行完毕，不要再继续调用next()了。

//第二个方法是直接用for ... of循环迭代generator对象，这种方式不需要我们自己判断done：
for (var x of fib(10)) {
    console.log(x); // 依次输出0, 1, 1, 2, 3, ...
}

    generator和普通函数相比，有什么用？

    因为generator可以在执行过程中多次返回，所以它看上去就像一个可以记住执行状态的函数，利用这一点，写一个generator就可以实现需要用面向对象才能实现的功能。例如，用一个对象来保存状态，得这么写：

    var fib = {
    a: 0,
    b: 1,
    n: 0,
    max: 5,
    next: function () {
        var
            r = this.a,
            t = this.a + this.b;
        this.a = this.b;
        this.b = t;
        if (this.n < this.max) {
            this.n ++;
            return r;
        } else {
            return undefined;
        }
    }
};
用对象的属性来保存状态，相当繁琐。

generator还有另一个巨大的好处，就是把异步回调代码变成“同步”代码。这个好处要等到后面学了AJAX以后才能体会到。

    4.6 创建对象

    JavaScript的面向对象编程和大多数其他语言如Java、C#的面向对象编程都不太一样。如果你熟悉Java或C#，很好，你一定明白面向对象的两个基本概念：

    1. 类：类是对象的类型模板，例如，定义Student类来表示学生，类本身是一种类型，Student表示学生类型，但不表示任何具体的某个学生；
    2. 实例：实例是根据类创建的对象，例如，根据Student类可以创建出xiaoming、xiaohong、xiaojun等多个实例，每个实例表示一个具体的学生，他们全都属于Student类型。

    所以，类和实例是大多数面向对象编程语言的基本概念。

    不过，在JavaScript中，这个概念需要改一改。JavaScript不区分类和实例的概念，而是通过原型（prototype）来实现面向对象编程。

    原型是指当我们想要创建xiaoming这个具体的学生时，我们并没有一个Student类型可用。那怎么办？恰好有这么一个现成的对象：

    var Student = {
    name: 'Robot',
    height: 1.2,
    run: function () {
        console.log(this.name + ' is running...');
    }
};

var xiaoming = {
    name: '小明'
};

xiaoming.__proto__ = Student;//把xiaoming的原型指向了对象Student，看上去xiaoming仿佛是从Student继承下来的
xiaoming.name; // '小明'
xiaoming.run(); // 小明 is running...

    JavaScript的原型链和Java的Class区别就在，它没有“Class”的概念，所有对象都是实例，所谓继承关系不过是把一个对象的原型指向另一个对象而已。

    JavaScript对每个创建的对象都会设置一个原型，指向它的原型对象。

    当我们用obj.xxx访问一个对象的属性时，JavaScript引擎先在当前对象上查找该属性，如果没有找到，就到其原型对象上找，如果还没有找到，就一直上溯到Object.prototype对象，最后，如果还没有找到，就只能返回undefined。

    var arr = [1, 2, 3];
//其原型链是：
arr ----> Array.prototype ----> Object.prototype ----> null

function foo() {
    return 0;
}
//其原型链是：
foo ----> Function.prototype ----> Object.prototype ----> null

    4.7 原型继承

    在传统的基于Class的语言如Java、C++中，继承的本质是扩展一个已有的Class，并生成新的Subclass。

    由于这类语言严格区分类和实例，继承实际上是类型的扩展。但是，JavaScript由于采用原型继承，我们无法直接扩展一个Class，因为根本不存在Class这种类型。

    // PrimaryStudent构造函数:
function PrimaryStudent(props) {
    Student.call(this, props);
    this.grade = props.grade || 1;
}

// 空函数F:
function F() {
}

// 把F的原型指向Student.prototype:
F.prototype = Student.prototype;

// 把PrimaryStudent的原型指向一个新的F对象，F对象的原型正好指向Student.prototype:
PrimaryStudent.prototype = new F();

// 把PrimaryStudent原型的构造函数修复为PrimaryStudent:
PrimaryStudent.prototype.constructor = PrimaryStudent;

// 继续在PrimaryStudent原型（就是new F()对象）上定义方法：
PrimaryStudent.prototype.getGrade = function () {
    return this.grade;
};

// 创建xiaoming:
var xiaoming = new PrimaryStudent({
    name: '小明',
    grade: 2
});
xiaoming.name; // '小明'
xiaoming.grade; // 2

// 验证原型:
xiaoming.__proto__ === PrimaryStudent.prototype; // true
xiaoming.__proto__.__proto__ === Student.prototype; // true

// 验证继承关系:
xiaoming instanceof PrimaryStudent; // true
xiaoming instanceof Student; // true

    JavaScript的原型继承实现方式就是：

    1. 定义新的构造函数，并在内部用call()调用希望“继承”的构造函数，并绑定this；
    2. 借助中间函数F实现原型链继承，最好通过封装的inherits函数完成；
    3. 继续在新的构造函数的原型上定义新方法。

    4.8 class继承

    JavaScript的对象模型是基于原型实现的，特点是简单，缺点是理解起来比传统的类－实例模型要困难，最大的缺点是继承的实现需要编写大量代码，并且需要正确实现原型链。

    有没有更简单的写法？有！

    新的关键字class从ES6开始正式被引入到JavaScript中。class的目的就是让定义类更简单。

    function Student(name) {
    this.name = name;
}

Student.prototype.hello = function () {
    alert('Hello, ' + this.name + '!');
}
//用新的class关键字来编写Student，可以这样写：
class Student {
    constructor(name) {
        this.name = name;
    }

    hello() {
        alert('Hello, ' + this.name + '!');
    }
}

class PrimaryStudent extends Student {
    constructor(name, grade) {
        super(name); // 记得用super调用父类的构造方法!
        this.grade = grade;
    }

    myGrade() {
        alert('I am at grade ' + this.grade);
    }
}

    ES6引入的class和原有的JavaScript原型继承有什么区别呢？

    实际上它们没有任何区别，class的作用就是让JavaScript引擎去实现原来需要我们自己编写的原型链代码。简而言之，用class的好处就是极大地简化了原型链代码。

    5.常用对象

    在JavaScript的世界里，一切都是对象。

    但是某些对象还是和其他对象不太一样。为了区分对象的类型，我们用typeof操作符获取对象的类型，它总是返回一个字符串：

    typeof 123; // 'number'
typeof NaN; // 'number'
typeof 'str'; // 'string'
typeof true; // 'boolean'
typeof undefined; // 'undefined'
typeof Math.abs; // 'function'
typeof null; // 'object'
typeof []; // 'object'
typeof {}; // 'object'

    总结一下，有这么几条规则需要遵守：

    • 不要使用new Number()、new Boolean()、new String()创建包装对象；
    • 用parseInt()或parseFloat()来转换任意类型到number；
    • 用String()来转换任意类型到string，或者直接调用某个对象的toString()方法；
    • 通常不必把任意类型转换为boolean再判断，因为可以直接写if (myVar) {...}；
    • typeof操作符可以判断出number、boolean、string、function和undefined；
    • 判断Array要使用Array.isArray(arr)；
    • 判断null请使用myVar === null；
    • 判断某个全局变量是否存在用typeof window.myVar === 'undefined'；
    • 函数内部判断某个变量是否存在用typeof myVar === 'undefined'。

    5.1 Date

    在JavaScript中，Date对象用来表示日期和时间。

    要获取系统当前时间，用：

    var now = new Date();
now; // Wed Jun 24 2015 19:49:22 GMT+0800 (CST)
now.getFullYear(); // 2015, 年份
now.getMonth(); // 5, 月份，注意月份范围是0~11，5表示六月
now.getDate(); // 24, 表示24号
now.getDay(); // 3, 表示星期三
now.getHours(); // 19, 24小时制
now.getMinutes(); // 49, 分钟
now.getSeconds(); // 22, 秒
now.getMilliseconds(); // 875, 毫秒数
now.getTime(); // 1435146562875, 以number形式表示的时间戳

    5.2 JSON

    JSON是JavaScript Object Notation的缩写，它是一种轻量级的数据交换格式，JSON 通常用于服务端向网页传递数据 。。

    在JSON出现之前，大家一直用XML来传递数据。因为XML是一种纯文本格式，所以它适合在网络上交换数据。XML本身不算复杂，但是，加上DTD、XSD、XPath、XSLT等一大堆复杂的规范以后，任何正常的软件开发人员碰到XML都会感觉头大了，最后大家发现，即使你努力钻研几个月，也未必搞得清楚XML的规范。

    终于，在2002年的一天，道格拉斯·克罗克福特（Douglas Crockford）同学为了拯救深陷水深火热同时又被某几个巨型软件企业长期愚弄的软件工程师，发明了JSON这种超轻量级的数据交换格式。

    道格拉斯同学长期担任雅虎的高级架构师，自然钟情于JavaScript。他设计的JSON实际上是JavaScript的一个子集。在JSON中，一共就这么几种数据类型：

    • number：和JavaScript的number完全一致；
    • boolean：就是JavaScript的true或false；
    • string：就是JavaScript的string；
    • null：就是JavaScript的null；
    • array：就是JavaScript的Array表示方式——[]；
    • object：就是JavaScript的{ ... }表示方式。

    以及上面的任意组合。

    并且，JSON还定死了字符集必须是UTF-8，表示多语言就没有问题了。为了统一解析，JSON的字符串规定必须用双引号""，Object的键也必须用双引号""。

    由于JSON非常简单，很快就风靡Web世界，并且成为ECMA标准。几乎所有编程语言都有解析JSON的库，而在JavaScript中，我们可以直接使用JSON，因为JavaScript内置了JSON的解析。

    把任何JavaScript对象变成JSON，就是把这个对象序列化成一个JSON格式的字符串，这样才能够通过网络传递给其他计算机。

    如果我们收到一个JSON格式的字符串，只需要把它反序列化成一个JavaScript对象，就可以在JavaScript中直接使用这个对象了。

    序列化和反序列化:

    'use strict';

var xiaoming = {
    name: '小明',
    age: 14,
    gender: true,
    height: 1.65,
    grade: null,
    'middle-school': '"W3C" Middle School',
    skills: ['JavaScript', 'Java', 'Python', 'Lisp']
};
//序列化：
var s = JSON.stringify(xiaoming);
//JSON.stringify(xiaoming, null, '  ');//要输出得好看一些，可以加上参数，按缩进输出：
console.log(s);
//序列化结果
{
  "name": "小明",
  "age": 14,
  "gender": true,
  "height": 1.65,
  "grade": null,
  "middle-school": ""W3C" Middle School",
  "skills": [
    "JavaScript",
    "Java",
    "Python",
    "Lisp"
  ]
}

//反序列化：直接用JSON.parse()把它变成一个JavaScript对象：
JSON.parse('[1,2,3,true]'); // [1, 2, 3, true]
JSON.parse('{"name":"小明","age":14}'); // Object {name: '小明', age: 14}
JSON.parse('true'); // true
JSON.parse('123.45'); // 123.45

    5.3 RegExp

    正则表达式是一种用来匹配字符串的强有力的武器。它的设计思想是用一种描述性的语言来给字符串定义一个规则，凡是符合规则的字符串，我们就认为它“匹配”了，否则，该字符串就是不合法的。

    • 用d可以匹配一个数字，w可以匹配一个字母或数字，.可以匹配任意字符；
    • 要匹配变长的字符，在正则表达式中，用*表示任意个字符（包括0个），用+表示至少一个字符，用?表示0个或1个字符，用{n}表示n个字符，用{n,m}表示n-m个字符；
    • ^表示行的开头，^d表示必须以数字开头；
    • $表示行的结束，d$表示必须以数字结束。
    • ...

    6.操作DOM元素

    由于HTML文档被浏览器解析后就是一棵DOM树，要改变HTML的结构，就需要通过JavaScript来操作DOM。

    始终记住DOM是一个树形结构。操作一个DOM节点实际上就是这么几个操作：

    • 更新：更新该DOM节点的内容，相当于更新了该DOM节点表示的HTML的内容；
    • 遍历：遍历该DOM节点下的子节点，以便进行进一步操作；
    • 添加：在该DOM节点下新增一个子节点，相当于动态增加了一个HTML节点；
    • 删除：将该节点从HTML中删除，相当于删掉了该DOM节点的内容以及它包含的所有子节点。

    在操作一个DOM节点前，我们需要通过各种方式先拿到这个DOM节点。最常用的方法是document.getElementById()和document.getElementsByTagName()，以及CSS选择器document.getElementsByClassName()。

    由于ID在HTML文档中是唯一的，所以document.getElementById()可以直接定位唯一的一个DOM节点。document.getElementsByTagName()和document.getElementsByClassName()总是返回一组DOM节点。要精确地选择DOM，可以先定位父节点，再从父节点开始选择，以缩小范围。

    // 返回ID为'test'的节点：
var test = document.getElementById('test');

// 先定位ID为'test-table'的节点，再返回其内部所有tr节点：
var trs = document.getElementById('test-table').getElementsByTagName('tr');

// 先定位ID为'test-div'的节点，再返回其内部所有class包含red的节点：
var reds = document.getElementById('test-div').getElementsByClassName('red');

// 获取节点test下的所有直属子节点:
var cs = test.children;

// 获取节点test下第一个、最后一个子节点：
var first = test.firstElementChild;
var last = test.lastElementChild;

    第二种方法是使用querySelector()和querySelectorAll()，需要了解selector语法，然后使用条件来获取节点，更加方便：

    // 通过querySelector获取ID为q1的节点：
var q1 = document.querySelector('#q1');

// 通过querySelectorAll获取q1节点内的符合条件的所有节点：
var ps = q1.querySelectorAll('div.highlighted > p');

    6.1 更新DOM

    拿到一个DOM节点后，我们可以对它进行更新。

    可以直接修改节点的文本，方法有两种：

    一种是修改innerHTML属性，这个方式非常强大，不但可以修改一个DOM节点的文本内容，还可以直接通过HTML片段修改DOM节点内部的子树：

    // 获取<p id="p-id">...</p>
var p = document.getElementById('p-id');
// 设置文本为abc:
p.innerHTML = 'ABC'; // <p id="p-id">ABC</p>
// 设置HTML:
p.innerHTML = 'ABC <span style="color:red">RED</span> XYZ';
// <p>...</p>的内部结构已修改

    用innerHTML时要注意，是否需要写入HTML。如果写入的字符串是通过网络拿到了，要注意对字符编码来避免XSS攻击。

    第二种是修改innerText或textContent属性，这样可以自动对字符串进行HTML编码，保证无法设置任何HTML标签：

    // 获取<p id="p-id">...</p>
var p = document.getElementById('p-id');
// 设置文本:
p.innerText = '<script>alert("Hi")</script>';
// HTML被自动编码，无法设置一个<script>节点:
// <p id="p-id">&lt;script&gt;alert("Hi")&lt;/script&gt;</p>

    两者的区别在于读取属性时，innerText不返回隐藏元素的文本，而textContent返回所有文本。另外注意IE<9不支持textContent。

    6.2 插入DOM

    当我们获得了某个DOM节点，想在这个DOM节点内插入新的DOM，应该如何做？

    如果这个DOM节点是空的，例如，<div></div>，那么，直接使用innerHTML = 'child'就可以修改DOM节点的内容，相当于“插入”了新的DOM节点。

    如果这个DOM节点不是空的，那就不能这么做，因为innerHTML会直接替换掉原来的所有子节点。

    有两个办法可以插入新的节点。一个是使用appendChild，把一个子节点添加到父节点的最后一个子节点。例如：

    <!-- HTML结构 -->
<p id="js">JavaScript</p>
<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
</div>

    把JavaScript添加到``的最后一项：

    var
    js = document.getElementById('js'),
    list = document.getElementById('list');
list.appendChild(js);

    现在，HTML结构变成了这样：

    <!-- HTML结构 -->
<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
    <p id="js">JavaScript</p>
</div>

    因为我们插入的js节点已经存在于当前的文档树，因此这个节点首先会从原先的位置删除，再插入到新的位置。

    更多的时候我们会从零创建一个新的节点，然后插入到指定位置：

    var
    list = document.getElementById('list'),
    haskell = document.createElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
list.appendChild(haskell);

    这样我们就动态添加了一个新的节点：

    <!-- HTML结构 -->
<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
    <p id="haskell">Haskell</p>
</div>

    动态创建一个节点然后添加到DOM树中，可以实现很多功能。举个例子，下面的代码动态创建了一个节点，然后把它添加到节点的末尾，这样就动态地给文档添加了新的CSS定义：

    var d = document.createElement('style');
d.setAttribute('type', 'text/css');
d.innerHTML = 'p { color: red }';
document.getElementsByTagName('head')[0].appendChild(d);

    可以在Chrome的控制台执行上述代码，观察页面样式的变化。

    insertBefore

    如果我们要把子节点插入到指定的位置怎么办？可以使用parentElement.insertBefore(newElement, referenceElement);，子节点会插入到referenceElement之前。

    还是以上面的HTML为例，假定我们要把Haskell插入到Python之前：

    <!-- HTML结构 -->
<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
</div>

    可以这么写：

    var
    list = document.getElementById('list'),
    ref = document.getElementById('python'),
    haskell = document.createElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
list.insertBefore(haskell, ref);

    新的HTML结构如下：

    <!-- HTML结构 -->
<div id="list">
    <p id="java">Java</p>
    <p id="haskell">Haskell</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
</div>

    可见，使用insertBefore重点是要拿到一个“参考子节点”的引用。很多时候，需要循环一个父节点的所有子节点，可以通过迭代children属性实现：

    var
    i, c,
    list = document.getElementById('list');
for (i = 0; i < list.children.length; i++) {
    c = list.children[i]; // 拿到第i个子节点
}

    6.3 删除DOM

    要删除一个节点，首先要获得该节点本身以及它的父节点，然后，调用父节点的removeChild把自己删掉：

    // 拿到待删除节点:
var self = document.getElementById('to-be-removed');
// 拿到父节点:
var parent = self.parentElement;
// 删除:
var removed = parent.removeChild(self);
removed === self; // true

    注意到删除后的节点虽然不在文档树中了，但其实它还在内存中，可以随时再次被添加到别的位置。

    当你遍历一个父节点的子节点并进行删除操作时，要注意，children属性是一个只读属性，并且它在子节点变化时会实时更新。

    例如，对于如下HTML结构：

    <div id="parent">
    <p>First</p>
    <p>Second</p>
</div>

    当我们用如下代码删除子节点时：

    var parent = document.getElementById('parent');
parent.removeChild(parent.children[0]);
parent.removeChild(parent.children[1]); // <-- 浏览器报错

    浏览器报错：parent.children[1]不是一个有效的节点。原因就在于，当First节点被删除后，parent.children的节点数量已经从2变为了1，索引[1]已经不存在了。

    因此，删除多个节点时，要注意children属性时刻都在变化。

    7.操作BOM元素

    JavaScript可以获取浏览器提供的很多对象，并进行操作。

    7.1 window

    window对象不但充当全局作用域，而且表示浏览器窗口。

    window对象有innerWidth和innerHeight属性，可以获取浏览器窗口的内部宽度和高度。内部宽高是指除去菜单栏、工具栏、边框等占位元素后，用于显示网页的净宽高。

    7.2 navigator

    navigator对象表示浏览器的信息，最常用的属性包括：

    • navigator.appName：浏览器名称；
    • navigator.appVersion：浏览器版本；
    • navigator.language：浏览器设置的语言；
    • navigator.platform：操作系统类型；
    • navigator.userAgent：浏览器设定的User-Agent字符串。

    请注意，navigator的信息可以很容易地被用户修改，所以JavaScript读取的值不一定是正确的。正确的方法是充分利用JavaScript对不存在属性返回undefined的特性，直接用短路运算符||计算：

    var width = window.innerWidth || document.body.clientWidth;

    7.3 screen

    screen对象表示屏幕的信息，常用的属性有：

    • screen.width：屏幕宽度，以像素为单位；
    • screen.height：屏幕高度，以像素为单位；
    • screen.colorDepth：返回颜色位数，如8、16、24。

    7.4 location

    location对象表示当前页面的URL信息。

    用location.属性获得URL各个部分的值
location.href;//"https://www.liaoxuefeng.com/wiki/1022910821149312/1023022272084160"
location.protocol; // 'http'
location.host; // 'www.example.com'
location.port; // '8080'
location.pathname; // '/path/index.html'
location.search; // '?a=1&b=2'
location.hash; // 'TOP'

    要加载一个新页面，可以调用location.assign()。如果要重新加载当前页面，调用location.reload()方法非常方便。

    7.5 Document

    document对象表示当前页面。由于HTML在浏览器中以DOM形式表示为树形结构，document对象就是整个DOM树的根节点。

    document的title属性是从HTML文档中的xxx读取的，但是可以动态改变：

    7.6 History

    history对象保存了浏览器的历史记录，JavaScript可以调用history对象的back()或forward ()，相当于用户点击了浏览器的“后退”或“前进”按钮。

    这个对象属于历史遗留对象，对于现代Web页面来说，由于大量使用AJAX和页面交互，简单粗暴地调用history.back()可能会让用户感到非常愤怒。

    新手开始设计Web页面时喜欢在登录页登录成功时调用history.back()，试图回到登录前的页面。这是一种错误的方法。

    任何情况，你都不应该使用history这个对象了。

    7.7 操作表单

    用JavaScript操作表单和操作DOM是类似的，因为表单本身也是DOM树。

    不过表单的输入框、下拉框等可以接收用户输入，所以用JavaScript来操作表单，可以获得用户输入的内容，或者对一个输入框设置新的内容。

    HTML表单的输入控件主要有以下几种：

    • 文本框，对应的<input type="text">，用于输入文本；
    • 口令框，对应的<input type="password">，用于输入口令；
    • 单选框，对应的<input type="radio">，用于选择一项；
    • 复选框，对应的<input type="checkbox">，用于选择多项；
    • 下拉框，对应的<select>，用于选择一项；
    • 隐藏文本，对应的<input type="hidden">，用户不可见，但表单提交时会把隐藏文本发送到服务器。

    获取值

    如果我们获得了一个``节点的引用，就可以直接调用value获得对应的用户输入值：

    // <input type="text" id="email">
var input = document.getElementById('email');
input.value; // '用户输入的值'

    设置值

    设置值和获取值类似，对于text、password、hidden以及select，直接设置value就可以：

    // <input type="text" id="email">
var input = document.getElementById('email');
input.value = 'test@example.com'; // 文本框的内容已更新

    对于单选框和复选框，设置checked为true或false即可。

    HTML5控件

    HTML5新增了大量标准控件，常用的包括date、datetime、datetime-local、color等，它们都使用``标签：

    <input type="date" value="2015-07-01">
<input type="datetime-local" value="2015-07-01T02:03:04">
<input type="color" value="#ff0000">

    提交表单

    JavaScript可以以两种方式来处理表单的提交（AJAX方式在后面章节介绍）。

    方式一是通过<form>元素的submit()方法提交一个表单，例如，响应一个<button>的click事件，在JavaScript代码中提交表单：

    <!-- HTML -->
<form id="test-form">
    <input type="text" name="test">
    <button type="button" onclick="doSubmitForm()">Submit</button>
</form>

<script>
function doSubmitForm() {
    var form = document.getElementById('test-form');
    // 可以在此修改form的input...
    // 提交form:
    form.submit();
}
</script>

    这种方式的缺点是扰乱了浏览器对form的正常提交。浏览器默认点击<button type="submit">时提交表单，或者用户在最后一个输入框按回车键。

    第二种方式是响应``本身的onsubmit事件，在提交form时作修改：

    <!-- HTML -->
<form id="test-form" onsubmit="return checkForm()">
    <input type="text" name="test">
    <button type="submit">Submit</button>
</form>

<script>
function checkForm() {
    var form = document.getElementById('test-form');
    // 可以在此修改form的input...
    // 继续下一步:
    return true;
}
</script>

    注意要return true来告诉浏览器继续提交，如果return false，浏览器将不会继续提交form，这种情况通常对应用户输入有误，提示用户错误信息后终止提交form。

    在检查和修改<input>时，要充分利用<input type="hidden">来传递数据。

    7.8 操作文件

    在HTML表单中，可以上传文件的唯一控件就是<input type="file">。

    注意：当一个表单包含<input type="file">时，表单的enctype必须指定为multipart/form-data，method必须指定为post，浏览器才能正确编码并以multipart/form-data格式发送表单的数据。

    出于安全考虑，浏览器只允许用户点击<input type="file">来选择本地文件，用JavaScript对<input type="file">的value赋值是没有任何效果的。当用户选择了上传某个文件后，JavaScript也无法获得该文件的真实路径。

    通常，上传的文件都由后台服务器处理，JavaScript可以在提交表单时对文件扩展名做检查，以便防止用户上传无效格式的文件：

    var f = document.getElementById('test-file-upload');
var filename = f.value; // 'C:fakepath	est.png'
if (!filename || !(filename.endsWith('.jpg') || filename.endsWith('.png') || filename.endsWith('.gif'))) {
    alert('Can only upload image file.');
    return false;
}

    File API

    由于JavaScript对用户上传的文件操作非常有限，尤其是无法读取文件内容，使得很多需要操作文件的网页不得不用Flash这样的第三方插件来实现。

    随着HTML5的普及，新增的File API允许JavaScript读取文件内容，获得更多的文件信息。

    HTML5的File API提供了File和FileReader两个主要对象，可以获得文件信息并读取文件。

    var
    fileInput = document.getElementById('test-image-file'),
    info = document.getElementById('test-file-info'),
    preview = document.getElementById('test-image-preview');
// 监听change事件:
fileInput.addEventListener('change', function () {
    // 清除背景图片:
    preview.style.backgroundImage = '';
    // 检查文件是否选择:
    if (!fileInput.value) {
        info.innerHTML = '没有选择文件';
        return;
    }
    // 获取File引用:
    var file = fileInput.files[0];
    // 获取File信息:
    info.innerHTML = '文件: ' + file.name + '<br>' +
                     '大小: ' + file.size + '<br>' +
                     '修改: ' + file.lastModifiedDate;
    if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
        alert('不是有效的图片文件!');
        return;
    }
    // 读取文件:
    var reader = new FileReader();
    reader.onload = function(e) {
        var
            data = e.target.result; // 'data:image/jpeg;base64,/9j/4AAQSk...(base64编码)...'            
        preview.style.backgroundImage = 'url(' + data + ')';
    };
    // 以DataURL的形式读取文件:
    reader.readAsDataURL(file);
});

    上面的代码演示了如何通过HTML5的File API读取文件内容。以DataURL的形式读取到的文件是一个字符串，类似于data:image/jpeg;base64,/9j/4AAQSk...(base64编码)...，常用于设置图像。如果需要服务器端处理，把字符串base64,后面的字符发送给服务器并用Base64解码就可以得到原始文件的二进制内容。

    回调

    上面的代码还演示了JavaScript的一个重要的特性就是单线程执行模式。在JavaScript中，浏览器的JavaScript执行引擎在执行JavaScript代码时，总是以单线程模式执行，也就是说，任何时候，JavaScript代码都不可能同时有多于1个线程在执行。

    你可能会问，单线程模式执行的JavaScript，如何处理多任务？

    在JavaScript中，执行多任务实际上都是异步调用，比如上面的代码：

    reader.readAsDataURL(file);

    就会发起一个异步操作来读取文件内容。因为是异步操作，所以我们在JavaScript代码中就不知道什么时候操作结束，因此需要先设置一个回调函数：

    reader.onload = function(e) {
    // 当文件读取完成后，自动调用此函数:
};

    当文件读取完成后，JavaScript引擎将自动调用我们设置的回调函数。执行回调函数时，文件已经读取完毕，所以我们可以在回调函数内部安全地获得文件内容。

    同步和异步

    同步：阻塞，当前进程运行，必须等前一个进程运行完毕以后，才能运行。

    异步：非阻塞，当前程序运行，和前面程序的运行没有任何关系。
    ajax：异步的javascript和xml（数据传输）

    ajax是前后端数据交互的搬运工，都可以异步执行

    xml数据传输格式，主要用于大型的门户网站，比如新浪、网易、凤凰网

    优点：

    1. 种类丰富，可以自定义标签
    2. 传输量非常大


    缺点：
    1. 解析麻烦
    2. 不太适合轻量级传输

    json数据传输格式(字符串的一种格式)，主要用于移动端应用

    优点：

    1. 轻量级数据
    2. 解析比较轻松
    缺点：

    1. 数据种类比较少
    2. 传输数据量比较小
  • 相关阅读:
    企业应用的互联网化
    企业应用开发平台GAP平台
    技术有什么用？
    Samba服务器配置
    IT从业人员需要知道的10个小秘密
    在雪豹10.6.2（Mac OS X）上安装Oracle10g
    项目经理的职责
    通过堡垒机远程连接Windows Server
    MySQL：Data truncated for column 'last_apply_time' at row 1
    当有莫名其妙的错误里, 可以
  • 原文地址：https://www.cnblogs.com/smalldong/p/14466549.html
Copyright © 2011-2022 走看看