普通函数在调用时,this为obj.obj1.fun(),this->obj1,箭头函数在声明定义时this->obj。
Javascript中bind、call、apply區別-CSDN博客
从原型链视角解读VueComponent与Vue关系_vue中重要的原型链关系-CSDN博客
prototype这个属性只有函数对象才有!(构造)函数的原型对象
_proto_所以对象都有此属性,总之想对应(构造)函数的原型对象
Promise其实也不难-CSDN博客
async与await
在JavaScript中,async
和 await
关键字是处理异步操作的重要工具,它们让异步代码看起来和写起来更像是同步代码。async
函数是返回一个Promise对象的函数,而await
关键字则用于等待Promise解决(resolve)或拒绝(reject),并暂停async
函数的执行,直到Promise处理完成。
async 函数
一个async
函数会自动将它的返回值封装在一个Promise中。如果函数执行正常结束(即没有遇到return
语句或异常),它返回的Promise会被解决(resolve),其解决的值是undefined
。如果函数通过return
语句返回了一个值,这个值会被封装在一个被解决的Promise中。如果函数抛出了一个异常,返回的Promise会被拒绝(reject),异常值会被用作拒绝的原因。
await 关键字
await
关键字只能在async
函数内部使用。当await
一个Promise时,async
函数会暂停执行,直到Promise解决(resolve)或拒绝(reject),然后函数继续执行,并返回解决的值或抛出拒绝的原因。
经典示例
假设我们有两个异步操作:fetchData1()
和 fetchData2()
,它们都返回Promise。我们想要先执行fetchData1()
,并在其完成后执行fetchData2()
。使用async
和await
,我们可以这样写:
async function fetchDataSequentially() {
console.log('开始执行 fetchData1');
const data1 = await fetchData1(); // 等待 fetchData1 完成
console.log('fetchData1 完成,数据:', data1);
console.log('开始执行 fetchData2');
const data2 = await fetchData2(); // 等待 fetchData2 完成
console.log('fetchData2 完成,数据:', data2);
}
// 假设的异步函数,返回Promise
function fetchData1() {
return new Promise((resolve) => {
setTimeout(() => {
resolve('数据1');
}, 1000); // 假设这个操作需要1秒
});
}
function fetchData2() {
return new Promise((resolve) => {
setTimeout(() => {
resolve('数据2');
}, 500); // 假设这个操作需要0.5秒
});
}
// 调用函数
fetchDataSequentially();
// 控制台输出将会是:
// 开始执行 fetchData1
// fetchData1 完成,数据: 数据1
// 开始执行 fetchData2
// fetchData2 完成,数据: 数据2
在这个例子中,fetchDataSequentially
函数首先打印出“开始执行 fetchData1”,然后等待fetchData1()
返回的Promise解决,并打印出解决的值。接着,它打印出“开始执行 fetchData2”,并等待fetchData2()
返回的Promise解决,最后打印出fetchData2()
的解决值。
简单来说,闭包就是能够访问另一个函数作用域中变量的函数。这通常发生在一个函数内部创建另一个函数时,内部函数可以访问外部函数作用域中的变量。
闭包在以下情况中自然产生:
function createCounter() {
let count = 0; // 私有变量
return function() { // 闭包
count = count + 1; // 访问并修改外部函数的变量
return count;
};
}
const counter = createCounter();
console.log(counter()); // 输出: 1
console.log(counter()); // 输出: 2
防抖:用户已知触发莫格函数,触发的事件间隔如果小于设定的事件间隔,则只执行依次
节流:在设定之间间隔内只执行依次
函数防抖(Debounce)与节流(Throttle)是前端开发中常用的两种优化技术,用于限制函数的执行频率,以提高页面性能和用户体验。下面将分别对这两种技术进行详细解析。
概念:
函数防抖是指在事件被连续频繁触发时,只有最后一次触发的事件才会被执行处理函数,如果在指定的时间间隔内再次触发事件,则重新计算时间间隔。简单来说,就是“等一等再执行”,确保函数在事件停止触发后才执行。
应用场景:
实现原理:
函数防抖通常通过setTimeout
来实现,设置一个定时器,在事件触发时清除之前的定时器并重新设置,确保只有在最后一次触发后指定的时间间隔内没有再次触发事件时,才执行函数。
示例代码:
function debounce(fn, delay) {
let timer = null;
return function() {
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, arguments);
}, delay);
};
}
// 使用示例
window.onresize = debounce(function() {
console.log('窗口大小已调整');
}, 500);
-------------------------------axios+防抖---------------------------
// 防抖函数
function debounce(fn, delay) {
let timer = null;
return function (...args) {
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, args);
}, delay);
};
}
// 假设的Axios请求函数
function fetchData() {
axios.get('https://api.example.com/data')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('Error fetching data:', error);
});
}
// 创建一个防抖的fetchData
const debouncedFetchData = debounce(fetchData, 500);
// 绑定到某个事件,比如按钮点击
document.getElementById('myButton').addEventListener('click', debouncedFetchData);
概念:
函数节流是指在一定时间内,无论事件被触发多少次,函数只会被执行一次。它确保函数在指定的时间间隔内只执行一次,而不是在每次事件触发时都执行。简单来说,就是“按时间间隔执行”,确保函数不会过于频繁地被调用。
应用场景:
实现原理:
函数节流可以通过setTimeout
或requestAnimationFrame
来实现,也可以通过时间戳来判断是否达到指定的时间间隔。
示例代码(使用setTimeout):
function throttle(fn, delay) {
let lastTime = 0;
return function() {
const now = Date.now();
if (now - lastTime >= delay) {
fn.apply(this, arguments);
lastTime = now;
}
};
}
// 使用示例
window.onscroll = throttle(function() {
console.log('滚动事件被触发');
}, 1000);
------------------axios+节流-----------------
// 节流函数
function throttle(fn, limit) {
let lastFunc;
let lastRan;
return function (...args) {
const context = this;
if (!lastRan) {
fn.apply(context, args);
lastRan = Date.now();
} else {
clearTimeout(lastFunc);
lastFunc = setTimeout(function () {
if ((Date.now() - lastRan) >= limit) {
fn.apply(context, args);
lastRan = Date.now();
}
}, limit - (Date.now() - lastRan));
}
};
}
// 假设的Axios请求函数(同上)
function fetchData() {
// ...
}
// 创建一个节流的fetchData
const throttledFetchData = throttle(fetchData, 1000);
// 绑定到某个事件,比如滚动事件
window.addEventListener('scroll', throttledFetchData);