Skip to content

Commit 4f09a82

Browse files
c0sc0sc0sc0s
committed
原型链
1 parent a2207bb commit 4f09a82

6 files changed

+245
-0
lines changed

‎【核心篇】2.原型链详解/0.课前练习.html

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Document</title>
8+
</head>
9+
<body>
10+
<!-- 1.加深对任务的理解 -->
11+
<script>
12+
console.log(a);
13+
console.log(123);
14+
</script>
15+
<h1>haha</h1>
16+
<script>
17+
console.log(456);
18+
</script>
19+
</body>
20+
</html>

‎【核心篇】2.原型链详解/1.看待数据的角度.html

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
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+
<script>
13+
//学生这个类型抽象出来
14+
//每个学生都有的公共提取
15+
//
16+
17+
18+
//代码冗余
19+
var s1 = {
20+
name: "jack",
21+
sex: 'male',
22+
age: 18,
23+
major: 'cs',
24+
hobby: "music"
25+
}
26+
27+
var s2 = {
28+
name: "lucy",
29+
sex: 'female',
30+
age: 20,
31+
major: 'english',
32+
}
33+
</script>
34+
</body>
35+
36+
</html>

‎【核心篇】2.原型链详解/2.面向对象编程.js

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
//面向对象设计的思维：(抽象和封装)
2+
//抽象共性进行拓展 extends
3+
//封装是面向对象语言的核心
4+
5+
//类 -> js没有类
6+
//原型链->模拟类->实现以面向对象编程思路
7+
8+
class Student {
9+
constructor(sex, name, major) {
10+
this.sex = sex;
11+
this.name = name;
12+
this.major = major;
13+
}
14+
15+
skill() {
16+
console.log("学习" + this.major);
17+
}
18+
}
19+
20+
var s1 = new Student("male", "jack", "cs");
21+
s1.skill();
22+
s1.hobby = "music";
23+
24+
var s2 = new Student("female", "lucy", "English");
25+
s2.skill();
26+
27+
//es6语法糖
28+
// console.log(Object.getPrototypeOf(s1));

‎【核心篇】2.原型链详解/3.new关键字.html

+110
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
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+
<script>
13+
14+
//1
15+
16+
//1.执行前 2.执行
17+
//new的流程：
18+
//执行前:
19+
//1.绑定this为空对象
20+
//2.让空对象 [[Prototype]] -> 函数的prototype属性
21+
//(1) 所有对象都有 [[Prototype]] (__proto__)
22+
// 所有的对象，本质都new出来
23+
//(2) 所有的函数对象 -> prototype
24+
25+
//3.正常执行函数
26+
27+
//4.如果函数返回的基本类型, 返回this的值，否则返回原函数的返回值
28+
29+
30+
31+
//访问对象属性的本质，底层帮你调用函数
32+
//默认是,
33+
//[[GET]]
34+
//1.判断对象里面有没有
35+
//2.判断他的__proto__指向的对象里面有没有
36+
37+
38+
39+
40+
//1所有函数都有 prototype
41+
//2所有对象都有一个 [[Prototype]]
42+
//所有对象都是new
43+
44+
45+
//所有的函数对象,都有一个 prototype
46+
//[GET] [[Prototype]]
47+
// function Foo() {
48+
// this.a = 1;
49+
// this.b = 2;
50+
// }
51+
52+
// var bar = new Foo();
53+
// //实例方法，静态方法, this去添加
54+
// console.log(bar);
55+
56+
// var a = new Foo();
57+
// console.log(a.c);
58+
59+
60+
// var a = new Foo();
61+
// console.log(a);
62+
//1.this到空对象
63+
64+
//二.创建对象的本质
65+
// var a = { name: 'jack' };
66+
// var a = new Array();
67+
// var b = [1, 2, 3]
68+
// //1.看对象本身有没有这个属性
69+
// //2. 如果对象本身没有，就去看他的[[Prototype]]
70+
// console.log(a);
71+
72+
73+
74+
//三.区分静态方法和实例方法
75+
//https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array#%E9%9D%99%E6%80%81%E5%B1%9E%E6%80%A7
76+
77+
78+
79+
//new ?
80+
// -> new Function()
81+
// -> new Object()
82+
// var a = [1, 2, 3];
83+
// var a = new Array(1,2,3)
84+
// 对象的键 -> 字符串
85+
// console.log(a);
86+
//a. 变量形式 ->
87+
// a.age -> a["age"]
88+
89+
// new Array()
90+
// a = {
91+
// "0": 1,
92+
// "1": 2,
93+
// "2": 3,
94+
// length: 3,
95+
// __proto__: Array.prototype
96+
// }
97+
98+
// new Array(1,2,3)
99+
// Object.setPrototypeOf(b, {})
100+
//Array.prototype
101+
//{}
102+
// console.log(b instanceof Array);
103+
// var b = { 0: 1 };
104+
// Object.setPrototypeOf(b, Array.prototype)
105+
// console.log(b instanceof Array);
106+
107+
</script>
108+
</body>
109+
110+
</html>

‎【核心篇】2.原型链详解/5.面试题.html

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
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+
<script>
13+
//爆杀阿里 四面试题
14+
//实例方法
15+
Object.prototype.a = function () {
16+
console.log('a');
17+
};
18+
19+
//实例方法
20+
Function.prototype.b = function () {
21+
console.log('b');
22+
};
23+
24+
//只要涉及到对象你就去思考
25+
//1.__proto__ -> 构造函数 的 prototype
26+
//2.如果他是函数对象，prototype
27+
28+
var F = function () { }; //函数对象 new Function
29+
var f = new F(); // //
30+
// console.log(F);
31+
32+
f.a();//[[GET]] -> 沿着__proto__ //a
33+
f.b();
34+
F.a();//'a'
35+
F.b();//'b'
36+
37+
</script>
38+
</body>
39+
40+
</html>

‎【核心篇】2.原型链详解/js中的对象.js

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
//js不是传统的面向对象语言，没有类的概念
2+
//js中除了基本数据类型就是对象
3+
4+
//js通过原型链机制 [模拟类] 来表示对象之间的关系
5+
6+
//1. 每个函数都有一个prototype属性 --> (1)constructor
7+
//2. 每个对象都有一个[[proto]]
8+
9+
//js中默认的查询机制 [[GET]]
10+
//(1) 对象是否有该属性
11+
//(2) 查询其[[proto]]指向的对象

0 commit comments

Comments
 (0)