前端JS 之 函数方法 function

目录

一  函数与方法的定义

二 深入函数与方法

 创建方式

函数的创建方式

 方法的创建

 函数原型的实例(创建时自带的方法)

1.apply():

2.bind():  

3.call():

4.toString():

 函数原型的属性(创建时自带的属性)

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)?请举例说明其用途

四  参考资料

Function

防抖节流,必须必拿下!

总结javascript处理异步的方法

一起走走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 中的 applycallbind 方法的区别。

  • 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 }

四  参考资料

Functionicon-default.png?t=O83Ahttps://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function

防抖节流,必须必拿下!icon-default.png?t=O83Ahttps://juejin.cn/post/7386969940941586466?searchId=20241104190820B9B41F79AD661F2F20DD

总结javascript处理异步的方法icon-default.png?t=O83Ahttps://juejin.cn/post/6844904101994561549?searchId=20241105111322E43DED2705992F80E11E

一起走走this关键字走过的路——this的指向问题icon-default.png?t=O83Ahttps://juejin.cn/post/7377694677275344896?searchId=2024110511213101664568AF450383B987

详解 async/await —— 从入门到实现原理icon-default.png?t=O83Ahttps://juejin.cn/post/7288963802649608250?searchId=20241105112701E26C805A375277836005

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值