js知识总结—理论知识篇(二)

1. 数据和行为分离（OOP是把数据和行为打包）
2. 不可修改性（immutability。OOP以及面向过程编程很多时候都会对内存状态进行修改，比如给变量或成员重新赋值、往一个集合里添加/删除数据等，FP不允许这么干）
3. 一等公民是函数（函数可以赋值给变量，可以当参数传递，函数的返回值可以是函数。OOP里的一等公民只有对象）
4. 闭包

函数式编程的优势：

1. 并行：纯函数无需任何修改即可并行执行。
2. 无副作用：不会修改全局变量和引用变量，不会干扰其他程序。
3. 更容易测试：函数式程序的 bug 不依赖于与任何与其无关的代码，你遇到的问题就总是可以再现。我们可以使用不同的上下文对纯函数进行单元测试。
4. 引用透明性：如果一个函数对于相同的输入始终产生相同的结果，那么它可以看作透明的。
5. 不可变性：只要参数不变，返回值永远不变
6. 高内聚低耦合：函数是一阶公民。函数可以作为参数或返回值。我们可以组合不同的函数来创建具有新行为的新函数。

6.JS函数柯里化

柯里化（Currying）是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术。

// 普通的add函数
function add(x, y) {
    return x + y
}

// Currying后
function curryingAdd(x) {
    return function (y) {
        return x + y
    }
}

add(1, 2)           // 3
curryingAdd(1)(2)   // 3

Currying有哪些好处

① 提高复用率

// 正常正则验证字符串 reg.test(txt)

// 函数封装后
function check(reg, txt) {
    return reg.test(txt)
}

check(/\d+/g, 'test')       //false
check(/[a-z]+/g, 'test')    //true

// Currying后
function curryingCheck(reg) {
    return function(txt) {
        return reg.test(txt)
    }
}

var hasNumber = curryingCheck(/\d+/g)
var hasLetter = curryingCheck(/[a-z]+/g)

hasNumber('test1')      // true
hasNumber('testtest')   // false
hasLetter('21212')      // false

② 提前确认

var on = function(element, event, handler) {
    if (document.addEventListener) {
        if (element && event && handler) {
            element.addEventListener(event, handler, false);
        }
    } else {
        if (element && event && handler) {
            element.attachEvent('on' + event, handler);
        }
    }
}

// 提前确认调用哪个方法，不用每次调用都判断
var on = (function() {
    if (document.addEventListener) {
        return function(element, event, handler) {
            if (element && event && handler) {
                element.addEventListener(event, handler, false);
            }
        };
    } else {
        return function(element, event, handler) {
            if (element && event && handler) {
                element.attachEvent('on' + event, handler);
            }
        };
    }
})();

③ 延迟运行

Function.prototype.bind = function (context) {
    var _this = this,args = Array.from(arguments).slice(1)
    return function() {
        return _this.apply(context, args)
    }
}

7.立即执行函数的作用

作用：

1. 不必为函数命名，避免了污染全局变量
2. 立即执行函数内部形成了一个单独的作用域，可以封装一些外部无法读取的私有变量
3. 立即执行函数执行完后就立刻被销毁，避免常驻内存。（所以命名的立即执行函数外部无法访问，实际情况是已被销毁）

(function foo() {
    console.log(123);
})();
//已被销毁，所以访问不到。所以一般用匿名函数
foo();  // ReferenceError: foo is not defined

// 要访问自执行函数的执行结果
var num = (function (a, b) {
    return a + b;
})(1, 2);

//其实这种写法不用括号把函数包起来也是可以的
var num = function (a, b) {
    return a + b;
}(1, 2);
//在执行赋值操作的时候，上面的代码已经变成了一个表达式，而 JavaScript 解释器认为 函数表达式 是可以直接被执行的。

// 如果要再次访问自执行函数，需要将其作为返回值
// 这时就不能用匿名函数了
var num = (function aaa(a, b) {
    console.log(a+b)
    return aaa
})(1, 2);
num(3,4)
num(3,4)(5,6)

// 利用arguments.callee方法返回当前函数用于访问自执行函数
// 这样免得给匿名函数命名
// 但arguments相关的方法在严格模式下会报错
var num = (function(a, b) {
    console.log(a+b)
    return arguments.callee
})(1, 2);

使用场景：

1. 立即执行函数执行完后就立刻被销毁，所以如果函数只被执行一次的时候就可以将其换成立即执行函数。
2. 创建独立作用域，避免变量干扰。
3. 用于初始化方法（数据初始化）。可避免内部变量污染全局。
4. 可以用来封装一些插件、轮子、方法。

ES6中，块级作用域已经可以取代立即执行函数。可以将需要立即执行的代码放到花括号{}中。

8.定时器的最小间隔（延迟）时间

HTML5标准规定

• setTimeout的最短时间间隔是4毫秒；
• setInterval的最短间隔时间是10毫秒，也就是说，小于10毫秒的时间间隔会被调整到10毫秒