前端JS 之函数方法 function_前端函数方法-优快云博客

1.argments:是一个类数组对象，对应于传入函数的参数(不推荐使用，优先使用...)

2.length:表示函数期望的参数数量

三相关面试题

1. 函数声明与函数表达式的区别是什么？

2.什么是箭头函数？它与普通函数有什么区别？

3. 解释一下 JavaScript 中的 arguments 对象。

4. 什么是闭包？请举例说明它的应用场景，以及它有什么缺陷

5. 如何在 JavaScript 中创建一个私有方法？

6. 防抖（debounce）节流（throttle）的作用是什么，如何实现？

7. 描述一下立即调用函数表达式（IIFE）及其用途。

8. 解释 this 关键字在不同上下文中的指向。

9. 什么是回调函数？请给出示例。

10. 解释一下 async/await 的工作原理。

11. 如何处理 JavaScript 中的异步函数？

13. 什么是生成器函数（Generator Function）？请举例说明其用途

一起走走this关键字走过的路——this的指向问题

详解 async/await —— 从入门到实现原理

一函数与方法的定义

函数： 函数是一个封装了可重用代码的独立代码块，它可以执行特定的任务或计算

方法：方法是属于对象的函数。简单来说，方法是对象的一个属性，其值是一个函数。调用方法时，通常是通过对象来调用的，方法可以访问对象的属性。

function fun(){
   console.log('这是一个函数！')
}


var obj ={
   fun: function(){
   console.log('这是一个方法')
}
}

二深入函数与方法

创建方式

函数的创建方式

1.函数声明：通过function关键字声明

function fun(){}

2.函数表达试：将函数赋值给变量

const fun = funtion(){}

3.箭头函数（es6引入）：

const fun = () =>{}

4.立即执行：

(function(){
//逻辑代码
})()

方法的创建

1.对象自变量：

var obj ={
 fun:function(){}
}

2.简写方式（es6引入）：

var obj ={
 fun(){}
}

3.构造函数：

function Car(make, model) {
    this.make = make;
    this.model = model;
    this.display = function() {
        console.log(`Car: ${this.make} ${this.model}`);
    };
}
const myCar = new Car('Toyota', 'Camry');
myCar.display(); // 输出: Car: Toyota Camry

4.类（es6引入）：

class Animal {
    speak() {
        console.log('Animal speaks');
    }
     static add(a, b) {
        return a + b;  //静态方法
    }
}
const animal = new Animal();
animal.speak(); // 输出: Animal speaks
Animal.add(1,3) // 输出: 4

函数原型的实例（创建时自带的方法）

1.apply()：

会以给定的 this 值和作为数组（或类数组对象）提供的 arguments 调用该函数。

apply(thisArg)
apply(thisArg, argsArray)

2.bind():

创建一个新函数，当调用该新函数时，它会调用原始函数并将其 this 关键字设置为给定的值

3.call()：

call() 方法会以给定的 this 值和逐个提供的参数调用该函数。

call(thisArg, arg1, arg2, /* …, */ argN)

4.toString():

返回一个表示该函数源码的字符串。

函数原型的属性（创建时自带的属性）

1.argments:是一个类数组对象，对应于传入函数的参数(不推荐使用，优先使用...)

  /* 
      在调用函数时，浏览器每次都会传递两个隐含的参数：
          1:函数的上下文对象 this
          2:封装实参的对象 arguments
              当我们不确定有多少个参数传递的时候，可以使用arguments来获取，在JS中，
              arguments实际上它是当前函数的一个内置对象。所有函数都内置了一个
              arguments对象，arguments对象中存储了传递的所有实参。
              （1）、arguments 是一个类数组对象，它也可以通过索引来操作数据，通过 
                     arguments.length可以获取实参的长度获取长度
                - 具有数组的length属性    
                - 按照索引的顺序进行存储的
                - 它没有真正数组的一些方法
              （2）、在调用函数时，我们所传递的实参都会在arguments中保存
              （3）、我们即使不定义形参，也可以通过arguments来使用实参，只不过比较麻烦
                 arguments[0]表示第一个实参
                 arguments[1]表示第二个实参
              （4）、arguments有个属性叫callee，
                 这个属性对应一个函数对象，就是当前正在指向函数的对象  
     
       */

2.length:表示函数期望的参数数量

三相关面试题

1. 函数声明与函数表达式的区别是什么？

声明的函数，具有提升特性，直接赋值的没有

2.什么是箭头函数？它与普通函数有什么区别？

箭头函数：一种简洁的函数语法，使用 => 表达式定义。
区别：
- 没有自己的 this 绑定，this 值继承自外部上下文。
- 不能作为构造函数使用（即不能使用 new）。
- 不支持 arguments 对象。

3. 解释一下 JavaScript 中的 `arguments` 对象。

4. 什么是闭包？请举例说明它的应用场景，以及它有什么缺陷

闭包是在一个作用域中可以访问另一个函数内部的局部变量的函数。。

function outer() {
    let count = 0;
    return function inner() {
        count++;
        return count;
    };
}
const counter = outer();
console.log(counter()); // 输出: 1
console.log(counter()); // 输出: 2

5. 如何在 JavaScript 中创建一个私有方法？

闭包创建

6. 防抖（debounce）节流（throttle）的作用是什么，如何实现？

防抖函数用于限制事件频繁触发，只有在一定时间后触发一次,规定时间内触发则重新计时

function debounce(func, delay) {
    let timeout;
    return function(...args) {
        clearTimeout(timeout);
        timeout = setTimeout(() => func.apply(this, args), delay);
    };
}

节流函数限制事件在一定时间内只能触发一次。

const throttle = (func, delay) => {
    let last, deferTimer
    return (args) => {
        let now = +new Date()
        if (last && now < last + delay) {
            clearTimeout(deferTimer)
            deferTimer = setTimeout(() => {
                last = now
                func(args)
            }, delay)
        } else {
            last = now
            func(args)
        }
    }
}

7. 描述一下立即调用函数表达式（IIFE）及其用途。

IIFE 是一个定义后立即执行的函数。常用于创建私有作用域，避免全局命名冲突。

8. 解释 `this` 关键字在不同上下文中的指向。

在全局上下文中，this 指向全局对象（在浏览器中为 window）。
在对象的方法中，this 指向调用该方法的对象。
在构造函数中，this 指向新创建的实例。
在箭头函数中，this 继承自外部上下文

9. 什么是回调函数？请给出示例。

回调函数是作为参数传递给另一个函数的函数。

function fetchData(callback) {
    setTimeout(() => {
        const data = 'Data fetched';
        callback(data);
    }, 1000);
}
fetchData(data => console.log(data)); // 输出: Data fetched

10. 解释一下 `async/await` 的工作原理。

关键：生成器，Promise

11. 如何处理 JavaScript 中的异步函数？

关键：回调函数，promise,async/await

12. 解释一下 JavaScript 中的 apply、call 和 bind 方法的区别。

call：立即调用函数，传入的第一个参数为 this，后面的参数为函数参数。
apply：与 call 类似，但传入参数是一个数组。
bind：返回一个新函数，绑定了 this，可以在以后调用。

13. 什么是生成器函数（Generator Function）？请举例说明其用途

生成器函数是 JavaScript 中的一种特殊函数，它可以暂停执行，并在需要时恢复执行。生成器函数通过 function* 语法定义，内部可以使用 yield 关键字来暂停函数的执行，并返回一个值。每次调用 next() 方法时，生成器函数会从上次暂停的位置继续执行。。

function* generatorFunction() {
    // 使用 yield 暂停并返回值
    yield 1;
    yield 2;
    yield 3;
}

const gen = generatorFunction();
console.log(gen.next()); // 输出: { value: 1, done: false }
console.log(gen.next()); // 输出: { value: 2, done: false }
console.log(gen.next()); // 输出: { value: 3, done: false }
console.log(gen.next()); // 输出: { value: undefined, done: true }