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

相关文章

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom

hdu1171(母函数或多重背包)

题意:把物品分成两份,使得价值最接近 可以用背包,或者是母函数来解,母函数(1 + x^v+x^2v+.....+x^num*v)(1 + x^v+x^2v+.....+x^num*v)(1 + x^v+x^2v+.....+x^num*v) 其中指数为价值,每一项的数目为(该物品数+1)个 代码如下: #include<iostream>#include<algorithm>

在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲

1. 单例模式(Singleton Pattern) 确保一个类只有一个实例,并提供一个全局访问点。 示例代码: class Singleton {constructor() {if (Singleton.instance) {return Singleton.instance;}Singleton.instance = this;this.data = [];}addData(value)

Node.js学习记录(二)

目录 一、express 1、初识express 2、安装express 3、创建并启动web服务器 4、监听 GET&POST 请求、响应内容给客户端 5、获取URL中携带的查询参数 6、获取URL中动态参数 7、静态资源托管 二、工具nodemon 三、express路由 1、express中路由 2、路由的匹配 3、路由模块化 4、路由模块添加前缀 四、中间件

C++操作符重载实例(独立函数)

C++操作符重载实例,我们把坐标值CVector的加法进行重载,计算c3=c1+c2时,也就是计算x3=x1+x2,y3=y1+y2,今天我们以独立函数的方式重载操作符+(加号),以下是C++代码: c1802.cpp源代码: D:\YcjWork\CppTour>vim c1802.cpp #include <iostream>using namespace std;/*** 以独立函数

EasyPlayer.js网页H5 Web js播放器能力合集

最近遇到一个需求,要求做一款播放器,发现能力上跟EasyPlayer.js基本一致,满足要求: 需求 功性能 分类 需求描述 功能 预览 分屏模式 单分屏(单屏/全屏) 多分屏(2*2) 多分屏(3*3) 多分屏(4*4) 播放控制 播放(单个或全部) 暂停(暂停时展示最后一帧画面) 停止(单个或全部) 声音控制(开关/音量调节) 主辅码流切换 辅助功能 屏

函数式编程思想

我们经常会用到各种各样的编程思想,例如面向过程、面向对象。不过笔者在该博客简单介绍一下函数式编程思想. 如果对函数式编程思想进行概括,就是f(x) = na(x) , y=uf(x)…至于其他的编程思想,可能是y=a(x)+b(x)+c(x)…,也有可能是y=f(x)=f(x)/a + f(x)/b+f(x)/c… 面向过程的指令式编程 面向过程,简单理解就是y=a(x)+b(x)+c(x)

使用JS/Jquery获得父窗口的几个方法(笔记)

<pre name="code" class="javascript">取父窗口的元素方法:$(selector, window.parent.document);那么你取父窗口的父窗口的元素就可以用:$(selector, window.parent.parent.document);如题: $(selector, window.top.document);//获得顶级窗口里面的元素 $(

js异步提交form表单的解决方案

1.定义异步提交表单的方法 (通用方法) /*** 异步提交form表单* @param options {form:form表单元素,success:执行成功后处理函数}* <span style="color:#ff0000;"><strong>@注意 后台接收参数要解码否则中文会导致乱码 如:URLDecoder.decode(param,"UTF-8")</strong></span>

利用matlab bar函数绘制较为复杂的柱状图,并在图中进行适当标注

示例代码和结果如下:小疑问:如何自动选择合适的坐标位置对柱状图的数值大小进行标注?😂 clear; close all;x = 1:3;aa=[28.6321521955954 26.2453660695847 21.69102348512086.93747104431360 6.25442246899816 3.342835958564245.51365061796319 4.87