《JavaScript编程精粹》——函数篇

最新推荐文章于 2020-12-19 18:57:20 发布
最新推荐文章于 2020-12-19 18:57:20 发布
阅读量495 收藏 1
点赞数
分类专栏： 临时学JS 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xubaifu1997/article/details/78442684
版权

函数对象

  • JavaScript中函数就是对象
  • 函数对象连接的原型是Function.prototype
  • 函数在创建时也有一个prototype，其拥有一个constructor属性，值是一个函数

函数显式创建

  • 普通函数function funcName( /*参数*/ ) { /*代码*/ }
  • 匿名函数function ( /*参数*/ ) { /*代码*/ }

调用

  • 每个函数会接受两个附加的参数
    • this
      • this的值取决于调用的模式
    • arguments
      • 调用函数时参数的集合，实参和形参的个数不匹配时不会报错，如果参数值过多，超出的参数值会被忽略，反之，没有被赋值的参数默认为undefined
  • 四种调用模式
    • 方法调用模式
      • 将函数保存为一个对象的属性，也称为方法，该方法被调用时，this被绑定到该对象
    • 函数调用模式
      • 该函数不是一个对象的属性时，其是被当作一个函数来调用的
      • 这种调用模式的this自始至终都与全局对象Window绑定（这是一个坑，请看代码注释）
    • 构造器调用模式
      • 在函数前带一个new来调用，即new 函数名()
      • 背后会创建一个对象，作为该函数prototype成员的新对象，this也是绑定到这个对象
      • new前缀会改变return语句的行为
    • Apply调用模式
      • JavaScript是一门函数式编程语言，所以可以拥有方法
      • apply方法接收两个参数
        1. 要绑定给this的值
        2. 参数数组
/**
 *  方法调用模式: 将函数保存为一个对象的属性，也称为方法，该方法被调用时，this被绑定到该对象
 */

var myObject = {
    value: 0,
    //increment是对象myObject的一个属性，也是一个函数
    increment: function () {
        //此处的this等同于对象myObject，即绑定
        this.value += 1;
        return this.value;
    }
};

myObject.increment();//方法调用


/**
 *  函数调用模式: 
 *              该函数不是一个对象的属性时，其是被当作一个函数来调用的
 *              这种调用模式下的被调用函数的this自始至终都与全局对象Window绑定
 */
function add(val1, val2) {
    return val1 + val2;
}

var myObject1 = {
    value: 1,
    /* 错误示范 */
    double: function () {
        var helper = function () {
            //此处的this并不是与myObject1绑定，而是Window，所以并没有改变myObject1的value
            this.value = add(this.value, this.value);
        };

        //函数调用模式，helper函数的this是全局对象
        helper();
    },

    /* 修正后 */
    double_fixed: function () {
        //double_fixed是以方法模式调用的，所以this与myObject1绑定，可以用于操作myObject1的属性
        var that = this;

        var helper = function () {
            //注意这是that不是this
            that.value = add(that.value, that.value);
        };

        //函数调用模式
        helper();
    }
};

myObject1.double();
console.log(myObject1.value); //值是1

myObject1.double_fixed();
console.log(myObject1.value); //值是2


/**
 *  构造器调用模式: 
 *              在函数前带一个new来调用，即new 函数名()
 *              背后会创建一个对象，作为该函数prototype成员的新对象，this也是绑定到这个对象
 *              new前缀会改变return语句的行为（不过构造器一般没有返回值）
 */

var Quo = function (string) {
    this.status = string;

    // return new Boolean(false); new前缀会导致new Quo('confused)返回的是一个Boolean对象而不是Quo
}

Quo.prototype.get_status = function () {
    return this.status;
}

//构造一个Quo实例
var myQuo = new Quo('confused');
//console.log(myQuo);
console.log(myQuo.get_status()); //值是confused


/**
 *  Apply调用模式: 
 *              在函数前带一个new来调用，即new 函数名()
 *              背后会创建一个对象，作为该函数prototype成员的新对象，this也是绑定到这个对象
 *              new前缀会改变return语句的行为（不过构造器一般没有返回值）
 */

function mul(val1, val2) {
    return val1 * val2;
}

var array = [3, 4];
var mul = mul.apply(null, array); //类似mul(3, 4)

console.log(mul); //值为12

//关于第一个参数的用法

var appObject = function () {};
appObject.prototype.get_money = function () {
    return this.money;
}

var moneyObject = {
    money: 1024
};

var money = appObject.prototype.get_money.apply(moneyObject);

console.log(money); //值为1024，即moneyObject的money成了appObject的属性，所以调用get_money时获取到了1024

参数arguments

  • 可以理解为可变参数，接受任意多个参数
  • 无论有没有形参，接收的参数在arguments都可以找到
var sum = function (arg1, arg2) {
    console.log(arg1); //值是1
    console.log(arg2); //值是2
    var i, sum = 0;
    for (i = 0; i < arguments.length; i += 1) {
        sum += arguments[i];
    }
    return sum;
};

console.log(sum(1, 2, 3, 4, 5)); //值是15

扩充类型

JavaScript允许给语言的基本类型扩充功能，如之前的通过prototype添加方法，例子

Function.prototype.method = function (name, func) {
    //基本类型的原型是公用结构，确保没有该方法时才添加
    if (!this.prototype[name]) {
        this.prototype[name] = func;
    }
    return this;
}


//给整数类型添加取整
Number.method('integer', function () {
    return Math[this < 0 ? 'ceil' : 'floor'](this);
});

console.log((3.3).integer()) //3
console.log((-3.3).integer()) //-3

作用域

var a = 3;
var foo = function () {
    var a = 4,//当foo被调用时，这里的a覆盖3
        b = 5;
    var bar = function () {
        var b = 7,//当bar被调用时，这里的b覆盖5
            c = 11;
        a += b + c; //a = 4 b = 7 c = 11
    };
    bar();
    console.log(a); //值为22
};
foo();

闭包

  • 内部函数可以访问外部函数的参数和变量
    • 但不包括this和arguments，就像之前看到的，在外部函数里以函数调用模式调用内部函数，内部函数的this是全局对象
    • 内部函数拥有自己的arguments，所以无法[直接访问]外部函数的arguments，可以间接访问
  • 外部函数的作用域对其他程序不可见
  • 正面例子
//此处直接运行匿名函数: (function(){}())
//所以myObject是return返回的一个对象而不是一个函数
var myObject = (function () {
    var value = 0;
    return {
        increment: function (inc) {
            //访问外部函数的value
            value += 1;
        },
        getValue: function () {
            //访问外部函数的value
            return value;
        }
    };
}());

console.log(myObject.value); //undefined  ===>  无法直接访问到value
console.log(myObject.getValue()); //值为1
myObject.increment();
console.log(myObject.getValue()); //值为2



//关于之前利用prototype添加get_status方法的改善
//之前的做法 quo.prototype.get_status = function () {};
//现在的做法
var quo = function (status) {
    return {
        get_status: function () {
            return status;
        }
    };
};
var myQuo = quo("amazed"); //利用闭关可以避免使用new创建对象
console.log(myQuo.get_status()); //值为amazed
  • 反面例子
//这个函数原来预期每个节点被点击时显示不同的编号
//但实际上所有的值都是nodes.length
//因为onclick是直接访问外部的i，而不是复制i变量
//循环结束后，i = nodes.length，所以onclick访问i时值都是nodes.length
var add_the_handlers = function (nodes) {
    var i;
    for (i = 0; i < nodes.length; i += 1) {
        nodes[i].onclick = function (e) {
            alert(i);
        };
    }
};
  • 改良例子
var add_the_handlers_fixed = function (nodes) {
    var i;

    //i是形参，所以每次调用都有一个新的i被保留起来
    //返回结果是点击事件需要的函数，利用闭包可以访问外部变量，直接alert(i)
    var helper = function (i) {
        return function (e) {
            alert(i);
        };
    };

    for (i = 0; i < nodes.length; i += 1) {
        nodes[i].onclick = helper(i);
    }

}

模块化

这是利用闭包实现的模块化，如果有Java经验就会发现，这等同于将成员变量私有化

/*
 * 这个实现避免了seq和prefix成为全局变量
 */

var serial_maker = function () {
    var prefix = ''; //私有化，外部无法访问
    var seq = 0;

    return {
        set_prefix: function (p) {
            prefix = String(p);
        },
        set_seq: function (s) {
            seq = s;
        },
        gensym: function () {
            var result = prefix + seq;
            seq += 1;
            return result;
        }
    }
};

var seqer = serial_maker();
seqer.set_prefix('Q');
seqer.set_seq(1000);

console.log(seqer.gensym()); //Q1000
console.log(seqer.gensym()); //Q1001

级联

在修改某些属性令方法返回this，得以继续操作对象

var myObject = function () {
    var value = 0;
    return {
        init: function () {
            value = 20;
            return this;
        },
        add: function (val) {
            //延伸问题：如果形参是value，与外部的value同名，那么该如何访问外部的value？
            value += val;
            return this;
        },
        increment: function () {
            value += 1;
            return this;
        },
        getValue: function () {
            return value;
        }
    }
};
var obj = myObject();
var value = obj.init().add(1).add(2).increment().add(6).getValue();
console.log(value); //值为30

柯里化

第一次接触柯里化懵懵懂懂，柯里化函数就是将每次调用时的参数与原函数结合起来，产生了一个已有参数，又可以接收更多参数的函数，用以继续调用。这是非常浅的理解了。

Function.prototype.method = function (name, func) {
    //基本类型的原型是公用结构，确保没有该方法时才添加
    if (!this.prototype[name]) {
        this.prototype[name] = func;
    }
    return this;
}

function add() {
    var sum = 0;
    for (var i = 0; i < arguments.length; i += 1) {
        sum += arguments[i];
    }
    return sum;
}

Function.method('curry', function () {
    var slice = Array.prototype.slice,
        args = slice.apply(arguments),
        that = this;
    return function () {
        return that.apply(null, args.concat(slice.apply(arguments)));
    };
});

//add1已有参数1
var add1 = add.curry(1);
//add1已有参数1,2
add1 = add1.curry(2);
console.log(add1(2)); //值是5

记忆

将函数先前运算的结果保留，避免重复运算。这是一种思想，不是JavaScript特有的，在算法中称为动态规划。

/* 重复运算版本 */
var fibonacci = function (n) {
    if (n < 2) {
        return n;
    }
    return fibonacci(n - 1) + fibonacci(n - 2);
}

var fibonacci_cache = function () {
    var memo = [0, 1];
    var fib = function (n) {
        //如果memo[n]不是未定义，说明已经有结果，无需再次运算
        var result = memo[n];
        if (typeof result !== 'number') {
            result = fib(n - 1) + fib(n - 2);
            memo[n] = result;
        }
        return result;
    };
    return fib;
}();


console.log(fibonacci(5));
console.log(fibonacci_cache(6));
Xu_Cat
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
《JavaScript语言精粹》
Gyoung杨广
12-23 1286
《JavaScript语言精粹》
JavaScript语言精粹完整版
12-19
JavaScript语言精粹完整版，想要提升的朋友有福了。
JavaScript语言精粹.pdf
10-27
JavaScript语言精粹,跟其他js书籍不一样的是不会去关注DOM BOM这些东西，本书专注于JS本身，把JS这门语言中的一些“糟粕”给读者剖析出来，层层深入，本书一定要看。【高清pdf】
JavaScript编程精粹
光剑书架上的书
08-20 8457
JavaScript编程精粹 第 1 章　JavaScript入门 第 2 章　函数、闭包与模块 第 3 章　数据结构及相关操作 第 4 章　面向对象的JavaScript 第 5 章　JavaScript模式 第 6 章　测试与调试 第 7 章　ECMAScript 6 第 8 章　DOM操作与事件 第 9 章　服务器端JavaScript ...
《JavaScript编程精粹》——对象篇
薛定谔的猫窝
11-03 400
检索 利用||填充对象的默认值 var status = res['status'] || 'unkown' 如果res[‘status’]是undefined那么status的值就是’unkown’ 利用&&避免TypeError错误 如果flight.equipment已经是undefiled 我们想获取flight.equipment.model就会报TypeError错误 利用fligh
JavaScript 语言精粹
03-13
此外，《JavaScript语言精粹》还会深入讨论作用域、变量提升、this关键字、事件处理、DOM操作以及异步编程，如回调函数、Promise和async/await。这些知识点对于前端开发人员来说至关重要，因为它们直接影响到网页的...
《JavaScript语言精粹》PDF高清扫描版
12-23
根据提供的文件信息，我们可以推断出这是一本关于JavaScript编程语言的专业书籍——《JavaScript语言精粹》，该书提供了PDF高清扫描版本。接下来，我们将从以下几个方面深入探讨与这本书相关的知识点： ### 一、...
JavaScript语言精粹_修订版【高清】带书签 PDF
05-16
在更高级的主题中，书中可能会涵盖闭包——JavaScript中的一个强大特性，允许函数访问和修改外部作用域的变量，即使在其所在的函数已经执行完毕后。还有原型和原型链，这是JavaScript实现继承的主要方式，理解它们...
JavaScript语言精粹.修订版---高清版.pdf
06-30
修订版---高清版.pdf”主要聚焦于JavaScript编程语言的核心概念和技术要点。虽然给出的部分内容链接重复且未提供实际的书籍摘要或章节概述，但我们可以基于标题、描述和标签推测该书可能涵盖的关键知识点进行深入...
众妙之门——JavaScript与jQuery技术精粹
11-03
《众妙之门——JavaScript与jQuery技术精粹》是一本由Smashing Magazine出版的高端IT图书，它汇聚了全球顶尖网站设计专家的经验与智慧，旨在深入解析JavaScript和jQuery的关键技术，帮助读者提升在网页设计与开发中...
编程精粹.pdf
01-11
编程精粹.pdf
《JavaScript 编程精粹》JavaScript入门（一）
weixin_34087503的博客
03-31 96
1. 常量 可以使用const关键字创建只读的命名常量。常量名必须以字母、下划线或美元符开头，余下的部分可以包含字母、数字或下划线字符： const area_code = '515'; 不能通过赋值或重新声明来修改常量的值，常量必须被初始化成一个值。 JavaScript支持以下标准类型： Number（数值） String（字符串） Boolean（布尔） S...
javascript语言精粹 微盘_JavaScript语言精粹（修订版）pdf
weixin_39957265的博客
12-19 545
摘要“学习、理解、实践大师的思想，我们才有可能站在巨人的肩上，才有机会赶超大师，这本书就是开始。”“这是一本介绍JavaScript语言本质的重要书籍，值得任何正在或者想从事JavaScript开发的人阅读，并且非常需要反复阅读。”“如果说犀牛展现了 JavaScript 特性的丰富和功能的强大，蝴蝶(书)则完美诠释了 JavaScript 语言轻巧简洁的特点。”“它是一本很好的帮助你提高 Jav...
JavaScript语言精粹》(JavaScript: The Good Parts) 中文版PDF
weixin_30815427的博客
12-02 435
好书推荐： JavaScript语言精粹》(JavaScript: The Good Parts) 中文版PDF http://xidong.net/File001/File_58146.html 内容简介 javascript曾是“世界上最被误解的语言”，因为它担负太多的特性，包括糟糕的交互和失败的设计，但随着Ajax的到来，javascript“从最受误解的编程语言演变为最流行的...
JavaScript语言精粹-读书笔记（1）
MichaelAn的博客
05-30 746
JS 语言精粹 蝴蝶书 这本书需要基本的JS基础和一定的经验。第一次看感觉很普通，工作一段时间后发现这本书很多细节很重要。这本书基于 ECMA3版本写的，现在已经普遍使用ECMA6版本，所以部分知识需要更新。 原作者电子书网址：https://www.crockford.com/books.html 第一张 精华 JS 语言的特殊性造成了精华和糟粕并存，所以我们要合理使用这部分内容 第二章 语法 ...
《JavaScript语言精粹》笔记（内附《JavaScript语言精粹》百度云下载链接）
IT_10的博客
07-31 9846
章节：3.4 引用 【P22（页码）】 知识点：对象通过引用来传递，它们永远不会被传递 var a_obj={a:1}; var b_obj=a_obj;//b_obj是a_obj的引用 b_obj.a=2; console.log(a_obj.a);//2 章节：3.5 原型 【P22】 知识点：每个对象都连接到一个原型对象，并且它可以从中继承属性。原型连接在更新时是不起作用的，...
python 3.5实现gif缩小并打包成exe
Blue White的博客
10-14 592
表情包泛滥的今天，有时候困于动图太大，发到微信或者QQ上太占屏幕空间，因此想着使用缩小一下，于是用python写了个脚本，并基于pyqt5写了个简单的界面。 缩小前： 缩小后： 不过工具没那么健壮，没检查一些异常，凑合用一下吧，哈哈~ 下载链接：gif缩小工具 ...
JavaScript语言精粹（修订版）
云计算?
10-15 283
JavaScript语言精粹（修订版） （美）克罗克福德（Crockford,D.）著 赵泽欣，鄢学鹍译 ISBN978-7-121-17740-8 2012 年8 月出版 定价：49.00 元 16开 172页 宣传语 深入挖掘JavaScript精华 内 容 简 介 JavaScript 曾是“世界上最被误解的语言”，因为它担负太多的特性，包括糟糕的交互和失败的设...
Javascript：提取 对象的方法作为高阶函数的参数 要注意的
王亮的专栏
04-30 992
//提取对象的方法作为函数 var buffer = { entries:[], add:function(s) { this.entries.push(s); }, concat: function() { return this.entries.join(""); } }; function a(fn,a){ fn
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值