专栏首页coding for loveJS原生引用类型解析3-Function类型

JS原生引用类型解析3-Function类型

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

1. 简介

在 JavaScript 中, 每个函数实际上都是一个Function对象。

2. 函数创建

函数创建有三种方法:

2.1 函数声明

function sum (num1, num2) {
    return num1 + num2;
}

2.2 函数赋值

var sum = function (num1, num2) {
    return num1 + num2;
}

2.3 构造函数

var sum = new Function("num1", "num2", "return num1 + num2");

从技术角度上讲,这是一个函数表达式,只不过函数创建的时候使用了构造函数。不推荐使用这种方法定义函数,因为这种语法会导致解析两次代码(第一次是解析常规ECMAScript代码,第二次是将诶西传入构造函数中的字符串。),从而影响性能。

3. Function构造函数的属性与方法

我们用Object.getOwnPropertyNames()方法获取Function构造函数的所有属性与方法。

Object.getOwnPropertyNames(Function);
// (3) ["length", "name", "prototype"]

发现只有3个属性。

Function.length 长度为1

Function.name 名称为"Array"

Function.prototype 指向Function构造函数的原型,可以为所有 Function 类型的对象添加属性。

4. Function原型对象的属性与方法

我们用Object.getOwnPropertyNames()方法获取Function原型对象的所有属性与方法。

Object.getOwnPropertyNames(Function.prototype);
// (9) ["length", "name", "arguments", "caller", "constructor", "apply", "bind", "call", "toString"]

发现一共有9个属性和方法。

4.1 Function原型对象的属性

Function.prototype.arguments 已废弃。现在推荐的做法是使用函数内部可用的 arguments对象来访问函数的实参。

Function.prototype.caller 非标准。该属性的常用形式 arguments.callee.caller 替代了被废弃的 arguments.caller。

Function.prototype.length 指该函数有多少个必须要传入的参数,即形参的个数。与之对比的是, arguments.length 是函数被调用时实际传参的个数。

function fn(m, n){
    console.log(arguments.length);  // 1
}
fn(1);
console.log(fn.length);  // 2

Function.name 获取函数的名称。

Function.prototype.constructor 指向构造函数Object。

4.2 Function原型对象的方法

Function.prototype.apply() 在一个对象的上下文中应用另一个对象的方法;参数能够以数组形式传入。

Function.prototype.call() 在一个对象的上下文中应用另一个对象的方法;参数能够以列表形式传入。

Function.prototype.apply() bind()方法会创建一个新函数,称为绑定函数。当调用这个绑定函数时,绑定函数会以创建它时传入 bind()方法的第一个参数作为 this,传入 bind()方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数.

Function.prototype.toString() 返回一个表示当前函数源代码的字符串。遮蔽了原型链上的同名方法 Object.prototype.toString。

5. Function实例对象的属性和方法

我们用Object.getOwnPropertyNames()方法获取Function实例对象的所有属性与方法。

var fn = function(m, n){
    return m + n;
}
Object.getOwnPropertyNames(fn);
// (5) ["length", "name", "arguments", "caller", "prototype"]

发现一共有5个属性, 除了prototype属性以外与函数原型中的同名属性作用相同, 并遮蔽了函数原型中的同名属性。另外需要注意的是prototype属性指向该函数的原型对象。

console.log(fn.prototype);  // {constructor: ƒ}

参考

MDN_Function BOOK-《JavaScript高级程序设计(第3版)》第5章

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JS原生引用类型解析2-Array类型

    (注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

    love丁酥酥
  • 5-6~7 eslint 在 webpack 中的配置

    eslint 是一个开源的 js 代码检查工具,初衷是为了让程序员可以创建自己的检测规则。实际生产中,团队内往往会制订一套统一的标准,让整个团队的编码风格达到一...

    love丁酥酥
  • JS常用设计模式解析

    我想作为一个前端开发者,前期大多数只会关注代码的功能性。但是随着编程经验的增加,维护更大更复杂的代码模块,需要的就不仅仅只是代码功能性的实现,还需要关注代码的复...

    love丁酥酥
  • 剖析Redis持久化之AOF方式

    Marser
  • Redis源码走读及编程实践——数据安全篇(二)

    《Redis源码走读及编程实践——数据安全篇(一)》介绍了RDB的落地原理并走读了redis的RDB落地流程,本文继续介绍redis的另外一种数据落地机制AOF...

    王鹏程1990
  • Redis持久化 AOF

    上节课我们讲了Redis持久化RDB的方式,今天我们讲AOF.我们先回忆一下RDB的缺点

    小土豆Yuki
  • redis持久化

    利用永久性存储介质将数据进行保存,在特定的时间将保存的数据进行恢复的工作机制称为持久化

    用户6807007
  • Redis详解(七)------ AOF 持久化

      上一篇文章我们介绍了Redis的RDB持久化,RDB 持久化存在一个缺点是一定时间内做一次备份,如果redis意外down掉的话,就会丢失最后一次快照后的所...

    IT可乐
  • 手把手教你用R语言下载TCGA数据库:TCGAbiolinks

    TCGA这块大蛋糕,不同的人总会用不同的工具来切分这个蛋糕,今天我们继续分享关于TCGA数据下载的专题,今天我们继续聊聊TCGA的江湖,在TCGA的武林里,总有...

    百味科研芝士
  • 数据挖掘面试:不得不学的AUC!

    关于作者:Milter,一名机器学习爱好者、NLP从业者、终生学习者,欢迎志同道合的朋友多多交流。https://www.yuque.com/liwenju/k...

    木东居士

扫码关注云+社区

领取腾讯云代金券