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

简介: JavaScript之函数(二) 函数内部三个不常见的属性
看红宝书+查资料,重新梳理JavaScript的知识。

arguments.callee

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

先来一下阶乘函数看看

function factorial(num) {
    if (num <= 1) {
        return 1
    } else {
        return num * factorial(num - 1)
    }
}

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

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

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

function factorial(num) {
    if (num <= 1) {
        return 1
    } else {
        return num * factorial(num - 1)
    }
}

const copyFactorial = factorial

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

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

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来让函数逻辑和函数名解耦。这样子,无论函数叫什么名字,都能够正确的引用正确的函数。

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

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

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了)

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属性指该函数期望传入的参数数量,即形参的个数。

function fn1() { }
function fn2(a) { }
function fn3(a, b) { }

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

问题:

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的值,所以只需要把它的定义往前移即可。

function fn1(a, b, d, c = 2) { }

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

目录
相关文章
|
1天前
|
JavaScript 前端开发 网络架构
函数柯里化:JavaScript中的高级技巧
函数柯里化:JavaScript中的高级技巧
|
1天前
|
缓存 JavaScript 前端开发
Vue.js计算属性:实现数据驱动的利器
Vue.js计算属性:实现数据驱动的利器
|
1天前
|
JavaScript 前端开发
JavaScript 闭包:让你更深入了解函数和作用域
JavaScript 闭包:让你更深入了解函数和作用域
|
1天前
|
JavaScript 前端开发
JavaScript的`apply`方法:函数的“应用”与“调用”
JavaScript的`apply`方法:函数的“应用”与“调用”
|
1天前
|
JavaScript 前端开发
JavaScript的`bind`方法:函数的“复制”与“定制”
JavaScript的`bind`方法:函数的“复制”与“定制”
|
1天前
|
JavaScript 前端开发
JavaScript的`call`方法:实现函数间的调用!
JavaScript的`call`方法:实现函数间的调用!
|
1天前
|
设计模式 JavaScript 前端开发
JavaScript原型模式:实现对象共享属性和方法!
JavaScript原型模式:实现对象共享属性和方法!
|
2天前
|
缓存 JavaScript C++
浅谈Vue.js的计算属性computed
浅谈Vue.js的计算属性computed
8 0
|
2天前
|
JavaScript 前端开发
在JavaScript中,函数原型(Function Prototype)是一个特殊的对象
【5月更文挑战第11天】JavaScript中的函数原型是一个特殊对象,它为所有函数实例提供共享的方法和属性。每个函数在创建时都有一个`prototype`属性,指向原型对象。利用原型,我们可以向所有实例添加方法和属性,实现继承。例如,我们定义一个`Person`函数,向其原型添加`greet`方法,然后创建实例`john`和`jane`,它们都能调用这个方法。尽管可以直接在原型上添加方法,但推荐在构造函数内部定义以封装数据和逻辑。
18 2
|
2天前
|
前端开发 JavaScript 数据处理
在JavaScript中,异步函数是指什么
【5月更文挑战第9天】JavaScript中的异步函数用于处理非立即完成的操作,如定时器、网络请求等。它们可通过回调函数、Promise或async/await来实现。示例展示了如何使用async/await模拟网络请求:定义异步函数fetchData返回Promise,在另一异步函数processData中使用await等待结果并处理。当fetchData的Promise解析时,data变量接收结果并继续执行后续代码。注意,调用异步函数不会阻塞执行,而是会在适当时间点继续。
11 0