前端——语言——Core JS——《The good part》读书笔记—

本章介绍Function对象，它是JS语言最复杂的内容。

Java语言中没有Function对象，而是普通的方法，它的概念也比较简单，包含方法的重载，重写，方法签名，形参，实参等。

JS语言中的Function对象，它扮演了很多的角色，而且这些角色并不是互斥的。

当Function角色为普通方法时，它包括参数，上下文，返回值，异常处理等内容。是Function的基础。
当Function角色为构造器时，需要深入理解原型链的概念，这是实现继承的基石。
当Function角色为命名空间时，需要深入理解函数的作用域，这是实现封装的基石。
当Function角色为变量时，它可以作为参数，赋值给变量，也可以作为对象的属性。它赋予函数灵活多变的特点。
当Function角色为普通对象时，它也拥有方法，属性。

深入理解这些角色，学习好Function是编写优秀程序的前提。据不完全统计，Function使用率非常高，80%的程序都会用到。

本章的内容可以分为三类知识点

Function对象

基础：字面量，组成部分，调用方式，参数，上下文，返回值，异常处理。
概念：prototype，作用域，闭包，添加自定义方法，立即执行函数表达式（本书未提及），模块化。
思想：递归，回调，级联，切面（curry），备忘（memoization）。

书籍的原始结构如下：

第一小节介绍Function对象
第二小节介绍字面量以及Function的组成部分
第三小节介绍Function的调用方式
第四小节介绍参数
第五小节介绍返回值
第六小节介绍异常处理
第七小节添加自定义方法
第八小节介绍递归
第九小节介绍Function的作用域
第十小节介绍闭包
第十一小节介绍模块化
第十二小节介绍级联(cascade)
第十四小节介绍代理(curry)
第十五小节介绍备忘(memoization)

　　本章的内容比较长，但也没有办法，毕竟Function是JS语言的基石。

Function对象

Function对象拥有自己的属性和方法，方法包括bind，从Object继承而来的方法，例如toString。

属性包括arguments，caller，callee，prototype。

arguments：Function的参数，在参数部分介绍
caller：Function的调用对象。
callee：Function本身
prototype：Function的prototype属性。重点内容。

prototype属性

　　每个Function对象的产生都会同时创建一个Prototype对象，可以通过prototype属性访问该对象，Prototype对象只有一个属性constructor，它的值为Function本身。而其他对象创建时，不会创建Prototype对象，也不会拥有prototype属性。

　　最容易混淆的概念是Prototype对象与对象原型链之间的关系。在学习之前一直以为它们是同一个对象，但是其实并不是。以下分几种情况来介绍Prototype对象与原型链

当通过字面量方式创建对象，创建function，

obj.prototype属性不存在，返回undefined，
Object.getPrototypeOf(obj) === Object.prototype，返回true。

当为function时，

test.prototype属性存在，它是Prototype对象，该对象只有一个属性constructor，指向自身。

Object.getPrototypeOf(test) === Function.prototype，返回true。
Object.getPrototypeOf(test) === test.prototype，返回false。

　　2.当通过new方式创建对象，假定此时test为构造器函数。

Obj.prototype属性不存在，返回undefined

Object.getPrototypeOf(obj) === test.prototype，返回true。

可以看到对象Object无论使用什么方式创建，它都是不存在prototype属性的，而Function对象总是存在prototype属性，该属性值为对象，该对象只有一个属性constructor，值为Function自身。

　　当通过构造器test创建对象时，它的原型链对象为test.prototype。它的prototype属性还是undefined。

　　代码示例如下：

function test() {

    /**

     * 创建test函数时，同时创建prototype对象，该对象拥有属性constructor

     * 值为test

     */

    console.log(test.prototype);

    // 返回true

    console.log(test.prototype.constructor === test);

    // 创建对象时，不会创建prototype对象，它的值为undefined

    var obj = {};

    // 返回undefined

    console.log(obj.prototype);

}

访问属性

参考对象的访问属性过程，上述对象的原型链如下

字面量对象的原型链：obj---->Object.prototype---->null
构造器方法的原型链：obj--->test.prototype---->Object.prototype---->null
Function的原型链：test----->Function.prototype----->Object.prototype--->null

组成部分

定义函数的语法格式为：function name(args) { return expression;}

第一部分为function关键字，它是固定的，而且是必须存在的。在ES6中新语法中不在存在这些约束。
第二部分为func的名称，当function为变量时，func的名称是可选的，如果不存在，为变量的名称，属性的名称。当function为构造器时，func的名称首字母必须大写，它是一种约定俗成的规则，不是大写也是可以的。当function为其他类型时，func的名称是必须存在的。
第三部分为参数，JS中不限定参数的类型和个数。
第四部分为函数体，由0到N条的statements语句组成，如果有返回值，必须存在return语句，此时expression必须与return在同一行，如果无返回值，有两种情况，一种是有return语句无expression，另外一种是根本无return语句。

调用方式

书中介绍的Function调用方式有四种。个人理解它的调用方式与它扮演的角色有关。

当Function扮演的角色是构造器时，此时调用方式必须通过new关键字，不使用new关键也可以调用构造器，但是this关键字会指向全局对象，而不是构造器的新对象，这会导致错误。
当Function扮演的角色是变量时，此时调用的方式为obj.func()，当obj为全局对象时，可以省略。
当Function扮演的角色是普通方法时，可以直接通过func调用。
任何的func都是Function对象的实例，都适用于Function.prototype中的apply，call方法。

参数

JS的参数不限制参数的类型和个数。在编写参数时，通常会考虑以下几种情形。

保证参数是必填的，处理方式有两种

若参数没有传入，直接抛出异常
若参数没有传入，设置默认值，在ES6的新语法中已支持。

保证参数的类型，处理方式有

判断基本数据类型，使用typeof，判断数组使用isArray，判断Function，使用$.isFunction，判断对象，使用class属性。

　　保证参数的个数，当入参少于参数个数时，多余参数的值设置为undefined，当入参大于参数个数时，多余的入参被忽略。处理方式有

使用arguments对象，它本质是一个”array-like”对象，length为入参的个数，属性名为入参的索引值，属性值为入参的值。

可变长参数，处理方式有

ES6的新语法，三个dot号，和Java的语法相同
将变量封装为对象，动态的给对象添加属性。

返回值

Func的返回值比较简单。

当有返回值时，必定存在return语句，return后面的值为函数的返回值，它可以是任意的对象，数组，Function，表达式等等。
当无返回值时，存在两种情形，一种是有return语句，无value和expression，另外一种是无return语句。

异常处理

Func的异常处理使用try catch。Catch的入参为Object，至少包含name或type属性，描述异常的类型，message，描述异常的信息。

添加自定义方法

JS的对象是基于原型链，添加自定义方法，本质是给原型链添加自定义方法。格式有以下几种。

将prototype重新指向一个新对象，并将constructor属性设置为Function
在原有的prototype上添加方法
使用extend方法，格式为$.extends(prototype对象，newObj)；

function Person(name,age){

    this.name = name;

    this.age = age;

}

// 第一种方式,指向新对象

Person.prototype = {

    constructor:Person,

    method1:function(){},

    method2:function(){}

}

// 第二种方式，利用原有的prototype

Person.prototype.method3 = function () {

};

Person.prototype.method4 = function () {

}

// 第三种方式,extends方法

$.extend(Person.prototype,{

    method5:function(){

    }

});

递归

本小节通过JSON组织树形结构的数据，并演示如何遍历该树形结构。

数据

　　它的代码为：

var node = {

    name: "A",

    children: [{

        name: "B",

        children: [{

            name: "D"

        }, {

            name: "E"

        }]

    }, {

        name: "C",

        children: [{

            name: "F"

        }, {

            name: "G"

        }]

    }]

};

格式为：

中序遍历

/**

 *  中序遍历节点，它的基准条件为节点没有children属性

 *  @param node

 */

function walkTree(node) {

    if (node.children === undefined) {

        console.log(node.name);

    } else {

        var left = node.children[0];

        var right = node.children[1];

        // 中序遍历的写法

         walkTree(left);

         console.log(node.name);

         walkTree(right);

    }

}}
// 执行结果为DBEAFCG
walkTree(node);

后序遍历

它的执行结果为DEBFGCA

walkTree(left);

walkTree(right);

console.log(node.name);

前序遍历

它的执行结果为ABDECFG

console.log(node.name);

walkTree(left);

walkTree(right);

作用域

函数的作用域是函数扮演命名空间角色的基石，JS语言没有代码块作用域的概念，在ES6中已提供。下面分析函数的作用域

当无嵌套函数时，函数中定义的所有变量都会提升到最开始，在定义之前访问变量时，值为undefined如果函数外部存在同名变量时，外部的同名变量被忽略。
当存在嵌套函数时，嵌套函数可以访问外部函数所有定义的变量，但是this除外，每一个函数都有自己独立的this和arguments对象。

function outerFunc() {

    var a = 3, b = 5;

    var outerThis = this;

    function innerFunc() {

        var b = 7; // 在outerFunc中存在同名的变量,outerFunc中的b被忽略。

        var c = 11;

        var innerThis = this;

        // 此时a的值为21, innerFunc中不存在同名变量，实际是在修改outerFunc中的a

        a += b + c;

        // 返回true,都指向全局对象windows

        console.log(outerThis === innerThis);

    }

    innerFunc();

     // 此时的b为outerFunc中定义的变量，innerFunc中的同名变量不可见，a的值为21，b的值为5

    console.log(a, b);

}

闭包

　　闭包的概念是指函数调用阶段还可以访问函数定义阶段的上下文。

这句话个人理解的意思是，在函数定义时，会同时创建一个prototype对象，在函数调用时，所有函数都公共拥有这个prototype对象，虽然每次调用会创建新的arguments对象，但是不会再次prototype对象。

function testClosure()

{

    var proto = testClosure.prototype;

    var that = this;

    var args = arguments;

    return {

        proto:proto,

        that:that,

        args:args

    }

}

var result1 = testClosure("a","b","c");

var result2 = testClosure.apply("hello World",["a","b","c"]);

// 返回true

console.log(result1.proto === result2.proto);

// 返回false

console.log(result1.that === result2.that);

// 返回false

console.log(result1.args === result2.args);

回调

当文档加载完成之后，JS执行脚本的方式是由事件驱动的，假设同时触发多个事件，由于JS是单线程的，所以无法同时执行多个事件，只能将这些事件加入到队列当中依次执行。

假设事件中存在比较耗时的操作，例如在事件1中存在网络请求，而服务器很久没有响应，此时事件1一直处于等待状态，而整个队列都在等待事件1，整个页面陷入”假死”状态，无法响应新事件。

必须存在一种机制，使得事件1不阻塞整个队列，而当事件1得到服务器响应之后，告知主线程它已经准备就绪。

函数的回调，是指事件在处理到某个阶段时会触发的函数调用。假设事件的处理函数为func1，而被触发的函数调用为method1，那么method1为func1的回调。

　　回调的好处是：

保证了JS主线程不会被耗时的事件阻塞。
回调函数与事件处理器之间形成了是一种事件触发机制，允许用户指定回调函数。例如document，window的onload，ajax的success。

模块化

　　略，在第五章节介绍

级联

函数的级联概念比较简单，是指函数的返回值为调用者本身，达到连续调用方法的目的。在编写脚本时比较容易实现，将this作为返回值即可。

级联只出现在Function角色为变量，而且Function作为属性值时才有意义。当Function扮演其他角色时，无任何意义。

最常见的级联是jQuery。例如$(“#id”).attr(“href”,”www.baidu.com”).css().text(“百度”);

curry

函数的curry概念没有理解，查询过资料，总感觉有点像Java的方法代理，即method--->proxyMethod，proxyMethod内部调用method。

/**

 * 原始方法

 * @param a

 * @param b

 * @param c

 */

function method(a, b, c) {

    console.log(a);

    console.log(b);

    console.log(c);

    return "method1的返回值";

}

/**

 * curry方法,它的返回值为代理方法，将method的参数传递给proxyMethod

 * @param args

 * @returns {function(): void}

 */

function curry(args) {

    // 额外的功能

    return function () {

        return method.apply(null, args);

    }

}

// 代理方法

var proxyMethod = curry(["a", "b", "c"]);

　　method的返回值为proxyMethod的返回值它们之间的关系

curry的参数为method的参数
curry的返回值为proxyMethod
proxyMethod调用了method，并可以访问curry和method的参数。

备忘(memorization)

　　备忘的作用是在递归时通过缓存中间结果，减少了函数的调用。

/**

 * 计算数字的阶层

 * @param n

 */

function fibonacci(n) {

    console.log("调用了函数");

    if (n === 0 || n === 1) {

        return n;

    } else {

        return fibonacci(n - 1) + fibonacci(n - 2);

    }

}

/**

 * 计算数字的阶层，用result缓存结果，所以调用次数大大减少

 * @param n

 * @param result

 * @returns {*}

 */

function cacheFibonacci(n, result) {

    if (!result) result = {};

    console.log("调用了函数");

    if (n === 0 || n === 1) {

        result[n] = n;

        return result[n] === undefined ? n : result[n];

    } else {

        if (result[n - 1] === undefined) {

            result[n - 1] = cacheFibonacci(n - 1, result);

        }

        if (result[n - 2] === undefined) {

            result[n - 2] = cacheFibonacci(n - 2, result);

        }

        return result[n - 1] + result[n - 2];

    }

}

　　至此本篇内容结束