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

2018-02-24  本文已影响8人  love丁酥酥

(注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章

上一篇下一篇

猜你喜欢

热点阅读