Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >JavaScript之函数(二) 函数内部三个不常见的属性

JavaScript之函数(二) 函数内部三个不常见的属性

作者头像
赤蓝紫
发布于 2023-03-11 07:54:15
发布于 2023-03-11 07:54:15
58500
代码可运行
举报
文章被收录于专栏:clzclz
运行总次数:0
代码可运行

JavaScript之函数(二) 函数内部三个不常见的属性

看红宝书+查资料,重新梳理JavaScript的知识。

arguments.callee

arguments就不多说了,但是arguments有一个callee属性,是一个指向arguments对象所在函数的指针。

先来一下阶乘函数看看

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function factorial(num) {
    if (num <= 1) {
        return 1
    } else {
        return num * factorial(num - 1)
    }
}

console.log(factorial(4))       // 24

这样一看,是没什么问题的。

但是上面的函数必须要保证函数名是factorial,导致了紧密耦合。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function factorial(num) {
    if (num <= 1) {
        return 1
    } else {
        return num * factorial(num - 1)
    }
}

const copyFactorial = factorial

console.log(copyFactorial(4))       // 24

还是没有问题? 这里没有问题其实就是因为虽然函数名变化了,但是,递归的时候用的函数还是之前的函数。所以如果,我们修改factorial就会引发问题了。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function factorial(num) {
    if (num <= 1) {
        return 1
    } else {
        return num * factorial(num - 1)
    }
}

const copyFactorial = factorial

factorial = () => 0
console.log(copyFactorial(4))       // 0

这时候,我们可以使用arguments.callee来让函数逻辑和函数名解耦。这样子,无论函数叫什么名字,都能够正确的引用正确的函数。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function factorial(num) {
    if (num <= 1) {
        return 1
    } else {
        return num * arguments.callee(num - 1)
    }
}

const copyFactorial = factorial

factorial = () => 0
console.log(copyFactorial(4))       // 24

caller

函数对象会有一个属性caller,这个属性的值是调用当前函数的函数,如果是在全局作用域调用的话,则是null

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function outer() {
    console.log(outer.caller)
    inner()
}

function inner() {
    console.log(typeof inner.caller)
    console.log(inner.caller)
}

outer()

new.target

new.target属性用于检测函数是否是使用new关键字调用。如果是使用new关键字调用的,则new.target就是被调用的构造函数;如果是作为普通函数调用,那么new.target的值就是undefined

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function Person() {
    this.name = 'clz'
    this.age = 21
    console.log(new.target)
}
const person = new Person()


function sum(a, b) {
    console.log(new.target)
    return a + b;
}
sum(1, 2)

那么,这个属性有什么用呢? 我们的构造函数通过new关键字可以实例化一个新对象,也可以直接作为普通函数调用,虽然会有构造函数需要首字母为大写的不成文规定,但是开发时还是有可能会搞错的。(虽然类的话,我都是直接用的ES6的class了)

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function Person() {
    if (!new.target) {
        throw '这是构造函数!!!'
    }

    this.name = 'clz'
    this.age = 21
}

let person = new Person()
console.log(person)

person = Person()
console.log(person)

赠品:函数的length属性

函数的length属性指该函数期望传入的参数数量,即形参的个数。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function fn1() { }
function fn2(a) { }
function fn3(a, b) { }

console.log(fn1.length)     // 0
console.log(fn2.length)     // 1
console.log(fn3.length)     // 2

问题:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function fn1(a, b, c = 2, d) { }
function fn2(a, b, ...c) { }

console.log(fn1.length)     // 2
console.log(fn2.length)     // 2

这是怎么回事呢? 我们再重新看下它的定义:函数的length属性指该函数期望传入的参数数量,即形参的个数。

所以说,形参的数量是不包括剩余参数个数,只包括第一个具有默认值之前的参数个数。

因为剩余参数和默认值参数都是可传可不传的。至于默认值参数后面的非默认值参数d,应该算是被默认值参数连累了。不过,因为非默认值参数不会有顺序问题,即d不需要依赖abc的值,所以只需要把它的定义往前移即可。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function fn1(a, b, d, c = 2) { }

这样子,fn1.length就会变成3。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-04-30,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
javascript 基础_JavaScript高级编程
1.分类: -基本类型 -String:任意字符串 -Number:任意的数字 -boolean: true/false -undefined:未定义 -null:空
全栈程序员站长
2022/09/24
1.6K0
javascript 基础_JavaScript高级编程
JavaScript 高级程序设计(第 4 版)- 函数
函数实际上是对象。每个函数都是Function类型的实例,Function也有属性和方法。函数名就是指向函数对象的指针。 # 箭头函数 只有一个参数可以不用括号,只有没有参数、或多个参数的情况下,才需要使用括号 箭头函数可以不用大括号,会隐式返回箭头后面那行代码的值 箭头函数不能使用arguments、super和new.target,也不能作为构造函数 箭头函数没有prototype属性 # 函数名 函数名就是指向函数的指针 使用不带括号的函数名会访问函数指针,而不会执行函数 所有函数对象都会暴露一个只读
Cellinlab
2023/05/17
4030
JavaScript 高级程序设计(第 4 版)- 函数
JavaScript函数(二)
在前面我们已经对函数作了简单的介绍,比如函数的定义、函数的声明、函数的调用和函数的传参等。本节将进一步介绍函数的应用,深度理解函数的各种使用。 函数是一个对象,每个函数时Function类型的一个实例,与其他引用类型一样有属性和方法。由于函数时对象,因此函数名实际上也是一个指向函数对象的指针,不会与某个函数绑定。函数通常是函数声明语法定义的。 function sum(x,y){ return x+y; } 上面使用函数声明语法定义的。
水击三千
2018/02/27
6730
javascript函数
JavaScript中的函数可以分为两类:有名函数与匿名函数。而定义函数的方式有两种:函数声明与函数表达式。
踏浪
2019/07/31
7820
JavaScript之函数(一)
在ES6之前,我们想要实现默认参数的话,需要先检测某个参数是否等于undefined,如果是的话,证明此时并没有传这个参数,那就给它一个默认值。
赤蓝紫
2023/03/11
1950
深入理解ES6--对象、函数扩展
javascript引擎会在访问作用域中查找其同名变量;如果找到,则变量的值被赋给对象字面量的同名属性。
奋飛
2019/08/14
4590
js程序设计02——变量、作用域问题
首先,ECMAScript中的数据类型分为基本类型、引用类型,基本类型的访问操作是按值的。引用类型的值是保存在内存中的对象,操作对象时,实际上操作的是对象的引用,而非对象自身。“javascript高
用户1141560
2017/12/26
9880
js程序设计02——变量、作用域问题
JavaScript 函数
例1中得到的结果是 3,而例2中是 Uncaught TypeError: add is not a function。
零式的天空
2022/03/02
5660
函数表达式
定义函数的方式有两种:第一种是“函数声明”,另一种就是“函数表达式”。 “函数声明”会被提升,意味着把函数声明放在调用它的语句后面。 示例1:
奋飛
2019/08/15
5140
前端关于面试你可能需要收集的面试题1
在 Vue3.0 中通过 Proxy 来替换原本的 Object.defineProperty 来实现数据响应式。
loveX001
2022/12/20
4080
JavaScript 严格模式
严格模式是 ECMAScript5 (ES5)发布的语言新特性。使用严格模式可以限制 JavaScript 的一些语言特性,使用严格模式可以去除在书写代码时的一些“骚操作”(有些特性在严格模式下是不可用的),使代码更严谨整洁。
多云转晴
2020/02/17
1K0
javascript 递归
求 1+2+3+3+...n 的和。 二逼青年: 首数加位数 ,乘以个数除以 2
chuchur
2022/10/25
4220
【译】《Understanding ECMAScript6》- 第二章-函数
函数在任何一门编程语言中都是很重要的一个环节。JavaScript至今已有多年的历史,但是它的函数仍然停留在很初级的阶段。函数问题的大量堆积,以及某些函数非常微妙的功能差异,很容易产生错误,并且有时候一个很简单的功能往往需要通过大量的代码来实现。 ES6吸取了多年来JavaScript开发者的反馈,在ES5函数的基础上进行了大量的改进,令JavaScript程序更加健壮并且减少了错误发生率。 默认参数 JavaScript函数的特性之一,便是接受传入的参数可以与函数定义的参数数量不同。利用这种特性,函数可以
寒月十八
2018/01/30
1.4K0
JavaScript高级技巧
以上代码要返回true,value必须是一个数组,而且还必须与Array构造函数在同个全局作用域中。(Array是window的属性)如果value是在另外一个iframe中定义的数组,上述代码则返回false。 注意:BOM的核心对象时window,它表示浏览器的一个实例。在浏览器中,window对象有双重角色,它既是通过JavaScript访问浏览器窗口的一个接口,又是ECMAScript规定的global对象。 解决上述问题: Object原生的toString()方法,都会返回一个[object NativeConstructorName]格式的字符串。
奋飛
2019/08/15
1.1K0
18Function类型
函数是这样的一段 Javascript代码,它只定义一次,但可能被执行或调用多次。
Dreamy.TZK
2020/05/31
5850
详解原型与原型链
其实,刚开始学 JavaScript 时,就有学过原型与原型链的相关知识了,只是当时还没有养成写笔记的习惯,导致现在已经忘的七七八八了。
赤蓝紫
2023/01/02
4150
详解原型与原型链
javascript冷知识
  如果放在数值前的话,对数值不会产生任何影响,不过放在其他的数据类型前面的话,就等于调用number()将他转为数字,布尔值false被转为0,ture被转为1
嘿嘿嘿
2018/09/10
5810
javascript冷知识
70个JavaScript面试问题
它们是属于虚值,可以使用Boolean(value)或!!value将其转换为布尔值时,值为false。
前端迷
2020/02/19
1.5K0
70个JavaScript面试问题
前端day19-JS高级(函数调用的上下文模式)学习笔记
1.1复习函数三种调用方式:普通函数 对象方法 构造函数(理解this关键字作用:谁调用这个函数,this指向谁)
帅的一麻皮
2020/05/10
1.2K0
JavaScript权威指南 - 函数
函数本身就是一段JavaScript代码,定义一次但可能被调用任意次。如果函数挂载在一个对象上,作为对象的一个属性,通常这种函数被称作对象的方法。用于初始化一个新创建的对象的函数被称作构造函数。
Esofar
2018/09/05
3K0
相关推荐
javascript 基础_JavaScript高级编程
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验