面向后端的前端技術(shù)分享
作者：九旬
來源：SegmentFault 思否社區(qū)
目的
分享日常開發(fā)工作中常遇到的問題 提升工作效率，編寫易維護(hù)的代碼 了解前端技術(shù)的趨勢
This
1. 事件中的 this
this指向當(dāng)前的 DOM 元素對象。addEventListener 添加時(shí))，this 指向了接收事件的 HTML 元素<style>
#box {
height: 300px;
line-height: 300px;
text-align: center;
}
</style>
<body>
<div id="box">Hello World</div>
<script>
function bluify() {
console.log(this);
this.style.backgroundColor = "#00CCFF";
this.innerHTML =
this.innerHTML === "Hello World" ? "你好，世界" : "Hello World";
}
box.addEventListener("click", bluify, false);
</script>
</body>2. 全局函數(shù)、匿名函數(shù)，this 指向是全局對象
瀏覽器中指向 WindowNode 環(huán)境指向 Global
function func() {
console.log(this); // Window or global
}
func();
3. 對象的方法調(diào)用
this 指向當(dāng)前的對象const xiaoming = {
name: "小明",
getName() {
console.log(this.name);
},
};
xiaoming.getName(); // 小明4. 構(gòu)造函數(shù)內(nèi)調(diào)用，this 指向?qū)嵗龑ο?/span>
function Person(name, sex, age) {
this.name = name;
this.sex = sex;
this.age = age;
}
let xiaoming = new Person("小明", "男", 20);
console.log(xiaoming); // { name: '小明', sex: '男', age: 20 }
5. call/apply/bind 調(diào)用
this 指向第一個(gè)參數(shù)const xiaoming = {
name: "小明",
getName() {
console.log(this.name);
},
};
const xiaohong = {
name: "小紅",
};
xiaoming.getName.call(xiaohong); // 小紅this 復(fù)制引用
this 指向不達(dá)預(yù)期的問題setTimeout 中的函數(shù)let that = this;var name = "window";
let obj = {
name: "obj",
outout1() {
let that = this;
setTimeout(function() {
console.log("普通函數(shù)", that.name);
}, 1000);
},
outout2() {
setTimeout(() => {
console.log("箭頭函數(shù)", this.name);
}, 1000);
},
};
obj.outout1(); // 普通函數(shù) obj
obj.outout2(); // 普通函數(shù) obj
this是在定義的時(shí)候就確定的，使用它可以少寫一步 this 指向，推薦使用。定時(shí)器
setTimeout：規(guī)定 N 秒后執(zhí)行 setInterval：規(guī)定 N 秒后循環(huán)執(zhí)行
參數(shù)
函數(shù)/字符串、字符串會(huì)觸發(fā) eval()時(shí)長毫秒（ms） 傳入函數(shù)的參數(shù)列表
// setTimeout / setInterval 使用
setTimeout(
(...args) => {
let sum = args.reduce((p, c) => p + c);
console.log(args, sum); //[ 1, 2, 3 ] 6
},
1000,
1,
2,
3
);
// 這段代碼的意思是：在 1 秒后將這個(gè)函數(shù)推入執(zhí)行棧，然后傳遞參數(shù)1,2,3到函數(shù)中
setTimeout("alert(0)", 2000);
eval() 解析后執(zhí)行，但是 eval 函數(shù)非常耗性能，非特殊不推薦。clearInterval(n);
clearTimeout(n);
setTimeout
設(shè)置 0 秒也會(huì)在下一個(gè)宏任務(wù)中執(zhí)行（異步） 定時(shí)器在 for 中輸出 1-10 的坑（forEach 不可跳出循環(huán)）
// for & setTimout
for (var i = 1; i <= 10; i++) {
setTimeout(() => {
console.log(i); // ??
}, 1000);
}
setTimeout 被延遲到下一次事件循環(huán)中執(zhí)行。let arr = [1, 2, 3];
arr.forEach((e) => {
console.log(e);
1, 2, 3;
e += 1;
if (e === 2) {
// break ！X
// return ！X
}
});
console.log(arr); // [1, 2, 3];forEach中使用break、return等都不會(huì)跳出循環(huán)。for操作for (let i = 0; i < arr.length; i++) {
if (arr[i] === 2) {
break;
}
arr[i] += 1;
}
console.log(arr); // [ 2, 2, 3 ]setInterval
視頻學(xué)習(xí)的定時(shí)保存學(xué)時(shí) 掃碼登錄的輪詢
問題
N 秒后推入執(zhí)行棧，而不是 N 秒后執(zhí)行 會(huì)因?yàn)榍懊嬗写a在執(zhí)行而導(dǎo)致時(shí)間變短
let startTime = new Date().getTime();
let count = 0;
setInterval(() => {
let i = 0;
while (i++ < 10000000); // 假設(shè)這里是查詢數(shù)據(jù)帶來的網(wǎng)絡(luò)延遲，用來增加每次函數(shù)執(zhí)行的時(shí)間
count++;
console.log(
"與原設(shè)定的間隔時(shí)差了：",
new Date().getTime() - (startTime + count * 1000),
"毫秒"
);
}, 1000);
不 clear的話會(huì)一直保存在內(nèi)存中，造成內(nèi)存泄漏。使用場景：保存學(xué)時(shí)、人臉識(shí)別、考試倒計(jì)時(shí)等 多個(gè)頁面棧共享定時(shí)器
解決方法
settimeout模擬setinterval// 自定義一個(gè)定時(shí)器
let timer = null;
function interval(func, wait) {
let interv = function() {
func.call(null);
timer = setTimeout(interv, wait);
};
timer = setTimeout(interv, wait);
}
// 使用定時(shí)器
interval(() => {
let date = new Date();
console.log("log..", `${date.getMinutes()}: ${date.getSeconds()}`);
}, 1000);
// 清楚定時(shí)器
setTimeout(() => {
clearTimeout(timer);
}, 1000 * 6);
// 清楚當(dāng)前頁面的所有定時(shí)器
for (let i = 1; i < 100000; i++) {
clearInterval(i);
clearTimeout(i);
}
id，用于清除。
評論
圖片
表情