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

相关文章

Python的time模块一些常用功能(各种与时间相关的函数)

《Python的time模块一些常用功能(各种与时间相关的函数)》Python的time模块提供了各种与时间相关的函数,包括获取当前时间、处理时间间隔、执行时间测量等,:本文主要介绍Python的... 目录1. 获取当前时间2. 时间格式化3. 延时执行4. 时间戳运算5. 计算代码执行时间6. 转换为指

Python正则表达式语法及re模块中的常用函数详解

《Python正则表达式语法及re模块中的常用函数详解》这篇文章主要给大家介绍了关于Python正则表达式语法及re模块中常用函数的相关资料,正则表达式是一种强大的字符串处理工具,可以用于匹配、切分、... 目录概念、作用和步骤语法re模块中的常用函数总结 概念、作用和步骤概念: 本身也是一个字符串,其中

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

Node.js 数据库 CRUD 项目示例详解(完美解决方案)

《Node.js数据库CRUD项目示例详解(完美解决方案)》:本文主要介绍Node.js数据库CRUD项目示例详解(完美解决方案),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考... 目录项目结构1. 初始化项目2. 配置数据库连接 (config/db.js)3. 创建模型 (models/

shell编程之函数与数组的使用详解

《shell编程之函数与数组的使用详解》:本文主要介绍shell编程之函数与数组的使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录shell函数函数的用法俩个数求和系统资源监控并报警函数函数变量的作用范围函数的参数递归函数shell数组获取数组的长度读取某下的

使用Node.js制作图片上传服务的详细教程

《使用Node.js制作图片上传服务的详细教程》在现代Web应用开发中,图片上传是一项常见且重要的功能,借助Node.js强大的生态系统,我们可以轻松搭建高效的图片上传服务,本文将深入探讨如何使用No... 目录准备工作搭建 Express 服务器配置 multer 进行图片上传处理图片上传请求完整代码示例

MySQL高级查询之JOIN、子查询、窗口函数实际案例

《MySQL高级查询之JOIN、子查询、窗口函数实际案例》:本文主要介绍MySQL高级查询之JOIN、子查询、窗口函数实际案例的相关资料,JOIN用于多表关联查询,子查询用于数据筛选和过滤,窗口函... 目录前言1. JOIN(连接查询)1.1 内连接(INNER JOIN)1.2 左连接(LEFT JOI

MySQL中FIND_IN_SET函数与INSTR函数用法解析

《MySQL中FIND_IN_SET函数与INSTR函数用法解析》:本文主要介绍MySQL中FIND_IN_SET函数与INSTR函数用法解析,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友一... 目录一、功能定义与语法1、FIND_IN_SET函数2、INSTR函数二、本质区别对比三、实际场景案例分

C++ Sort函数使用场景分析

《C++Sort函数使用场景分析》sort函数是algorithm库下的一个函数,sort函数是不稳定的,即大小相同的元素在排序后相对顺序可能发生改变,如果某些场景需要保持相同元素间的相对顺序,可使... 目录C++ Sort函数详解一、sort函数调用的两种方式二、sort函数使用场景三、sort函数排序

C语言函数递归实际应用举例详解

《C语言函数递归实际应用举例详解》程序调用自身的编程技巧称为递归,递归做为一种算法在程序设计语言中广泛应用,:本文主要介绍C语言函数递归实际应用举例的相关资料,文中通过代码介绍的非常详细,需要的朋... 目录前言一、递归的概念与思想二、递归的限制条件 三、递归的实际应用举例(一)求 n 的阶乘(二)顺序打印