JavaScript基础系列之函数和方法详解
一、函数和方法的区别
- 函数(function):函数是带有名称和参数的 JavaScript 代码段,可以一次定义多次调用。
- 方法(method):当将函数和对象写在一起时,函数就变成了“方法”,比如当函数赋值给对象的属性时,我们便称其为“方法”。
二、如何写好一个函数
在 JS 中,除了变量,用的最多的应该就是函数了,函数是 Javascript 的第一公民。
2.1 命名准确
2.1.1 函数命名
函数的命名需要明确,语义清晰,简单概括函数的功能。我们不要想着代码简短而缩短函数名称,这并不会提高什么性能或效率,相反,一个函数名称若不够清晰,往往其他人无法理解。
尽量使用动词,比如:getXxxxx、setXxxxx,动词在前面,语义就能更加清晰。
2.1.2 参数命名
强调语义化,参数命名让调用者更清晰的知道该传入什么,对应什么参数。当然,像一些通用命名还是可接受的,像 callback,fn,即使不看注释,往往我也知道这里的参数要做什么,传什么。
2.2 函数注释
/** * 时间格式化工具函数 * * @param { (Date | number) } date - 时间 * @param { string } unit - 转换格式 */ export const timeFormat = (date: Date | number | string, unit: string) => { if (!date) { return '' } if (typeof date === 'string') return date; if (typeof date === 'number') { date = new Date(date); } const year = date.getFullYear(); const month = date.getMonth() + 1; const day = date.getDate(); const hour = date.getHours(); const minute = date.getMinutes(); const second = date.getSeconds(); if (unit === 'year') return `${year}`; if (unit === 'month') return `${year}-${month}`; if (unit === 'day') return `${year}-${month}-${day}`; if (unit === 'hour') return `${year}-${month}-${day} ${hour}`; if (unit === 'minute') return `${year}-${month}-${day} ${hour}:${minute}`; if (unit === 'second') return `${year}-${month}-${day} ${hour}:${minute}:${second}`; }
2.2.1 参数注释
/** * 时间格式化工具函数 * * @param { (Date | number) } date - 时间 * @param { string } unit - 转换格式 */
@param { type } 参数 - 参数解释:type 表明的是参数的类型,比如 string,number,当有多个参数类型的时候,可以这么来标识 { (string|string[]) },表示这个参数可以是字符串或者字符串数组。
对象属性:需要解释对象的每一个属性
/** * 将项目分配给员工的函数 * * @param {Object} employee - 项目员工 * @param {string} employee.name - 项目员工的姓名 * @param {string} employee.department - 项目员工的部门 */ Project.prototype.assign = function(employee) { // ... };
可选参数:
/** * 时间格式化工具函数 * * @param { (Date | number | string) } date - 时间 * @param { string } [unit] - 转换格式 */ export const timeFormat = (date: Date | number | string, unit: string) => { // ... }
默认值:
/** * 时间格式化工具函数 * * @param { (Date | number) } date - 时间 * @param { string } [unit = 'second'] - 转换格式 */ export const timeFormat = (date: Date | number | string, unit = 'second') => { // ... }
2.3 函数参数
2.3.1 参数默认值
export const timeFormat = (date: Date, unit = 'second') => { // ... }
2.3.2 对象参数
async function printer_proxy_print( html_str: string, file_path: string, device: string | undefined, orientation: number, printer_mode: string, width: number, height: number, scale: number, from: number, to: number, left_offset: number, top_offset: number, pdf_tools: string | undefined, begin_page = 1, end_page = 1, repeat_times = 1, print_type: string ) { // ... }
可以给参数默认值,这样可以只传前面几个必要的参数,像这样调用。
async function printer_proxy_print( html_str: string, file_path: string, device = 'pc', orientation = 'xxx', printer_mode = 'xxx', width = 123, height = 123, scale = 123, from = 123, to = 123, left_offset = 123, top_offset = 123, pdf_tools = 123, begin_page = 1, end_page = 1, repeat_times = 1, print_type = 'base64' ) { // ... } await printer_proxy_print(html_str, file_path);
上面的方法看似可行,实际上,当我中间某个参数不一样的时候,我就需要把这个参数前面的参数都传一遍。这样显然不可行。所以当参数多的时候,我们需要用对象解构的方式传参。
async function printer_proxy_print({ html_str, file_path, device = 'pc', orientation = 'xxx', printer_mode = 'xxx', width = 123, height = 123, scale = 123, from = 123, to = 123, left_offset = 123, top_offset = 123, pdf_tools = 123, begin_page = 1, end_page = 1, repeat_times = 1, print_type = 'base64' }) { // ... } await printer_proxy_print({html_str, file_path});
解构的好处便是我可以随便传我想要的某几个参数,而不用在意顺序问题。不过像这么多参数的函数往往存在问题(具体问题具体分析)。也就是下面提到的参数数量问题。
2.3.3 参数数量
一个函数的参数越少越好,最多不应该超过3个,参数多往往意味着关系多,逻辑交叉相对也就多了起来。在进行测试的时候,往往也就很难覆盖到所有条件,出问题概率也就加大了。
参数多的时候,有时候也意味着功能多,就违背了 单一功能 的原则。
2.3.4 参数类型防御
在 TS 开发前,我们不知道用户会传什么东西进来,这时候往往容易产生类型错误,又或者,我们想实现兼容,像前面的 timeFormat 函数,我们希望用户调用的时候,可以是想对 时间对象 格式化,也可以是对 时间戳 格式化,那我们就需要做一个防御处理。
if (!date) { return '' } if (typeof date === 'string') return date; if (typeof date === 'number') { date = new Date(date); }
不过值得注意的是,即使我们用上了 TS,在大多数情况下,我们确实可以避免参数类型问题,但是这并不绝对,因为我们有时候会直接接受 接口 返回的数据。
我们常说,永远不要相信用户的输入,同样,接口返回的数据我也不信,我们不能保证,后端不会出错,约定好的参数是数组类型,怎么空的时候,你给我个 null 呢?
当然这些情况有时候需要去试错,有时候我们能想到的可能,不要偷懒,给写上类型判断吧。
2.4 函数的返回
2.4.1 幂等函数
什么叫幂等,简单来说,输入什么输出什么是固定的,入参决定了出参,不管调用多少次,只要输入一样,结果应该保持一样。
function sum(a: number, b: number) { return a + b; }
幂等函数具有可维护性,相对容易进行单元测试。
2.4.2 纯函数
纯函数在幂等的条件下,还要求没有副作用。
const dog = { name: 'puppy', age: 2, weight: 30, } if (!dog.color) { console.log('has no color'); } function addColor(dog) { dog.color = 'white'; } addColor(dog); console.log(dog); // {name: "puppy", age: 2, weight: 30, color: "white"}
可以看到,addColor 函数修改了 dog 对象的属性,也就是产生了副作用。
function addColor(dog) { let copyDog = Object.assign({}, dog); copyDog.color = 'white'; return copyDog; }
这样一来,dog 对象的属性就不会修改,addColor 函数是纯函数。
2.4.3 return null
null 在进行处理的时候相对麻烦,需要进行判断,导致了额外的代码,应当返回空对象,或者是空数组,或者抛出异常。
函数和方法的区别
1)函数(function)是一段代码,通过名字来进行调用。它能将一些数据(参数)传递进去进行处理,然后返回一些数据(返回值),也可以没有返回值。
2)方法(method)是通过对象调用的javascript函数。也就是说,方法也是函数,只是比较特殊的函数。他是和一个对象相关联。假设有一个函数是fn,一个对象是obj,那么就可以定义一个method:
obj.method = fn;
obj.method();
3)函数的数据是显式传递
4)方法中的数据是隐式传递的;方法和对象相关。
总结
到此这篇关于JavaScript基础系列之函数和方法的文章就介绍到这了,更多相关JavaScript函数和方法内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
相关文章
- eval函数在php中是一个函数并不是系统组件函数,我们在php.ini中的disable_functions是无法禁止它的,因这他不是一个php_function哦。 eval()针对php安全来说具有很...2016-11-25
- 在php中eval是一个函数并且不能直接禁用了,但eval函数又相当的危险了经常会出现一些问题了,今天我们就一起来看看eval函数对数组的操作 例子, <?php $data="array...2016-11-25
使用PHP+JavaScript将HTML页面转换为图片的实例分享
这篇文章主要介绍了使用PHP+JavaScript将HTML元素转换为图片的实例分享,文后结果的截图只能体现出替换的字体,也不能说将静态页面转为图片可以加快加载,只是这种做法比较interesting XD需要的朋友可以参考下...2016-04-19php 中file_get_contents超时问题的解决方法
file_get_contents超时我知道最多的原因就是你机器访问远程机器过慢,导致php脚本超时了,但也有其它很多原因,下面我来总结file_get_contents超时问题的解决方法总结。...2016-11-25Python astype(np.float)函数使用方法解析
这篇文章主要介绍了Python astype(np.float)函数使用方法解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-06-08- 这篇文章主要介绍了Python中的imread()函数用法说明,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-03-16
- 在昨天的《Javascript权威指南》学习笔记之十:ECMAScript 5 增强的对象模型一文中,对于一段代码的调试出现了一个奇怪现象,现将源代码贴在下面: 复制代码 代码如下: <script type="text/javascript"> function Person(){}...2014-05-31
- 最近做一个小项目不可避免的需要前端脚本与后台进行交互。由于是在asp.net中实现,故问题演化成asp.net中jiavascript与后台c#如何进行交互。...2020-06-25
- 相信很多站长都遇到过这样一个问题,访问页面时出现408错误,下面一聚教程网将为大家介绍408错误出现的原因以及408错误的解决办法。 HTTP 408错误出现原因: HTT...2017-01-22
- 本文主要介绍了C# 中取绝对值的函数。具有很好的参考价值。下面跟着小编一起来看下吧...2020-06-25
- php如何实现抓取网页图片,相较于手动的粘贴复制,使用小程序要方便快捷多了,喜欢编程的人总会喜欢制作一些简单有用的小软件,最近就参考了网上一个php抓取图片代码,封装了一个php远程抓取图片的类,测试了一下,效果还不错分享...2015-10-30
- 下面我们来看一篇关于Android子控件超出父控件的范围显示出来方法,希望这篇文章能够帮助到各位朋友,有碰到此问题的朋友可以进来看看哦。 <RelativeLayout xmlns:an...2016-10-02
- 下面小编就为大家带来一篇C#学习笔记- 随机函数Random()的用法详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2020-06-25
- 复制代码 代码如下: //element:需要添加新样式的元素,value:新的样式 function addClass(element, value ){ if (!element.className){ element.className = value; }else { newClassName = element.className; newClas...2014-05-31
- ps软件是现在非常受大家喜欢的一款软件,有着非常不错的使用功能。这次文章就给大家介绍下ps把文字背景变透明的操作方法,喜欢的一起来看看。 1、使用Photoshop软件...2017-07-06
- 在javascritp中,不一定只有对象方法的上下文中才有this, 全局函数调用和其他的几种不同的上下文中也有this指代。 它可以是全局对象、当前对象或者任意对象,这完全取决于函数的调用方式。JavaScript 中函数的调用有以下...2015-03-15
- 有一道js面试题,题目是这样的:下列代码的执行结果是什么,为什么? 复制代码 代码如下: var i, j, k; for (i=0, j=0; i<10, j<6; i++, j++) { k = i+j; } document.write(k); 答案是显示10,这道题主要考察JavaScript的逗...2015-03-15
- 事件触发器从字面意思上可以很好的理解,就是用来触发事件的,但是有些没有用过的朋友可能就会迷惑了,事件不是通常都由用户在页面上的实际操作来触发的吗?这个观点不完全正确,因为有些事件必须由程序来实现,如自定义事件,jQue...2014-06-07
- 首先,我想到的是另建一个结果数组,用来存储原始数组中不重复的数据。遍历原始数组依次跟结果数组中的元素进行比较,检测是否重复。于是乎,我写出了如下代码A: Array.prototype.clearRepetitionA = function(){ var resul...2015-11-08
intellij idea快速查看当前类中的所有方法(推荐)
这篇文章主要介绍了intellij idea快速查看当前类中的所有方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-09-02