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

相关文章

Kotlin 作用域函数apply、let、run、with、also使用指南

《Kotlin作用域函数apply、let、run、with、also使用指南》在Kotlin开发中,作用域函数(ScopeFunctions)是一组能让代码更简洁、更函数式的高阶函数,本文将... 目录一、引言:为什么需要作用域函数?二、作用域函China编程数详解1. apply:对象配置的 “流式构建器”最

用js控制视频播放进度基本示例代码

《用js控制视频播放进度基本示例代码》写前端的时候,很多的时候是需要支持要网页视频播放的功能,下面这篇文章主要给大家介绍了关于用js控制视频播放进度的相关资料,文中通过代码介绍的非常详细,需要的朋友可... 目录前言html部分:JavaScript部分:注意:总结前言在javascript中控制视频播放

Android Kotlin 高阶函数详解及其在协程中的应用小结

《AndroidKotlin高阶函数详解及其在协程中的应用小结》高阶函数是Kotlin中的一个重要特性,它能够将函数作为一等公民(First-ClassCitizen),使得代码更加简洁、灵活和可... 目录1. 引言2. 什么是高阶函数?3. 高阶函数的基础用法3.1 传递函数作为参数3.2 Lambda

C++中::SHCreateDirectoryEx函数使用方法

《C++中::SHCreateDirectoryEx函数使用方法》::SHCreateDirectoryEx用于创建多级目录,类似于mkdir-p命令,本文主要介绍了C++中::SHCreateDir... 目录1. 函数原型与依赖项2. 基本使用示例示例 1:创建单层目录示例 2:创建多级目录3. 关键注

C++中函数模板与类模板的简单使用及区别介绍

《C++中函数模板与类模板的简单使用及区别介绍》这篇文章介绍了C++中的模板机制,包括函数模板和类模板的概念、语法和实际应用,函数模板通过类型参数实现泛型操作,而类模板允许创建可处理多种数据类型的类,... 目录一、函数模板定义语法真实示例二、类模板三、关键区别四、注意事项 ‌在C++中,模板是实现泛型编程

kotlin的函数forEach示例详解

《kotlin的函数forEach示例详解》在Kotlin中,forEach是一个高阶函数,用于遍历集合中的每个元素并对其执行指定的操作,它的核心特点是简洁、函数式,适用于需要遍历集合且无需返回值的场... 目录一、基本用法1️⃣ 遍历集合2️⃣ 遍历数组3️⃣ 遍历 Map二、与 for 循环的区别三、高

C语言字符函数和字符串函数示例详解

《C语言字符函数和字符串函数示例详解》本文详细介绍了C语言中字符分类函数、字符转换函数及字符串操作函数的使用方法,并通过示例代码展示了如何实现这些功能,通过这些内容,读者可以深入理解并掌握C语言中的字... 目录一、字符分类函数二、字符转换函数三、strlen的使用和模拟实现3.1strlen函数3.2st

MySQL中COALESCE函数示例详解

《MySQL中COALESCE函数示例详解》COALESCE是一个功能强大且常用的SQL函数,主要用来处理NULL值和实现灵活的值选择策略,能够使查询逻辑更清晰、简洁,:本文主要介绍MySQL中C... 目录语法示例1. 替换 NULL 值2. 用于字段默认值3. 多列优先级4. 结合聚合函数注意事项总结C

Java8需要知道的4个函数式接口简单教程

《Java8需要知道的4个函数式接口简单教程》:本文主要介绍Java8中引入的函数式接口,包括Consumer、Supplier、Predicate和Function,以及它们的用法和特点,文中... 目录什么是函数是接口?Consumer接口定义核心特点注意事项常见用法1.基本用法2.结合andThen链

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

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