秋招复习计划-手写代码1

  |  

前言

部分重要代码记不住,只能一遍一遍的写呗。继承的几种实现,class继承,防抖与节流。


53



继承

继承有很多中方式,这里主要就写几种

组合式继承

1
2
3
4
5
6
7
8
9
10
11
12
13
function SuperType(name) {
this.name = name;
this.colors = ['red', 'blue', 'yellow'];
}
SuperType.prototype.sayName = function() {
console.log(this.name);
}
function SubType(name, age) {
SuperType.call(this, name);
this.age = age;
}
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType

寄生组合式继承

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function SuperType(name) {
this.name = name;
this.colors = ['red', 'blue', 'yellow'];
}
SuperType.prototype.sayName = function() {
console.log(this.name);
}
function SubType(name, age) {
SuperType.call(this, name);
this.age = age;
}
function inheritPrototype(child, parent) {
let prototype = Object.reate(parent.prototype);
prototype.constructor = child;
child.prototype = prototype;
}
inheritPrototype(SubType, SuperType);

ES6 class继承

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
class A {
constructor() {
this.x = 1;
}
printX() {
console.log(this.x);
}
}
class B extends A {
constructor() {
super(); //调用super函数,完成子类this的初始化
this.y = 2
}
printY() {
console.log(this.y);
}
}

防抖与节流

防抖

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>防抖验证</title>
<style type='text/css'></style>
</head>
<body>
<button onclick="callback()">防抖按钮</button>
</body>
<script type='text/javascript'>
let call = function() {
console.log('防抖');
}
let debounce = function(fn, delay = 2000) {
let timer = null;
return function() {
if(timer) clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, arguments);
timer = null;
}, delay)
}
}
let callback = debounce(call);
</script>
</html>

节流

时间戳

立即执行,执行后固定时间内不会执行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>节流验证</title>
<style type='text/css'></style>
</head>
<body>
<button onclick="callback('haha')">节流按钮</button>
</body>
<script>
function call() {
console.log('节流');
console.log(arguments[0]);
}
function throttle(fn, delay = 2000) {
let prev = Date.now();
return function() {
let _this = this;
let args = arguments;
let now = Date.now();
if(now - prev >= delay) {
fn.apply(_this, args);
prev = Date.now();
}
}
}
let callback = throttle(call);
</script>
</html>

定时器

触发设置定时器,定时器内无法执行,定时器到时间后执行。执行后可重新触发

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>节流验证</title>
<style type='text/css'></style>
</head>
<body>
<button onclick="callback('haha')">节流按钮</button>
</body>
<script>
function call() {
console.log('节流');
console.log(arguments[0]);
}
function throttle(fn, delay = 2000) {
let timer = null;
return function() {
let _this = this;
let args = arguments;
if(!timer) {
timer = setTimeout(function() {
fn.apply(_this, args);
timer = null;
}, delay)
}
}
}
let callback = throttle(call);
</script>
</html>
文章目录
  1. 1. 继承
    1. 1.1. 组合式继承
    2. 1.2. 寄生组合式继承
    3. 1.3. ES6 class继承
  2. 2. 防抖与节流
    1. 2.1. 防抖
    2. 2.2. 节流
|