// 配合 setTimeout()
// 在默认情况下,在 setTimeout() 内部,this 关键字将被设置为 globalThis,在浏览器中它是 window 对象。当处理需要将 this 引用类实例的类方法时,你可以显式地将 this 绑定到回调函数,以便保持实例的引用。
class LateBloomer {
constructor() {
this.petalCount = Math.floor(Math.random() * 12) + 1;
}
bloom() {
// 延迟一秒后宣布开花
// setTimeout(this.declare.bind(this), 1000);
//你还可以使用箭头函数来实现此目的。
setTimeout(() => this.declare(), 1000)
}
declare() {
console.log(`l am a beautiful flower with ${this.petalCount} petals!`);
}
}
const flower = new LateBloomer();
flower.bloom();
Daily Archives: 2024-05-10
偏函数
function list(...args) {
return args;
}
function addArguments(arg1, arg2) {
return arg1 + arg2;
}
console.log(list(1, 2, 3)); // [1, 2, 3]
console.log(addArguments(1, 2)); // 3
// 创建一个带有预设前导参数的函数
const leadingThirtySevenList = list.bind(null, 37);
// 创建一个带有预设第一个参数的函数。
const addThirtySeven = addArguments.bind(null, 37);
console.log(leadingThirtySevenList()); // [37]
console.log(leadingThirtySevenList(1, 2, 3)); // [37, 1, 2, 3]
console.log(addThirtySeven(5)); // 42
console.log(addThirtySeven(5, 10)); // 42
//(最后一个参数 10 被忽略)
为何(最后一个参数 10 被忽略)
当你使用 .bind() 方法绑定一些参数到一个函数时,你实际上是在创建一个新的函数,它具有预设的初始参数。这些预设的参数在绑定时已经确定,它们将在新函数被调用时作为第一批参数传入,后续调用时传入的参数将按顺序排在这些预设参数之后。
在 addThirtySeven 函数的示例中,.bind(null, 37) 创建了一个新函数,其中第一个参数(arg1)被预设为 37。当 addThirtySeven(5) 被调用时,数字 5 被作为第二个参数(arg2),所以函数 addArguments 接收的参数为 37(arg1)和 5(arg2),结果是这两个数相加,即 42。
继续这个例子,当你调用 addThirtySeven(5, 10) 时,尽管你传入了两个参数(5 和 10),由于 addArguments 函数只期望和处理两个参数(arg1和arg2),在绑定时已经预设了第一个参数(arg1)为 37,所以传入的第一个参数(5)实际上会被作为第二个参数(arg2)。第二个参数(10)由于在函数 addArguments 中没有对应的第三个参数接收它,所以会被函数忽略,因此没有起作用。
总结来说,addThirtySeven 函数不会处理超过两个参数的情况,因为它是基于 addArguments 函数的,而 addArguments 只处理两个参数。绑定操作将预设的参数固定在参数列表的前面,超出原函数参数数量的额外参数会被忽略。
创建绑定函数
/* bind() 最简单的用法是创建一个函数,无论如何调用,它都会使用特定的 this 值进行调用。
JavaScript 新手经常犯的一个错误是将一个方法从对象中提取出来,然后再调用,并期望方法中的 this 是原来的对象(比如在回调中传入这个方法)。
然而,如果不做特殊处理的话,通常会丢失原始对象。使用这个函数加上原始的对象来创建一个绑定函数,巧妙地解决了这个问题:*/
// 顶级的“this”绑定到“globalThis”。
this.x = 9;
const module = {
x: 81,
getX() {
return this.x;
},
};
// 'getX'的‘this’参数绑定到"module"
console.log(module.getX()); //81
const retrieveX = module.getX;
// “retrieveX”的“this”参数在非严格模式下绑定到“globalThis”
console.log(retrieveX());//9
// 创建一个新函数“boundGetX”,并将“this”参数绑定到“module”。
const boundGetX = retrieveX.bind(module);
console.log(boundGetX());//81
剩余参数
剩余参数语法允许我们将一个不定数量的参数表示为一个数组。
function sum(...theArgs) {
let total = 0;
for (const arg of theArgs) {
total += arg;
}
return total;
}
console.log(sum(1, 2, 3));
// Expected output: 6
console.log(sum(1, 2, 3, 4));
// Expected output: 10
改进版本的isMobile函数
function isMobile() {
// 检查屏幕宽度,假定平板或更大尺寸的设备宽度大于 756px
if (window.innerWidth > 756) {
return false;
}
// 用户代理关键字列表,可以根据需要增减
var mobileKeywords = ["Android", "webOS", "iPhone", "iPad", "iPod", "BlackBerry", "IEMobile", "Opera Mini"];
// 检查用户代理字符串是否包含上述任一关键字
var userAgent = navigator.userAgent || navigator.vendor || window.opera;
for(var i = 0; i < mobileKeywords.length; i++) {
if (userAgent.indexOf(mobileKeywords[i]) > -1) {
return true;
}
}
// 特别针对Windows平板的检测,因为它们可能在用户代理中不包含上述关键字
if (/windows phone/i.test(userAgent)) {
return true;
}
// 最后,额外考虑小尺寸的设备可能是手机
return window.innerWidth <= 756;
}
这个版本的isMobile函数先通过屏幕宽度简单排除大部分非移动设备,然后使用用户代理字符串中特定的关键字来进一步确认。这样,即使是小屏幕的平板或对折设备,在用户代理中没有出现对应的移动设备关键字的情况下,也不会被误判为手机。
由于设备和浏览器环境的不断变化,这种方法仍然不是完全准确的,但它比仅仅基于屏幕尺寸的判断更加灵活和准确些。在实际应用中,可能还需要根据具体情况调整关键字列表或判断逻辑。