前言
本文将通过几个具体的代码片段，深入探讨 JavaScript 中的一些常见问题及其解决方案，包括节流函数、私有属性、柯里化函数以及继承机制等。
这些代码片段不仅展示了如何实现这些功能，还解释了其背后的原理和应用场景。通过阅读本文，读者可以更好地理解 JavaScript 的高级特性，并将其应用到实际项目中。
1. 节流函数 (Throttle)
代码片段
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
height: 5000px;
}
</style>
</head>
<body>
<input type="text" name="" id="">
<script>
window.onscroll = throttle(() => {
console.log('呵呵');
}, 300);
document.querySelector('input').oninput = function () {
console.log(this.value);
};
function throttle(fn, interval) { // interval : 时间间隔
let last = 0; // 上一次的时间
return function () {
let that = this;
let args = arguments;
let now = new Date();
if (now - last >= interval) {
last = now;
fn.apply(that, arguments);
}
};
}
</script>
</body>
</html>
代码解析
节流函数（Throttle）是一种常见的优化技术，用于限制某个事件触发的频率。在上述代码中，throttle 函数通过记录上一次执行的时间 last 和当前时间 now 来判断是否应该执行传入的函数 fn。如果两次调用之间的时间间隔大于或等于指定的 interval，则执行该函数并更新 last。
这种技术特别适用于处理频繁触发的事件，如滚动、输入等。例如，在页面滚动时，我们可能希望每隔一段时间才执行一次日志输出或其他操作，以避免性能问题。
2. 私有属性与模块模式
代码片段
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let Person = (function () {
let user = null;
class Person {
constructor(name, age, gender) {
user = name;
this.age = age;
let sex = gender;
}
showName() {
return user;
}
showAge() {
return this.age;
}
}
return Person;
})();
let ps = new Person('张三', 18);
console.log(ps.user); // undefined
console.log(ps.age); // 18
console.log(ps.showName(), ps.showAge()); // '张三' 18
console.log(ps.sex); // undefined
</script>
</body>
</html>
代码解析
模块模式 是一种封装私有属性和方法的技术，通常使用立即执行函数表达式（IIFE）。在上述代码中，Person 构造函数被包裹在一个 IIFE 中，从而创建了一个封闭的作用域。在这个作用域内定义的变量 user 和 sex 是私有的，无法从外部直接访问。
通过这种方式，我们可以确保某些属性不会被意外修改或访问，同时仍然可以通过公共方法（如 showName 和 showAge）来间接操作这些私有属性。这有助于提高代码的安全性和可维护性。
3. 柯里化函数 (Currying)
代码片段
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function fnSum(...args) {
return args.reduce((prev, next) => prev + next);
}
function fnSort(...args) {
return args.sort((a, b) => b - a);
}
function fnMax(...args) {
return Math.max(...args);
}
function fnMin(...args) {
return Math.min(...args);
}
function fnNoRepeatArr(...args) {
return [...new Set(args)];
}
function currying(fn) {
let arr = [];
return function result(...args) {
if (args.length === 0) {
return fn(...arr);
} else {
arr.push(...args);
return result;
}
};
}
console.log(currying(fnSum)(1, 2)(3, 4, 5)(6, 7, 8, 9)());
console.log(currying(fnSort)(5, 4, 6)(3)(7, 2, 8, 1, 9)());
console.log(currying(fnMax)(5, 4, 6)(8, 3, 4, 2, 0)(9, 1, 2, 4)());
console.log(currying(fnMin)(5)(2)(4)(2)(1)(6)());
console.log(currying(fnNoRepeatArr)(3, 2)(1, 1, 2, 2, 3, 4)(6, 5, 6, 6, 3, 3, 4)(9, 9, 5, 4, 2)());
</script>
</body>
</html>
代码解析
柯里化 是一种将多参数函数转换为一系列单参数函数的技术。在上述代码中，currying 函数接收一个原始函数 fn 并返回一个新的函数 result。每次调用 result 时，它会将传递的参数累积到数组 arr 中，直到没有任何参数传递为止，此时才会调用原始函数 fn 并传入累积的参数。
这种技术使得函数调用更加灵活，可以在不同的上下文中逐步传递参数。例如，fnSum 可以分多次传递参数，最终计算总和；fnSort 可以逐步添加需要排序的元素，最后进行排序操作。柯里化不仅提高了代码的可读性和复用性，还提供了一种优雅的方式来处理复杂的函数调用。
4. 继承机制
代码片段 1：构造函数继承
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function Person(name, age) {
this.name = name;
this.age = age;
this.showName = function () {
return this.name;
};
}
function SuperMan(name, age) {
Person.call(this, name, age);
}
let sm = new SuperMan('小超', 18);
console.log(sm.showName());
</script>
</body>
</html>
代码解析
构造函数继承 是一种简单的继承方式，通过 call 或 apply 方法调用父类构造函数，从而将父类的属性和方法复制到子类实例中。在上述代码中，SuperMan 构造函数通过 Person.call(this, name, age) 继承了 Person 的属性和方法。
这种方法的优点是简单直观，但缺点是无法继承原型链上的方法和属性，因此通常与其他继承方式结合使用。
代码片段 2：原型链继承
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function Person() {}
Person.prototype.name = '张三';
Person.prototype.age = 18;
Person.prototype.showName = function () {
return this.name;
};
function SuperMan() {}
SuperMan.prototype = new Person();
SuperMan.prototype.fly = function () {
return '飞';
};
let sm = new SuperMan();
console.log(sm.name, sm.age, sm.showName());
</script>
</body>
</html>
代码解析
原型链继承 是 JavaScript 中最经典的继承方式之一。通过将子类的原型对象设置为父类的实例，子类可以继承父类的所有原型方法和属性。在上述代码中，SuperMan.prototype = new Person() 实现了原型链继承，使得 SuperMan 实例可以访问 Person 的原型方法和属性。
然而，这种方式存在一个问题：所有子类实例共享同一个父类实例，因此可能会导致数据冲突。为了避免这种情况，通常会结合构造函数继承一起使用。
代码片段 3：组合继承
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.showName = function () {
return this.name;
};
Person.prototype.showAge = function () {
return this.age;
};
function SuperMan(name, age) {
Person.apply(this, [name, age]);
}
SuperMan.prototype = new Person();
let sm = new SuperMan('小超', 19);
console.log(sm.name, sm.age, sm.showName(), sm.showAge());
</script>
</body>
</html>
代码解析
组合继承 结合了构造函数继承和原型链继承的优点，既可以通过构造函数继承父类的实例属性，又可以通过原型链继承父类的原型方法。在上述代码中，SuperMan 构造函数通过 Person.apply(this, [name, age]) 继承了 Person 的实例属性，而 SuperMan.prototype = new Person() 则实现了原型链继承。
这种方式有效地解决了单一继承方式的局限性，是目前最常用的继承方式之一。
结尾
通过以上几个代码片段，我们详细探讨了 JavaScript 中的节流函数、私有属性、柯里化函数以及继承机制等高级编程技巧。这些技术不仅能够帮助开发者编写更高效、更安全的代码，还能提升代码的可读性和可维护性。
在实际项目中，合理运用这些技巧可以显著提高开发效率和代码质量。希望本文的内容对读者有所帮助，欢迎继续探索 JavaScript 的更多可能性。
