Skip to content

Commit 66775bc

Browse files
webVueBlogwebVueBlog
committed
add
1 parent 912e90b commit 66775bc

15 files changed

+404
-0
lines changed

‎README.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,20 @@ https://github.com/webVueBlog/Leetcode
1616
## 🧑🏻 阶段九
1717

1818
- 251.[元素的alt和title有什么区别](./阶段九/元素的alt和title有什么区别.js)
19+
- 252.[new](./阶段九/new.js)
20+
- 253.[call](./阶段九/call.js)
21+
- 254.[防抖](./阶段九/防抖.js)
22+
- 255.[flex](./阶段九/flex.html)
23+
- 256.[节流](./阶段九/节流.js)
24+
- 257.[柯里化](./阶段九/柯里化.js)
25+
- 258.[promise](./阶段九/promise.js)
26+
- 259.[字符串编号](./阶段九/字符串编号.js)
27+
- 260.[模拟forOf](./阶段九/模拟forOf.js)
28+
- 261.[super原理分析](./阶段九/super原理分析.js)
29+
- 262.[promise的单一状态与中转](./阶段九/promise的单一状态与中转.js)
30+
- 263.[promise.then](./阶段九/then.js)
31+
- 264.[then返回值的处理技巧](./阶段九/then返回值的处理技巧.js)
32+
- 265.[promise封装ajax](./阶段九/promise封装ajax.js)
1933

2034
## 🧑🏻 阶段八
2135

‎阶段九/call.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
let obj = {
2+
name: 'da',
3+
};
4+
5+
function showName(age) {
6+
console.log(this.name);
7+
console.log(age);
8+
}
9+
10+
Function.prototype.CallDemo = function(obj, ...arg) {
11+
if (typeof this !== 'function') {
12+
throw error;
13+
}
14+
obj.fn = this;
15+
const result = obj.fn(...arg);
16+
delete obj.fn;
17+
return result;;
18+
}
19+
showName.CallDemo(obj, 10);

‎阶段九/flex.html

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<title>Document</title>
9+
</head>
10+
11+
<body>
12+
<ul class="main">
13+
<li></li>
14+
<li></li>
15+
<li></li>
16+
<li></li>
17+
<li></li>
18+
<li></li>
19+
</ul>
20+
<style>
21+
.main {
22+
display: flex;
23+
padding: 0;
24+
width: 600px;
25+
height: 100%;
26+
margin: 0;
27+
flex-wrap: wrap;
28+
justify-content: center;
29+
}
30+
31+
.main li {
32+
width: 200px;
33+
height: 20px;
34+
margin-left: 20px;
35+
margin-bottom: 20px;
36+
background-color: blue;
37+
}
38+
</style>
39+
</body>
40+
41+
</html>

‎阶段九/new.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
function Da(name, age) {
2+
this.name = name;
3+
this.age = age;
4+
return null;
5+
}
6+
7+
Da.prototype.strange = 20;
8+
Da.prototype.show = function() {
9+
console.log(this.name);
10+
}
11+
12+
function NewDemo() {
13+
let obj = {};
14+
let constructor = [].shift.call(arguments);
15+
obj.__proto__ = constructor.prototype;
16+
// 改变构造函数指向 obj可以访问到构造函数中的属性
17+
const result = constructor.apply(obj, arguments);
18+
return typeof result === 'object' ? result || obj : obj;
19+
}
20+
21+
let newChild = NewDemo(Da, 'da', 11);

‎阶段九/promise.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
class Promise {
2+
static PENDING = "pending";
3+
static FULFILLED = "fulfilled";
4+
static REJECTED = "rejected";
5+
constructor(executor) {
6+
this.status = Promise.PENDING;
7+
executor(this.resolve.bind(this), this.reject.bind(this));
8+
}
9+
resolve(value) {
10+
this.value = value;
11+
this.status = Promise.FULFILLED;
12+
}
13+
reject(value) {
14+
this.value = value;
15+
this.status = Promise.REJECTED;
16+
}
17+
then(onFulfilled, onRejected) {
18+
19+
}
20+
}
21+
22+
let promise = new Promise((resolve, reject) => {
23+
resolve(123);
24+
});

‎阶段九/promise封装ajax.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
function ajax(url) {
2+
return new Promise((resolve, reject) => {
3+
let xhr = new XMLHttpRequest();
4+
xhr.open('GET', url);
5+
xhr.send();
6+
xhr.onload = function() {
7+
if ((this.status = 200)) {
8+
callback(JSON.parse(this.response));
9+
} else {
10+
throw new error('失败');
11+
}
12+
};
13+
xhr.onload = function() {
14+
reject();
15+
};
16+
});
17+
}

‎阶段九/promise的单一状态与中转.js

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
let p1 = new Promise((resolve, reject) => {
2+
resolve('成功随风倒十分');
3+
});
4+
5+
new Promise((resolve, reject) => {
6+
//状态一旦设置不会改变
7+
resolve(p1);
8+
reject('sfd');
9+
}).then(
10+
(msg) => {
11+
console.log(msg);
12+
},
13+
(error) => {
14+
console.log(error);
15+
}
16+
);
17+
18+
console.log('测试');
19+
20+
let p21 = new Promise((resolve, reject) => {
21+
resolve('fulfilled');
22+
});
23+
24+
let p4 = p21.then(
25+
(value) => {
26+
return {
27+
then(resolve, reject) {
28+
resolve('套娃1');
29+
},
30+
};
31+
},
32+
(reason) => console.log(reason)
33+
);
34+
35+
let p6 = p4.then((v) => {
36+
console.log(v);
37+
return {
38+
then(resolve, reject) {
39+
resolve('套娃2');
40+
},
41+
};
42+
});
43+
44+
let p7 = p6.then((v) => {
45+
console.log(v);
46+
});
47+
48+
// setTimeout(() => {
49+
console.log(p21);
50+
console.log(p4);
51+
console.log(p6);
52+
console.log(p7);
53+
// });

‎阶段九/super原理分析.js

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
/**
2+
* 表示从当前原型中执行方法，
3+
* super 一直指向当前对象
4+
* 下面是使用 this 模拟super，会有以下问题
5+
* 但this指向当前对象，结果并不是 admin的name值 */
6+
7+
/**
8+
* 当super 作为函数调用时,
9+
* 它代表的指向的是父类的构造函数,
10+
* 在子类的构造函数必须执行一次 super 函数
11+
* super虽然代表了父类 A 的构造函数,
12+
* 但是返回的是子类 B 的实例
13+
* 即 super 内部的 this 指的是 B 的实例
14+
*/
15+
16+
/**
17+
* super作为对象使用时，分为在普通方法中使用和在静态方法中使用
18+
* super 在静态方法之中指向父类，在普通方法之中指向父类的原型对象
19+
* 普通方法使用:super指向父类的原型,
20+
* 即A.prototype,可以访问到原型上的方法和属性,也就是指向它父类的原型对象
21+
* super.parent() // 父类的普通方法
22+
* 等价于Animal.prototype.parent() 父类的普通方法
23+
* 由于 super 指向父类的原型对象,
24+
* 所以定义在父类实例上的方法或属性, 是无法通过super 调用的
25+
*/
26+
27+
/**
28+
* 如果用在静态方法之中
29+
* 如果 super作为对象,用在静态方法之中,这时super将指向父类 , 而不是父类的原型对象
30+
* 在子类的静态方法中通过 super 调用父类的方法时，
31+
* 方法内部的 this 指向当前的子类而不是子类的实例
32+
*/
33+
let user = {
34+
name: 'user',
35+
show: function() {
36+
return this.name;
37+
},
38+
};
39+
let admin = {
40+
__proto__: user,
41+
name: 'admin',
42+
show() {
43+
return this.__proto__.show();
44+
},
45+
};
46+
console.log(admin.show()); //user
47+
48+
/**为了解决以上问题，需要调用父类方法时传递this */
49+
50+
let user1 = {
51+
name: 'user',
52+
show: function() {
53+
return this.name;
54+
},
55+
};
56+
57+
let admin1 = {
58+
__proto__: user1,
59+
name: 'admin1',
60+
show1() {
61+
return this.__proto__.show.bind(this);
62+
},
63+
};
64+
console.log(admin1.show1()()); //admin1
65+
66+
/**使用 super 调用时，在所有继承中 this 始终为调用对象
67+
* super 是用来查找当前对象的原型，而不像上面使用 this 查找原型造成死循环
68+
* 也就是说把查询原型方法的事情交给了 super，this 只是单纯的调用对象在各个继承中使用
69+
* super 只能在类或对象的方法中使用，而不能在函数中使用 */

‎阶段九/then.js

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
let func = function() {
2+
return new Promise((resolve, reject) => {
3+
resolve('返回值');
4+
});
5+
};
6+
7+
let cb = function() {
8+
return '新的值';
9+
};
10+
// then方法提供一个供自定义的回调函数，若传入非函数，则会忽略当前then方法。
11+
// 回调函数中会把上一个then中返回的值当做参数值供当前then方法调用。
12+
// then方法执行完毕后需要返回一个新的值给下一个then调用（没有返回值默认使用undefined）。
13+
// 每个then只可能使用前一个then的返回值。
14+
15+
func()
16+
.then(function() {
17+
return cb();
18+
})
19+
.then((resp) => {
20+
console.warn(resp);
21+
console.warn('1 =========<');
22+
});
23+
24+
func()
25+
.then(function() {
26+
//没有return值，定义中讲过若then没有返回值，提供给下一个then使用的参数就是undefined
27+
cb();
28+
})
29+
.then((resp) => {
30+
console.warn(resp);
31+
console.warn('2 =========<');
32+
});
33+
34+
func()
35+
.then(
36+
//then中cb()执行后返回的并不是一个函数，在Promise规范中会自动忽略调当前then，所以会把func中的返回值供下一个then使用，输出了“返回值”
37+
cb()
38+
)
39+
.then((resp) => {
40+
console.warn(resp);
41+
console.warn('3 =========<');
42+
});
43+
44+
func()
45+
.then(
46+
//直接把cb当做回调
47+
cb
48+
)
49+
.then((resp) => {
50+
console.warn(resp);
51+
console.warn('4 =========<');
52+
});

‎阶段九/then返回值的处理技巧.js

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
//后面的then是对我返回的promise的处理
2+
let p1 = new Promise((resolve, reject) => {
3+
resolve('fulfilled');
4+
})
5+
.then(
6+
(v) => {
7+
// console.log(v);
8+
// return v
9+
//如果返回的是promise
10+
return new Promise((resolve, reject) => {
11+
// resolve('fulfilled');
12+
// 这里不处理下面的then就会一直等待
13+
setTimeout(() => {
14+
resolve('fulfilled');
15+
}, 4000);
16+
}).then((value) => {
17+
return value; //23行会接收到
18+
});
19+
},
20+
(r) => {
21+
console.log(r);
22+
}
23+
)
24+
.then((value) => {
25+
console.log(value);
26+
});

0 commit comments

Comments
 (0)