js修炼——函数

2024-09-04 21:18
文章标签 函数 js 修炼

本文主要是介绍js修炼——函数,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

很多技术从业者对技术水平的评价是代码的实现能力,形而上一点,我认为技术工作和足球运动(本人巴萨球迷,最爱内马尔)是一样的,最重要的是思想意识,古往今来,各行各业的大师讲究的是内功深厚,说的有些玄学的味了,总之,我薄如白纸,我需要修炼。

1.声明还是表达式

我们经常会看到函数定义的两种情况

  function clc(num){//函数声明,定义未执行return num++;}//…………………………………………………………………………………………………………………………………………………………var clc=function(num){//函数表达式,实际上执行了对变量clc的赋值操作return num++};//分号,这里是最容易忽略的地方,但是也是最直观体现两者区别的地方

虽然这两种形式颇为相似,但是它们有一个非常重要的区别。 函数声明会被提升至上下文顶部,这意味着你可以先使用函数后声明它们,而函数表达式不可以(必须先定义后执行),我的另一篇博 客详细讨论过这一点 点击打开链接

2.函数就是值

函数是js的重点,我们可以像使用对象一样使用函数。也可以将它们赋值给变量,在对象中添加它们,将它们当成参数传递给别的函数,或从别的函数中返回。基本上只要是可以使用其他引用值的地方,你就可以使用函数。

function eat(){console.log("zhuzhouzi");}eat();//zhuzhouzivar eat1=eat;eat1();//zhuzhouzi 

现在eat和eat1指向同一个函数,两者都可以被执行,并具有相同的结果。为了更好理解,我们来看下面用Function构造函数来实现相同功能的代码

var eat=new Function("console.log(\"zhuzhouzi\");");eat();//zhuzhouzivar eat1=eat;eat1();//zhuzhouzi console.log(eat===eat1);//true
Function构造函数更加清楚地表明eat可以像其他对象一样被传来传去。只要记住函数就是对象,很多行为就变得容易理解了。

3.参数

js函数的另一个独特之处在于你可以给函数传递任意数量的参数却不造成错误。那是因为函数参数实际上被保存在一个被称为arguments的类似数组的对象中。如同一个普通的JavaScript数组,arguments可以自由增长来包含任意个数的值,这些值可以通过数字索引来引用。arguments的length属性会告诉你目前有多少个值。

arguments对象自动存储于函数中。也就是说,函数的命名参数不过是为了方便,并不是真的限制了该函数可接受参数的个数

注意,arguments对象不是一个数组的实例,其拥有的方法与数组不同。

来看下面代码

function sum() {var result = 0,i = 0,len = arguments.length;while(i < len) {result += arguments[i];i++;}return result;}console.log(sum(1,2));//3console.log(sum(1,2,3));//6console.log(sum(1,2,3,4));//10console.log(sum(1,2,3,4,5));//15
这段代码巧妙的运用了arguments来实现再不设置命名参数的情况下使用接受到的参数,在某些情况下这种方式有妙用

4.对象方法

前面提到我们可以在任何时候给对象添加或删除属性。如果属性值是函数,则该属性被称为方法。你可以像添加属性那样给对象添加方法。说到对象方法,在使用过程中与之紧密联系的就是this对象了

4.1 this对象

关于this对象的介绍以及绑定原则,参见我的另一篇博客点击打开链接

4.2 改变this

在JavaScript中,使用和操作函数中的this的能力是良好的面向对象编程的关键。函数会在各种不同上下文中被使用,它们必须到哪都能正常工作。一般this会被自动设置,但是你可以改变它的值来完成不同的目标。有3中函数方法允许你改变this的值。

4.2.1 call()方法

 function output(label){console.log(label+" is "+this.name);}var cat={name:'cat'};var dog={name:'dog'};var name="animal";/** this绑定到全局* 输出 global is animal*/output.call(this,'global');/** this绑定到cat对象* 输出 cat is cat*/output.call(cat,'cat');/** this绑定到dog对象* 输出 dog is dog*/output.call(dog,'dog');

4.2.2 apply()方法

apply方法和call方法如出一辙,除了apply第二个参数是数组形式外,想详细了解的自己百度,相关资料很多


4.2.3 bind()方法

改变this的第三个函数方法是bind()。ES6中新加的这个方法和之前那两个颇有不同。按惯例,bind()的第一个参数是要传给新函数的this的值,看下面代码

function output(label){console.log(label+" is "+this.name);}var cat={name:'cat'};var dog={name:'dog'};var name="animal";var outputCat=output.bind(cat,"cat");outputCat();//cat is catvar outputDog=output.bind(dog,"dog");outputDog();//dog is dog

5.总结

JavaScript函数的独特之处在于他们同时也是对象,也就是它们也可以被访问、复制和覆盖,就像其他对象一样。JavaScript中的函数和其他对象的最大区别在于它们有一个特殊的内部属性[[Call]],包含了该函数的执行指令,typeof操作符会在对象内查找这个内部属性,如果找到,它返回“function”。

函数的字面形式有两种:声明和表达式。函数声明是function关键字右边跟着函数名。函数声明会被提升至上下文的顶部。函数表达式可被用于任何可以使用值得地方,例如赋值语句、函数参数或另一个函数的返回值。

函数是对象,所以存在一个Function构造函数。你可以用Function构造函数创建新的函数,不过没有人会建议你这么做,因为它会使你的代码难以理解和调试。

为了理解JavaScript的面向对象编程,我们需要好好理解它的函数。因为JavaScript没有类的概念,能够帮我们实现聚合和继承的就只有函数和其他对象了。


这篇关于js修炼——函数的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1137054

相关文章

MySQL 日期时间格式化函数 DATE_FORMAT() 的使用示例详解

《MySQL日期时间格式化函数DATE_FORMAT()的使用示例详解》`DATE_FORMAT()`是MySQL中用于格式化日期时间的函数,本文详细介绍了其语法、格式化字符串的含义以及常见日期... 目录一、DATE_FORMAT()语法二、格式化字符串详解三、常见日期时间格式组合四、业务场景五、总结一、

golang panic 函数用法示例详解

《golangpanic函数用法示例详解》在Go语言中,panic用于触发不可恢复的错误,终止函数执行并逐层向上触发defer,最终若未被recover捕获,程序会崩溃,recover用于在def... 目录1. panic 的作用2. 基本用法3. recover 的使用规则4. 错误处理建议5. 常见错

Node.js net模块的使用示例

《Node.jsnet模块的使用示例》本文主要介绍了Node.jsnet模块的使用示例,net模块支持TCP通信,处理TCP连接和数据传输,具有一定的参考价值,感兴趣的可以了解一下... 目录简介引入 net 模块核心概念TCP (传输控制协议)Socket服务器TCP 服务器创建基本服务器服务器配置选项服

mac安装nvm(node.js)多版本管理实践步骤

《mac安装nvm(node.js)多版本管理实践步骤》:本文主要介绍mac安装nvm(node.js)多版本管理的相关资料,NVM是一个用于管理多个Node.js版本的命令行工具,它允许开发者在... 目录NVM功能简介MAC安装实践一、下载nvm二、安装nvm三、安装node.js总结NVM功能简介N

前端原生js实现拖拽排课效果实例

《前端原生js实现拖拽排课效果实例》:本文主要介绍如何实现一个简单的课程表拖拽功能,通过HTML、CSS和JavaScript的配合,我们实现了课程项的拖拽、放置和显示功能,文中通过实例代码介绍的... 目录1. 效果展示2. 效果分析2.1 关键点2.2 实现方法3. 代码实现3.1 html部分3.2

Python itertools中accumulate函数用法及使用运用详细讲解

《Pythonitertools中accumulate函数用法及使用运用详细讲解》:本文主要介绍Python的itertools库中的accumulate函数,该函数可以计算累积和或通过指定函数... 目录1.1前言:1.2定义:1.3衍生用法:1.3Leetcode的实际运用:总结 1.1前言:本文将详

JS 实现复制到剪贴板的几种方式小结

《JS实现复制到剪贴板的几种方式小结》本文主要介绍了JS实现复制到剪贴板的几种方式小结,包括ClipboardAPI和document.execCommand这两种方法,具有一定的参考价值,感兴趣的... 目录一、Clipboard API相关属性方法二、document.execCommand优点:缺点:

轻松上手MYSQL之JSON函数实现高效数据查询与操作

《轻松上手MYSQL之JSON函数实现高效数据查询与操作》:本文主要介绍轻松上手MYSQL之JSON函数实现高效数据查询与操作的相关资料,MySQL提供了多个JSON函数,用于处理和查询JSON数... 目录一、jsON_EXTRACT 提取指定数据二、JSON_UNQUOTE 取消双引号三、JSON_KE

MySQL数据库函数之JSON_EXTRACT示例代码

《MySQL数据库函数之JSON_EXTRACT示例代码》:本文主要介绍MySQL数据库函数之JSON_EXTRACT的相关资料,JSON_EXTRACT()函数用于从JSON文档中提取值,支持对... 目录前言基本语法路径表达式示例示例 1: 提取简单值示例 2: 提取嵌套值示例 3: 提取数组中的值注意

Java function函数式接口的使用方法与实例

《Javafunction函数式接口的使用方法与实例》:本文主要介绍Javafunction函数式接口的使用方法与实例,函数式接口如一支未完成的诗篇,用Lambda表达式作韵脚,将代码的机械美感... 目录引言-当代码遇见诗性一、函数式接口的生物学解构1.1 函数式接口的基因密码1.2 六大核心接口的形态学