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章

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,807评论 2 17
  • 函数和对象 1、函数 1.1 函数概述 函数对于任何一门语言来说都是核心的概念。通过函数可以封装任意多条语句,而且...
    道无虚阅读 4,614评论 0 5
  •   面向对象(Object-Oriented,OO)的语言有一个标志,那就是它们都有类的概念,而通过类可以创建任意...
    霜天晓阅读 2,135评论 0 6
  • 第3章 基本概念 3.1 语法 3.2 关键字和保留字 3.3 变量 3.4 数据类型 5种简单数据类型:Unde...
    RickCole阅读 5,149评论 0 21
  • 2017年7月26日 天气晴 生活总是充满了很多巧合,比如有一天,我想发消息给一个人,打开窗口却意外发现窗口“对方...
    钟小笛阅读 185评论 1 1