文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

JS深入浅出Function与构造函数

2024-04-02 19:55

关注

 1.概述

Function是一个构造函数,可以通过该构造函数去创建一个函数,创建的函数是一个Function对象,实际上,不管使用什么方式创建的都是一个Function对象,本质上函数名仅仅是一个变量名,它指向某个Function对象的引用。

验证代码如下所示:


var f = function () {
  console.log('this is f function');
}
// 函数也是一个对象
console.log(f instanceof Object); // true
// 函数是Function类型的对象
console.log(f instanceof Function); // true

1.1利用Function构造函数创建函数

Function****构造函数创建一个新的Function对象。直接调用此构造函数可用动态创建函数。

语法结构如下:


var functionName = new Function ([arg1[, arg2[, ...argN]],] functionBody)


其中functionName表示函数名称,[arg1[, arg2[, ...argN]],]表示可选的参数列表,functionBody表示函数

示例代码如下所示:


// 无参的函数
var fun = new Function('console.log("这是一个函数")')
fun() // 这是一个函数
// 带一个参数的函数
var fun = new Function('a', 'console.log("这个函数带一个参数:" + a)')
fun(100) // 这个函数带一个参数:100
// 带两个参数的函数
var fun = new Function(
  'a, b',
  'console.log("这是带两个参数的函数,分别是" + a + "和" + b);',
)
fun(100, 200) // 这是带两个参数的函数,分别是100和200

在实际的开发中我们一般不使用这种方式创建函数,因为它毫无可读性。

1.2Function与Object

验证代码如下:


console.log(Function instanceof Function) //true
console.log(Function instanceof Object) //true
console.log(Object instanceof Object) //true
console.log(Object instanceof Function) //true

2.构造函数

2.1自定义否则函数

构造函数又称为构造器或对象模板,是对象中的一个方法,在实例化时构造器被调用。在JavaScript中函数就可以作为构造器使用,因此不需要特别定义一个构造器方法。

创建构造函数的语法结构如下所示:


function Person(){
  this.属性名 = 属性值;
  this.方法名 = function() {
      方法体
}
var person = new Person();


这里的Person是作为构造函数的名称,将Person实例化需要使用new关键字,还有一点需要说的就是构造函数一般首字母都是大写的。

如下代码展示了如何通过创建一个构造函数以及如何通过构造函数去实例化一个类:


// 自定义构造函数 -> 作用:创建对象
function Person(name, age, sex) {
  this.name = name
  this.age = age
  this.sex = sex
  this.print = function () {
    console.log(name + '今年' + age + '岁 性别' + sex)
  }
}
// 创建 一碗甜
var t = new Person('一碗甜', 18, '女')
hong.print() // 一碗甜今年18岁 性别女
// 创建 一碗周
var z = new Person('一碗周', 20, '男')
dong.print() //一碗粥今年20岁 性别男

2.2对象的constructor属性

Object对象提供的constructor属性,返回创建实例对象Object的构造函数的引用。

所有对象都会从它的原型上继承一个constructor属性:

值得注意的是此属性的值是对函数本身的引用,而不是一个包含函数名称的字符串。

示例代码如下:


// 创建 一碗周
var z = new Person('一碗周', 18, '男')
// 判断是否为 Person 构造函数的对象
console.log(z.constructor === Person)

2.3构造函数与函数

先看一段代码


function Hero() {
  // 当作是一个函数来使用
  var v = 100 // 局部变量
  // 当作是一个构造函数来使用
  this.set = function (value) {
    v = value
  }
  this.get = function () {
    return v
  }
}


在这段代码中,首先我们定义了一个函数,那它也是一个构造函数,当然它还是一个对象。

既然它有三个方面的含义,那就有三个方面的操作,如下所示

示例代码代码如下:


// 直接调用
Hero()
// 通过构造函数创建对象
var hero = new Hero()
// 当做对象为其添加属性和方法
Hero.n = '一碗周'
console.log(Hero.n) // 一碗周

3.Function对象的属性和方法

全局的Function对象没有自己的属性和方法,但是,因为它本身也是一个函数,所以它也会通过原型链从自己的原型链Function.prototype上继承一些属性和方法。

3.1length属性

length属性指明函数的形参个数,示例代码如下所示:


// 定义两个空函数
function fun(a, b, c, d) {}

function fn() {}

// 测试 length 属性
console.log(fun.length) // 4
console.log(fn.length) // 0

apply()方法:

**apply()**方法调用一个具有给定this值的函数,以及以一个数组(或类数组对象)的形式提供的参数。

法格式如下:


func.apply(thisArg, [argsArray])


参数解释如下:

返回值是调用有指定this值和参数的函数的结果。

如下代码展示了apply()方法的用法:


// 定义一个函数
function fn(a) {
  console.log('this is ' + a)
}
fn.apply(null, ['函数']) // this is 函数

// 上面的调用方式等同于下面这种方式
fn('函数') // this is 函数

3.2call()方法

该方法的语法和作用与apply()方法类似,只有一个区别,就是call()方法接受的是一个参数列表,而apply()方法接受的是一个包含多个参数的数组。

如下代码展示了call()方法的用法:


function fn(a) {
  console.log('this is ' + a)
}
fn.call(null, '函数') // this is 函数

// 上面的调用方式等同于下面这种方式
fn('函数') // this is 函数

bind()方法:
ind()方法创建一个新的函数,在bind()被调用时,这个新函数的this被指定为bind()的第一个参数,而其余参数将作为新函数的参数,供调用时使用。

参数解释如下:


function.bind(thisArg[, arg1[, arg2[, ...]]])

参数:

thisArg:调用绑定函数时作为this参数传递给目标函数的值。

arg1, arg2, ...:当目标函数被调用时,被预置入绑定函数的参数列表中的参数。

返回值是一个原函数的拷贝,并拥有指定的**this**值和初始参数。

如下代码展示了bind()方法的:


// 定义一个函数
var fun = function (a, b) {
  console.log('第一个参数的值为:' + a + '第二个参数的值为:' + b)
}
// 调用 fun()
fun(10, 20) // 第一个参数的值为:10第二个参数的值为:20
// 创建绑定函数
var fn = fun.bind(null, 100, 200) // 有参数默认值的功能
// 调用新创建的函数,不写实参
fn() // 第一个参数的值为:100第二个参数的值为:200

4.Arguments对象

arguments对象是所有(非箭头)函数中都可用的局部变量。你可以使用arguments对象在函数中引用函数的参数。此对象包含传递给函数的每个参数,第一个参数在索引0处。例如,如果一个函数传递了三个参数,你可以以如下方式引用他们:

arguments[0]
arguments[1]
arguments[2]

它的参数也是可以被重新定义的,该对象还提供了两个属性,分别是:

如下代码展示了该对象的用法,代码如下:



// 定义一个函数
var fun = function () {
  console.log(arguments)
  // arguments.callee  指向参数所属的当前执行的函数。
  //如果给这个属性加一个括号则表示调用。因为 arguments.callee === fun 的结果为 true
  console.log(arguments.callee)
  // arguments.length  传递给函数的参数数量。
  console.log(arguments.length)
}
fun(1, 2, 3, 4, 5) 


代码执行结果如下所示:


[Arguments] { '0': 1, '1': 2, '2': 3, '3': 4, '4': 5 }
[Function: fun]
5


我们可以通过arguments.length属性,来判断传入参数的数量,来完成函数重载的功能,示例代码如下:


// 模拟函数的重载
function add() {
  // 记录参数数量
  var len = arguments.length
  // 通过 switch case 语句判断传入参数数量,来模拟重载的功能
  switch (len) {
    case 2:
      return arguments[0] + arguments[1]
      break
    case 3:
      return arguments[0] + arguments[1] + arguments[2]
      break
    case 4:
      return arguments[0] + arguments[1] + arguments[2] + arguments[3]
      break

    default:
      break
  }
}
console.log(add(1, 2)) // 3
console.log(add(1, 2, 3)) // 6
console.log(add(1, 2, 3, 4)) // 10

5.总结

本篇文章介绍了如何创建构造函数,如何通过构造函数去实例化一个对象;以及Function对象提供的方法和属性有哪些?怎么用,最后还介绍了一个Arguments对象。

到此这篇关于JS深入浅出Function与构造函数的文章就介绍到这了,更多相关JS unction与构造函数内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯