美文网首页
JS原生引用类型解析3-Function类型

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

作者: love丁酥酥 | 来源:发表于2018-02-24 17:41 被阅读8次

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

相关文章

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

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

  • JS原生引用类型解析

    经过前一个系列JS入门难点解析的学习,想必大家对JS的原理有了更清晰的把握和认识。这个系列,我们不做原理分析,而是...

  • Web前端必知篇:原型链的讲解

    js中的数据类型 js中的数据类型有两种,1是基本数据类型,2是引用数据类型。引用数据类型又可分为原生引用类型和自...

  • js 高级函数

    1:基本类型和引用类型? 2:基本类型和引用类型的区别? 3:js的内存方式? 4:浏览器解析js代码的时候的顺序...

  • JS原生引用类型解析4-String类型

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

  • JS原生引用类型解析7-Promise类型

    1. 简介 ES6引入了一个全新的对象Promise,用于表示一个异步操作的最终状态(完成或失败),以及其返回的值...

  • JS原生引用类型解析5-Number类型

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

  • JS原生引用类型解析6-Boolean类型

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

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

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

  • JS原生引用类型解析1-Object类型

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

网友评论

      本文标题:JS原生引用类型解析3-Function类型

      本文链接:https://www.haomeiwen.com/subject/uifcxftx.html