Javascript之旅——第九站:吐槽function

简介: 原文:Javascript之旅——第九站:吐槽function         说到funciton,也是我对js非常吐槽的一点,封装的让我眼瞎,马蛋的,哥只能大眼睁着去黑盒的使用,简直只有完完全全的听各类图书对 function的道听图说,完全没有做到一点点的眼见为实。
原文: Javascript之旅——第九站:吐槽function

  

      说到funciton,也是我对js非常吐槽的一点,封装的让我眼瞎,马蛋的,哥只能大眼睁着去黑盒的使用,简直只有完完全全的听各类图书对

function的道听图说,完全没有做到一点点的眼见为实。

 

一:function是什么

  在很久很久以前,我们只知道function是一个函数,用C#的话来说就是一个方法,既然是方法嘛,肯定就是挂在类下面的,但是其实呢?

在js中函数就是对象,并不是我们惯性思维中的方法。何以为证呢?看代码。

从图中可以看到我声明了一个say函数,但是我很奇怪的看到,为什么say函数会有一些属性和方法呢?比如本该属于Object的toString,valueOf,

constructor等等?然后比较好奇的去看看constructor到底是什么,可以看到其实是个Function构造函数,那这样我就非常清楚了,然来say只不过

是Function对象的一个实例引用,知道了这个我就可以很轻松的把代码恢复如下:

二:看看function中一些属性和方法

  现在我们知道了function其实就是一个对象,我们知道所有的引用类型都是继承自object,那为了好做比较,我定义了一个object的实例,

接下来看看function中到底都有那些专属属性和方法。

可以看到,子类function确实还是有点自己的东西,那接下来就简单探讨下常用的属性和方法。

 

1. arguments属性

  说到这个属性就特么的来气,就眼瞎,眼瞎的地方在于这个arguments属性里面其实做了很多很多的东西,以至于下面的一些奇怪现象

可能会让你目瞪口呆!!!

 

<1>奇怪现象一:我的function中都没有形参,居然还能接受到实参的值。。。

 

 

<2>奇怪现象2:形参和实参传递并不统一,可以多传递,可以少传递,js都不会报错。

 

 

<3>奇怪现象3:形参和arguments居然可以做到同步,太神奇了。

 

上面的三个现象是不是让你觉得很奇怪???这些奇怪的现象是不是让你觉得Function中封装的太狠,因为他们做了很多操作,而你却只能大眼

瞪小眼,啥也看不到。。。是不是非常遗憾呢???由于看不到源代码我也无能为力,只能根据书中的讲解以及自己的理解来领悟了。“高程3”中

是这么说的,当调用function中传递的实参其实是给了Function构造函数中的一个”内部数组“,而arguments其实是对”内部数组“的高层封装,

封装后的arguments不再是数组了,而是一个伪装的数组,之所以这么说是因为arguments还需要一个自己的独有属性callee,而这个callee

保存的就是当前的对象say,所以只能把arguments做成对象,我可以让你眼见为实。

然后最诡异的一个问题就是形参能够和arguments实现数据同步,既然能够做到同步,我的第一个反应就是使用同一块内存地址,但是仔细想想

他们怎么可能做到共享内存地址呢?但是再想想的话,arguments是对”内部数组“的封装,我就想这个name应该也是被做过手脚的,也就是说

name其实也是对”内部数组“的封装,就像ECMA5中对字段提供get/set访问器一样,当然这是我的一种猜测,解释代码如下:

 

从上图中我们看到,当我对name进行赋值的时候,其实改变的是args这个数组的值,同理当我改变arguments的值时,其实也是修改”内部数组“

的值,通过类似这种方法来达到我们上层看到的同步机制,画个简图如下:

 

2. length属性

  如果你知道了上面的原理,那这个也好猜测,要么取得是正真的“内部数组”的length,要么就是取伪类arguments的length,反正最终都是

”内部数组”的length,对不对,比较常用但是又没什么好说的。

 

3.prototype属性

   这个也是Function内部做出来的一个属性,很有意思,我想大家也有耳闻,也不是三言两语能说得清楚的,准备放在下篇详细的讲讲。

 

4.caller属性

   看这个名字大概也知道个一二,就是用来获取当前的父函数,不要小看这个caller哦,你有没有想过它可以实现C#中的stacktrace的功能

呢?有时候我们记js日志就靠这玩意了,比如下面这样。

 

5:call,apply方法

 因为这两个函数的功能都一样,只不过call方法必须逐一参数赋值,而apply必须传递数组,如果想眼见为实,可以看看它们在vs里面的代码

提示,一切都明白了,所以我就放在一块说了,不过这鸟东西有什么好处呢?它最大的好处就是可以随便绑定对象,然后就可以实现对绑定对象

动态新增方法和属性,可能说的有点抽象,看个例子就OK啦。

 我们发现,本来我的obj只是一个空对象,通过apply之后,我的obj对象具有name和age属性了,是不是很神奇呢?

 

目录
相关文章
|
3月前
|
JavaScript 前端开发
一个js里可以有多少个async function,如何用最少的async function实现多个异步操作
在 JavaScript 中,可以通过多种方法实现多个异步操作并减少 `async` 函数的数量。
|
4月前
|
SQL JavaScript 前端开发
【Azure 应用服务】Azure JS Function 异步方法中执行SQL查询后,Callback函数中日志无法输出问题
【Azure 应用服务】Azure JS Function 异步方法中执行SQL查询后,Callback函数中日志无法输出问题
|
4月前
|
JavaScript 前端开发 C++
【Azure Function】调试 VS Code Javascript Function本地不能运行,报错 Value cannot be null. (Parameter 'provider')问题
【Azure Function】调试 VS Code Javascript Function本地不能运行,报错 Value cannot be null. (Parameter 'provider')问题
|
6月前
|
JavaScript 前端开发
JavaScript函数是代码复用的关键。使用`function`创建函数
【6月更文挑战第22天】JavaScript函数是代码复用的关键。使用`function`创建函数,如`function sayHello() {...}`或`function addNumbers(num1, num2) {...}`。调用函数如`sayHello()`执行其代码,传递参数按值进行。函数可通过`return`返回值,无返回值默认为`undefined`。理解函数对于模块化编程至关重要。
43 4
|
7月前
|
JavaScript 前端开发
在JavaScript中,函数原型(Function Prototype)是一个特殊的对象
【5月更文挑战第11天】JavaScript中的函数原型是一个特殊对象,它为所有函数实例提供共享的方法和属性。每个函数在创建时都有一个`prototype`属性,指向原型对象。利用原型,我们可以向所有实例添加方法和属性,实现继承。例如,我们定义一个`Person`函数,向其原型添加`greet`方法,然后创建实例`john`和`jane`,它们都能调用这个方法。尽管可以直接在原型上添加方法,但推荐在构造函数内部定义以封装数据和逻辑。
60 2
|
7月前
|
JavaScript 前端开发
【专栏】`Function.prototype.apply` 在JavaScript中用于动态设定函数上下文(`this`)和参数列表
【4月更文挑战第29天】`Function.prototype.apply` 在JavaScript中用于动态设定函数上下文(`this`)和参数列表。它接受两个参数:上下文对象和参数数组。理解`apply`有助于深入JS运行机制。文章分三部分探讨其原理:基本概念和用法、工作原理详解、实际应用与注意事项。在应用中要注意性能、参数类型和兼容性问题。`apply`可用于动态改变上下文、传递参数数组,甚至模拟其他语言的调用方式。通过深入理解`apply`,能提升代码质量和效率。
41 3
|
7月前
|
存储 JavaScript 前端开发
js开发:请解释什么是回调函数(callback function),并给出一个示例。
回调函数是JavaScript中处理异步编程的一种常见模式,常用于事件驱动和I/O操作。它们作为参数传递给其他函数,在特定条件满足或任务完成后被调用。例如,`asyncOperation`函数接受回调函数`handleResult`,在模拟的异步操作完成后,调用`handleResult`并传递结果。这使得程序员能在操作完成后执行后续任务。
80 1
|
JavaScript
JS(第二十六)ES6语法中function
JS(第二十六)ES6语法中function
88 0
|
JavaScript 前端开发
JS(第七课)认识function函数(一)
JS(第七课)认识function函数(一)
83 0
|
JavaScript 前端开发
javascript函数:function() {}()的实战案例理解
javascript函数:function() {}()的实战案例理解
73 0