温故而知新篇之《JavaScript忍者秘籍(第二版)学习总结(一)——函数篇

哦哈哈 2020-11-09 16:56:02
javascript 温故而知新 温故 而知 新篇


前言

这篇文章的总结和学习的内容,讲从第三章开始的;整本书学习时间大概是一星期的时间,利用零散的时间其实就可以学习完。
基础知识,是需要不断学习和补充的,如果总用不到的知识,我们就会忘记;加上我不是计算机专业的,所以也一直在努力弥补。

学习的方式

有句古话,“光说不做假把式”;这样就没意思了。
所以还是要敲代码和自己实践,这都是很重要的。

我挺推荐这个微信读书

因为你可以在闲暇时,用手机翻阅,还有读书朗诵的功能;有的时候,我们在看技术书的时候总是在走神。就可以用app的朗诵功能让你更加集中注意力。
image

一定要敲代码!!!!

一定要自己学会总结;这也很重要。好记性不如烂笔头,就是这个道理。

image

JavaScript忍者秘籍第二版的电子版

是epub的版本;《JavaScript忍者秘籍第二版.epub》;阅读电子版是为了更方便 我在电脑上去操作事例的时候更加容易,直接复制出来,打断点。
如果你需要,那么下面就是文档。
image

链接: https://pan.baidu.com/s/1L30_... 密码: n56j


下面就开始我们今天的总结和概况内容。我标题也说,这是重点内容总结,是方便你快速的记忆和回忆知识点,更好的方式还是系统的阅读一遍。

接下来的有些内容,我会直接引入文章的句子,请见怪不怪。
我会按照目录的顺序进行梳理

第3章 新手的第一堂函数课:定义与参数

对象能做的任何一件事,函数也都能做。

函数也是对象,唯一的特殊之处在于它是可调用的(invokable),即函数会被调用以便执行某项动作。

回调函数

function useless(ninjaCallback) {
return ninjaCallback();
}
这个函数可能没什么用,但它反映了函数的一种能力,即将函数作为另一个函数的参数,随后通过参数来调用该函数。

存储函数

var store = {
nextId: 1, //⇽--- 跟踪下一个要被复制的函数
cache: {}, //⇽--- 使用一个对象作为缓存,我们可以在其中存储函数
add: function(fn) {
if (!fn.id) {
fn.id = this.nextId++;
this.cache[fn.id] = fn;
return true;
}
} //⇽--- 仅当函数唯一时,将该函数加入缓存
};
function ninja(){}
assert(store.add(ninja),
"Function was safely added.");
assert(!store.add(ninja),
"But it was only added once."); //⇽--- 测试上面的代码按预期工作
fn.id将会是,传进来fn的唯一标示;如果在传进来相同的函数时,我们会发现这个id是存在的,就不会添加进来。
相当于修改了这个fn函数属性,添加了一个唯一标示ID;
如果是没有加进来的fn,那么就没有这个ID标示。
fn.id = this.nextId++;

函数定义

JavaScript提供了几种定义函数的方式,可以分为5类。

函数声明

 function myFun(){ return 1;}
每个函数声明以 强制性的function开头,其后 紧接着强制性的函数名,以及括号和括号内一列以逗号分隔的可选参数名。
函数声明必须 具有函数名是因为它们是独立语句。一个函数的基本要求是它应该能够被调用,所以它必须 具有一种被引用方式,于是唯一的方式就是通过它的名字

image

函数表达式

var myFun = function (){ return 1;}
JavaScript中的函数是第一类对象,除此以外也就意味着它们可以通过 字面量创建,可以 赋值给变量和属性,可以作为传递给其他函数的参数或函数的返回值。
注意️:
函数声明和函数表达式除了在代码中的位置不同以外,还有一个`更重要的不同点`是:
* 函数声明来说,函数名是强制性的;
* 函数表达式来说,函数名则完全是可选的。
立即函数

image
标准函数的调用和函数表达式的立即调用的对比

注意️:加括号的函数表达式

函数表达式被包裹在一对括号内。为什么这样做呢?

其原因是纯语法层面的。JavaScript解析器必须能够轻易 区分函数声明和函数表达式之间的区别
如果去掉包裹函数表达式的括号,把立即调用作为一个独立语句function() {}(3),JavaScript开始 解析时便会结束,因为这个独立语句以function开头,那么解析器就会认为它在处理一个函数声明。 每个函数声明必须有一个名字(然而这里并没有指定名字),所以程序执行到这里 会报错为了避免错误,函数表达式要放在括号内,为JavaScript解析器指明它正在处理一个函数表达式而不是语句。
funciton(){33}

image

会直接报错,因为这个函数声明是错误的表现形式。

如果加上括号,或者是一元操作符
image

函数表达式要放在括号内,为JavaScript解析器指明它正在处理一个函数表达式而不是语句。
还有一种相对简单的替代方案(function(){}(33))也能达到相同目标(然而这种方案有些奇怪,故不常使用)。把立即函数的定义和调用都放在括号内,同样可以为JavaScript解析器指明它正在处理函数表达式。
image
不同于用加括号的方式区分函数表达式和函数声明,这里我们使用一元操作符+、-、!和~。这种做法也是用于向JavaScript引擎指明它处理的是表达式,而不是语句。

箭头函数

const myFun =()=>{ return 1;}
or
var greet = name => "Greetings " + name; //⇽--- 定义箭头函数”

image

注意这个新操作符——胖箭头符号=>(等号后面跟着大于号)是定义箭头函数的核心。

函数构造函数

new Function('a', 'b', 'return a + b')

生成器函数

function* myGen(){ yield 1; }

函数的实参和形参

  • 形参是我们定义函数时所列举的变量。
  • 实参是我们调用函数时所传递给函数的值。

image

函数形参是在函数定义时指定的,而且所有类型的函数都能有形参。

摘录来自: [美] John Resig Bear Bibeault Josip Maras. “JavaScript忍者秘籍(第2版)。” iBooks.

  • 函数声明(skulk函数的ninja形参)。
  • 函数表达式 (performAction函数的person和action形参)。
  • 箭头函数 (形参daimyo)。

从另一方面说,实参则与函数的调用相联系。它们是函数调用时所传给函数的值。

  • 字符串Hattori以函数实参的形式传递给函数skulk。
  • 字符串Oda Nobunaga以函数实参的形式传递给函数rule。
  • skulk函数的形参ninja作为实参传递给函数performAction。
可以这样理解哈:
函数声明和函数表达式,箭头函数,在声明的时候在括号里面的是形参,
函数调用时,传递给函数的是实参

剩余参数

function multiMax(first, ...remainingNumbers) { ⇽--- 剩余参数以…作前缀
var sorted = remainingNumbers.sort(function(a, b) {
return b – a; ⇽--- 以降序排序余下参数
});
return first * sorted[0];
}
assert(multiMax(3, 1, 2, 3) == 9, ⇽--- 函数调用方式和其他函数类似
"3*3=9 (First arg, by largest.)")

为函数的最后一个命名参数前加上省略号(...)前缀,这个参数就变成了一个叫作剩余参数的数组,数组内包含着传入的剩余的参数。

注意️:只有函数的最后一个参数才能是剩余参数。

ES6中处理默认参数的方式

function performAction(ninja, action = "skulking"){ ⇽--- ES6中可以为函数的形参赋值
return ninja + " " + action;
}
assert(performAction("Fuma") === "Fuma skulking",
"The default value is used for Fuma");
assert(performAction("Yoshi") === "Yoshi skulking",
"The default value is used for Yoshi");
assert(performAction("Hattori") === "Hattori skulking",
"The default value is used for Hattori"); ⇽--- 若没传入值,则使用默认参数
assert(performAction("Yagyu", "sneaking") === "Yagyu sneaking",
"Yagyu can do whatever he pleases, even sneak!"); ⇽--- 使用了传入的参数

小结

  • 把JavaScript看作函数式语言你就能书写复杂代码。
  • 作为第一类对象,函数和JavaScript中其他对象一样。类似于其他对象类型,函数具有以下功能。
  • 通过字面量创建。
  • 赋值给变量或属性。
  • 作为函数参数传递。
  • 作为函数的结果返回。
  • 赋值给属性和方法。
  • 回调函数是被代码随后“回来调用”的函数,它是一种很常用的函数,特别是在事件处理场景下。
  • 函数具有属性,而且这些属性能够被存储任何信息,我们可以利用这个特性来做很多事情;例如:
  • 可以在函数属性中存储另一个函数用于之后的引用和调用。
  • 可以用函数属性创建一个缓存(记忆),用于减少不必要的计算。
  • 有很多不同类型的函数:函数声明、函数表达式、箭头函数以及函数生成器等。
  • 函数声明和函数表达式是两种最主要的函数类型。函数声明必须具有函数名,在代码中它也必须作为一个独立的语句存在。函数表达式可以不必有函数名,但此时它就必须作为其他语句的一部分。
  • 箭头函数是JavaScript的一个新增特性,“这个特性让我们可以使用更简洁的方式来定义函数。
  • 形参是函数定义时列出的变量,而实参是函数调用时传递给函数的值。
  • 函数的形参列表和实参列表长度可以不同。
  • 未赋值的形参求值得到undefined。
  • 传入的额外实参不会被赋给任何一个命名形参。
  • 剩余参数和默认参数是JavaScript的新特性。
  • 剩余参数——不与任何形参名相匹配的额外实参可以通过剩余参数来引用。
  • 默认参数——函数调用时,若没传入参数,默认参数可以给函数提供缺省的参数值。
摘录来自: [美] John Resig Bear Bibeault Josip Maras. “JavaScript忍者秘籍(第2版)。” iBooks.
版权声明
本文为[哦哈哈]所创,转载请带上原文链接,感谢
https://segmentfault.com/a/1190000037775116

  1. [front end -- JavaScript] knowledge point (IV) -- memory leakage in the project (I)
  2. This mechanism in JS
  3. Vue 3.0 source code learning 1 --- rendering process of components
  4. Learning the realization of canvas and simple drawing
  5. gin里获取http请求过来的参数
  6. vue3的新特性
  7. Get the parameters from HTTP request in gin
  8. New features of vue3
  9. vue-cli 引入腾讯地图(最新 api,rocketmq原理面试
  10. Vue 学习笔记(3,免费Java高级工程师学习资源
  11. Vue 学习笔记(2,Java编程视频教程
  12. Vue cli introduces Tencent maps (the latest API, rocketmq)
  13. Vue learning notes (3, free Java senior engineer learning resources)
  14. Vue learning notes (2, Java programming video tutorial)
  15. 【Vue】—props属性
  16. 【Vue】—创建组件
  17. [Vue] - props attribute
  18. [Vue] - create component
  19. 浅谈vue响应式原理及发布订阅模式和观察者模式
  20. On Vue responsive principle, publish subscribe mode and observer mode
  21. 浅谈vue响应式原理及发布订阅模式和观察者模式
  22. On Vue responsive principle, publish subscribe mode and observer mode
  23. Xiaobai can understand it. It only takes 4 steps to solve the problem of Vue keep alive cache component
  24. Publish, subscribe and observer of design patterns
  25. Summary of common content added in ES6 + (II)
  26. No.8 Vue element admin learning (III) vuex learning and login method analysis
  27. Write a mini webpack project construction tool
  28. Shopping cart (front-end static page preparation)
  29. Introduction to the fluent platform
  30. Webpack5 cache
  31. The difference between drop-down box select option and datalist
  32. CSS review (III)
  33. Node.js学习笔记【七】
  34. Node.js learning notes [VII]
  35. Vue Router根据后台数据加载不同的组件(思考->实现->不止于实现)
  36. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  37. 【JQuery框架,Java编程教程视频下载
  38. [jQuery framework, Java programming tutorial video download
  39. Vue Router根据后台数据加载不同的组件(思考->实现->不止于实现)
  40. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  41. 【Vue,阿里P8大佬亲自教你
  42. 【Vue基础知识总结 5,字节跳动算法工程师面试经验
  43. [Vue, Ali P8 teaches you personally
  44. [Vue basic knowledge summary 5. Interview experience of byte beating Algorithm Engineer
  45. 【问题记录】- 谷歌浏览器 Html生成PDF
  46. [problem record] - PDF generated by Google browser HTML
  47. 【问题记录】- 谷歌浏览器 Html生成PDF
  48. [problem record] - PDF generated by Google browser HTML
  49. 【JavaScript】查漏补缺 —数组中reduce()方法
  50. [JavaScript] leak checking and defect filling - reduce() method in array
  51. 【重识 HTML (3),350道Java面试真题分享
  52. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  53. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  54. [re recognize HTML (3) and share 350 real Java interview questions
  55. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  56. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  57. 【重识 HTML ,nginx面试题阿里
  58. 【重识 HTML (4),ELK原来这么简单
  59. [re recognize HTML, nginx interview questions]
  60. [re recognize HTML (4). Elk is so simple