JavaScript【进阶篇】

前端 JavaScript

1. 数据类型

1.1 分类

JS属于弱类型语言，命名时无需指定数据类型。含六种数据类型：五种原始类型以及object：

• number
• string
• boolean
• null
• undefined
• object (Function, Array, Date, RegExp)

1.2. 隐式转换

1.2.1. 用+/-可以隐式转换数据类型（number <-> string）

// string → number
str - '';
// number → string
num + '';

1.2.2. 用连等赋值将产生全局变量

// 可实现a、b赋值为1，但b赋值后为全局变量；不推荐；
var a = b = 1;
// 推荐写法；
var a = 1, 
    b = 1;
// 或者：
var a = 1;
var b = 1;

1.3. 类型检测

1.3.0. 用严格等于判断数据是否全等

严格等于：===，必须在数据类型全等的情况下才返回true。
注意：NaN ≠ NaN、[] ≠ []、{} ≠ {}，即NaN === NaN、[] === []、{} === {}均将返回false。

1.3.1. typeof

用法：typeof obj，返回obj的类型字符串。
注意：typeof null; typeof Array;均将返回object。

1.3.2. instanceof

用法：obj instanceof Object，返回obj是否为Object的布尔值。

1.3.3. Object.prototype.toString.apply/call()

用法：Object.prototype.toString.apply(obj)，返回obj的类型字符串。

或者（进阶用法）：

用法：getType(obj)

function getType(obj){
    return Object.prototype.toString.call(obj).slice(8,-1)
}

2. 表达式与运算符

2.1. 表达式

• 原始表达式：常量、直接量、关键字、变量；
• 复合表达式：原始表达式的复合；
• 初始化表达式：数组（如：[1,2]、[1,,2]）、对象(如：{x=1,y=2})的初始化表达式；
• 函数表达式：var fn = function() {};或者(function() {})();；
• 属性访问表达式：obj.prop;或者obj['prop'];；
• 调用表达式：fn();；
• 对象创建表达式：new Object;；

2.2. 运算符

• 赋值运算符、比较运算符、算术运算符、逻辑运算符、字符串运算符
• 位运算符：作用于32位数字；
• 特殊运算符
  
  • 条件运算符：? :；
  • 逗号运算符：,；
  • delete 运算符：delete删除对象属性，使之为undefined；
  • in 运算符：判断属性值是否属于某个对象；
  • typeof 运算符
  • instanceof 运算符
  • new 运算符
  • this 运算符
  • void 运算符

3. 语句

3.1. try语句

try{
    // 执行；
}catch{
    // 异常处理；
}finally{
    // 不管异常与否均要执行；
}

注意：catch和finally必有其一。

3.2. 严格模式

• 用法：use strict;
• 不允许with语句（with(){}不利于引擎调用、可读性差）；
• 不允许未声明变量被赋值；
• arguments变为参数的静态副本；
• delete参数、函数或不可配置的属性会报错；
• 对象字面量重复属性名报错；
• 禁止八进制字面量；
• eval、arguments不可作为变量或函数名；

4. 对象

4.0. 对象简介

• 对象中属性是无序的；
• 每个属性都有一个字符串key和一个对应的value；
• 对象结构
  
  • 属性
  • 方法
  • 属性标签 (writable, enumerable, configurable, value, get/set)
  • 对象标签 (prototype, class, extensible)；

4.1. 对象创建

4.1.1. 对象字面量

var obj = {
    x:1,
    y:2
};

4.1.2. new构造器/原型链

function fn(){}
var obj = new fn();

有限原型链继承：obj → fn.prototype → Object.prototype → null

• 原型fn默认即带有prototype属性；
• 若定义fn.prototype.z = 1;
  则obj.z = 1;
  而'z' in obj;为真，
  但obj.hasOwnProperty('z');为假；

4.1.3. 由Object.create创建

var obj = Object.create({x:1});

4.2. 属性定义

4.2.1. Object.defineProperty()方法

Object.defineProperty(obj,'prop',{
    writable: true,
    enumerable: true,
    configurable: true,
    value: ''
}); 
// 三个标签默认为false；

4.2.2. Object.defineProperties()方法

Object.defineProperties(obj,{
    prop1: {
        writable: true,
        enumerable: true,
        configurable: true,
        value: ''
    },
    prop2: {
        writable: true,
        value: ''
    }
}); 

4.2.3. 属性判断技巧

// 用于判断，表obj.prop !== undefined || obj.prop !== null
obj.prop != undefined;
// 用于判断，仅表obj.prop !== undefined
obj.prop !== undefined;

4.3. 属性标签

4.3.1. 查看属性标签

Object.getOwnPropertyDescriptor(obj,'prop');

4.3.2. get/set方法

get prop(){
}
set prop(val){
}

4.4. 对象标签

4.4.1. prototype标签

4.4.2. class标签

function getType(obj){
    return Object.prototype.toString.call(obj).slice(8,-1)
}

4.4.3. extensible标签

• Object.preventExtensions(obj)：使对象不可添加新属性；
• Object.isExtensions(obj)：对象是否可添加新的属性；
• Object.seal(obj)：对象的所有属性configurable为false；
• Object.frozen(obj)：对象的所有属性writable、configurable为false；
• 上述四个方法不会影响原型链。

4.5. 对象序列化

// obj → JSON；
JSON.stringify({x:1});
// JSON → obj；
JSON.parse('{"x":1}');

5. 数组

5.1. 数组创建

5.1.1. 字面量创建

var arr = [];

5.1.2. new Array创建

// 按数组长度创建（长度范畴：0 ~ 2^23-1）；
var arr = new Array(1024);
// 按添加内容创建； 
var arr = new Array(1,2,3,4,5);

5.2. 数组增删

5.2.1. 尾部增一位

arr.push(val);
或者：
arr[arr.length] = val;

5.2.2. 头部增一位

arr.unshift(val);

5.2.3. 删特定一位（变其为undefined，长度不变）

delete arr[index];
index in arr; // => false

或者：

arr[index] = undefined;
index in arr; // => true;

5.2.4. 尾部删一位

arr.length -= 1;
或者：
arr.pop();

5.2.5. 头部删一位

arr.shift();

5.3. 数组方法

join()
reverse()
sort()
arr.sort(function(a,b){return a- b;})
concat()
slice()
splice()
forEach()
map()
filter()
every()
some()
reduce()
reduceRight()
indexOf()
lastIndexOf()
Array.isArray(arr);

6. 函数

6.1. 函数创建

6.1.0. 函数创建方式比较

fnOne(); // 下面为函数声明语句，函数可在它之前被调用；
funcion fnOne(){};  
fnTwo(); // 下面为函数表达式，函数不可在它之前被调用；
var fnTwo = funcion(){}

6.1.1. 函数声明

function fn() {}

6.1.2. 函数表达式

A 函数变量表达式

var fnAlias = function(){}

B 立即执行函数表达式 IEF (Immediately Executed Function)

(function(){})()

或者：

!function(){}()

或者：

+function(){}()

C 一级函数表达式

return function() {}

D 命名函数表达式 NFE (Named Function Expression)

var fnAlias = function fn(){}

应用：递归调用

var fnAlias = function fn(){ fn(); }

注意： NFE的兼容性及报错

var fnAlias = function nfe() {};
alert(fnAlias === nfe);
// IE 6-8: false;
// IE 9+, Ch, FF: error.

6.1.3. Function构造器

var fn = new Function();

或者：

var fn = Function();

或者：

Function();

亦支持立即执行：

Funtion()();

6.2. this关键字

6.2.0. this关键字与指向上下文

• this通常指向当前函数的拥有者，即总是指向调用该方法的对象；
• this取决于函数调用的方式；

6.2.1. 全局下或直接调用的函数，this指向全局对象 (JS中是window，node.js中是global)

function fn() {
    console(this);
    // this指代全局对象window或global；
}

注意：严格模式下的函数内调用指向undefined。

6.2.2. 作为对象的方法，this指向对象

var obj = {
    prop: '',
    fn: function () {
        console.log(this.prop);
        // this指向对象obj；
    }
}

或者：

var obj = { prop: '' };
function f() {
    console.log(this.prop);
}
obj.fn = f;
console.log(obj.fn());

6.2.3. 对象原型链上，this指向调用的对象

var obj = {
    fn: function() {
        return this.prop;
    }
}
var p = Object.create(obj);
p.prop = 31;
console.log(p.fn()); // => 31;

6.2.4. 构造器中，this指向对象实例

function Obj() {
    this.prop = '';
    this.fn = function () {
        console.log(this.prop);
    }
    // this指代对象示例Obj；
}
var obj = new Obj();

6.2.5. call()或者apply()方法改变上下文实现继承

var obj = {
    prop: '',
    fn: function() {
        console.log(this.prop);
    }
}
obj.fn();
var o= {
    prop: '',
}
obj.fn.call(o,prop);
// call方法改变上下文，把fn方法中this指向的obj改为指向o；

或者（上述这一调用方法不太友好，亦可用构造函数）：

function Obj() {
    this.prop = '';
    this.fn = function() {
        console.log(this.prop);
    }
}
function OofObj() {
    Obj.call(this.prop);
}
var o = new OofObj();
o.prop();

用法：

function fn(c, d) {
    return this.a + this.b + c + d;
}
var obj = {
    a: 1,
    b: 2
}
fn.call(obj, 3, 4); // => 1 + 2 + 3 + 4
fn.apply(obj, [3,4]);  // => 1 + 2 + 3 + 4

6.2.6. bind()方法进行绑定

function fn() {
    return this.prop;
}
var g = fn.bind({prop:'test'});
console.log(g()); // =>test;
var o = {prop: 31, fn: fn, g: g};
console.log(o.fn(),o.g()); // =>31, 'test'

用法（currying）：

function fn(a, b, c) {
    return a + b + c;
}
var func1 = fn.bind(undefined, 100);
func1(1,2); // => 100 + 1 + 2;
var func2 = func1.bind(undefined, 200);
func1(10); // => 100 + 200 + 10;

bind()是ES 5新特性，兼容性模拟如下：

if (!Function.prototype.bind) {
    Function.prototype.bind = function(oThis) {
        if (typeof this !== 'function') {
            // closest thing possible to the ECMAScript 5
            // internal IsCallable function
            throw new TypeError('What is trying to be bound is not callable');
        }
        var aArgs = Array.prototype.slice.call(arguments, 1),
            fToBind = this,
            fNOP = function() {},
            fBound = function() {
                return fToBind.apply(this instanceof fNOP? this : oThis,
                    aArgs.concat(Array.prototype.slice.call(arguments)));
            };
        fNOP.prototype = this.prototype;
        fBound.prototype = new fNOP();
        return fBound;
    };
}

6.3. arguments关键字

function fn(x,y,z) {
    arguments.length; // 取得实参个数；
}
fn(1,2);
fn.length; // 取得形参个数；

• arguments为类数组，可由arguments[i]改写实参；
• 未绑定实参的变量则不可由arguments[i]改写；
• 严格模式下不可由arguments[i]改写；

6.4. 闭包

6.4.0. 闭包简介

优点：灵活、方便、可封装；
缺点：空间浪费、内存泄露、性能消耗；

6.4.1. 闭包应用

避免提升：

for (var i = 1; i < 4; i++) {
    !function(i) {
        console.log(i); // 1, 2, 3
    }(i);
}

封装变量：

(function() {
    var _userId = 31;
    var _typeId = 'item';
    var export = {};
    function converter(userId) {
        return +userId;
    }
    export.getUserId = function() {
        return converter(_userId);
    }
    export.getTypeId = function() {
        return _typeId;
    }
    window.export = export;
}());
export.getUserId(); // 31
export.getTypeId(); // item
export._userId; // undefined
export._typeId; // undefined
export.converter; // undefined

6.5. 作用域

作用域链：

function outer2() {
    var local2 = 1;
    function outer1() {
        var local1 = 1;
        // visit local1, local2 or global3
    }
    outer1();
}
var global3 = 1;
outer2();

注意：

function outer() {
    var i = 1;
    var func = new Function("console.log(typeof i);");
    func(); // =>undefined
}
outer();

7. 面向对象编程

7.1. 基于原型链的继承示例

7.1.1. 继承方法探究

Student.prototype = Person.prototype; // 不推荐使用，同步机制；

或者：

Student.prototype = new Person(); // 不推荐使用，传参不明；

或者：

Student.prototype = Object.create(Person.prototype);
Person.prototype.constructor = Person;

7.1.2. Object.create()兼容性模拟

if (!Object.create) {
    Object.create = function(proto){
        function F(){};
        F.prototype = proto;
        return new F
    };
}

7.1.3. 子类原型修改

• 新增Student.prototype.prop将直接作用于现有对象实例中；
• 直接修改Student.prototype不会影响已创建的对象实例，但会影响新创建的对象示例。

7.2. 模拟重载实现示例

7.3. 调用子类示例

7.4. 链式调用示例

8. 正则表达式

8.1. 正则使用方法

/abc/gim.test('abc');
或者：
RegExp('abc','gim').test('abc');

8.2. 正则匹配一览表

8.3. 正则匹配参数

g：global，全局匹配；
i：ignoreCase，不区分大小写；
m：multiline，跨行匹配；

8.4. 正则属性及方法

8.4.1. 正则表达式属性

• global
• ignoreCase
• multiline
• source：返回正则表达式；

8.4.2. 正则表达式方法

• exec()：返回匹配内容；
• test()：返回匹配结果；
• toString()
• compile()

附：参考

慕课：JS深入浅出