目录
1.argments:是一个类数组对象,对应于传入函数的参数(不推荐使用,优先使用...)
3. 解释一下 JavaScript 中的 arguments 对象。
6. 防抖(debounce)节流(throttle)的作用是什么,如何实现?
13. 什么是生成器函数(Generator Function)?请举例说明其用途
一 函数与方法的定义
函数: 函数是一个封装了可重用代码的独立代码块,它可以执行特定的任务或计算
方法:方法是属于对象的函数。简单来说,方法是对象的一个属性,其值是一个函数。调用方法时,通常是通过对象来调用的,方法可以访问对象的属性。
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 }