Skip to content

Commit d9caefd

Browse files
c0sc0sc0sc0s
committed
执行上下文
1 parent 4f09a82 commit d9caefd

File tree

14 files changed

+614
-0
lines changed

14 files changed

+614
-0
lines changed

‎【核心篇】3.原型链的应用/1.html

+272
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,272 @@
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+
<div>test</div>
13+
<div>test2</div>
14+
<script>
15+
//1.
16+
// Object 和 Function
17+
18+
// 关于 {} 和 function() {}
19+
// Object.prototype.__proto__ = null; //不是所有对象都是Object的实例
20+
// Function.prototype.__proto__ = Object.prototype new Object();
21+
// Object.__proto__ = Function.prototype new Function
22+
// Function.__proto__ = Function.prototype
23+
// console.dir(Function);
24+
25+
26+
//2.修改代码
27+
//如何用原型链 来用面向对象的思维编程
28+
// var s1 = {
29+
// name: "jack",
30+
// sex: 'male',
31+
// age: 18,
32+
// major: 'cs',
33+
// hobby: "music"
34+
// }
35+
36+
// var s2 = {
37+
// name: "lucy",
38+
// sex: 'female',
39+
// age: 20,
40+
// major: 'english',
41+
// }
42+
43+
//函数执行如何查找变量？ -> 函数执行上下文中
44+
//模拟类
45+
// function Student(name,sex,age,major){
46+
// this.name = name;
47+
// this.sex = sex;
48+
// this.age = age;
49+
// this.major = major;
50+
// }
51+
// Student.prototype.study = function(){
52+
// console.log(this.name + '正在学习');
53+
// }
54+
55+
// var s1 = new Student('jack',18,'male', 'cs');
56+
// s1.hobby = 'music';
57+
// var s2 = new Student('lucy',20,'female', 'english');
58+
//[[GET]] ->
59+
60+
// function Student(sex, name, major) {
61+
// this.sex = sex;
62+
// this.name = name;
63+
// this.major = major;
64+
// }
65+
66+
// Student.prototype.skill = function () {
67+
// console.log("学习" + this.major);
68+
// }
69+
70+
// var s1 = new Student('male', 'jack', 'cs');
71+
// var s2 = new Student('female', 'lucy', 'x');
72+
// console.log(s1, s2);
73+
74+
75+
//3.instanceof方法
76+
// 本质：递归
77+
// a是不是Object的实例
78+
// a instanceof Func
79+
//作用： 判断 a 是不是 Func 的一个实例
80+
//1. s1.__proto__ === Object.prototype -> false
81+
//(1)
82+
// s1.__proto__ === Object.prototype
83+
84+
//1.s1.__proto__ = Student.prototype
85+
//2.Student.prototype.__proto__ === Object.prototype // true
86+
87+
// 1.
88+
// a.__proto__ === Object.prototype;//false
89+
90+
// 2.
91+
// a.__proto__.__proto__ === Object.prototype;//true
92+
93+
94+
// function foo() {
95+
// }
96+
// function bar() {
97+
// }
98+
// var a = new foo();
99+
// Object.myInstanceOf = function (obj, Fun) {
100+
// if(obj === null) return false;
101+
102+
// if (Object.getPrototypeOf(obj) === Fun.prototype) {
103+
// return true;
104+
// } else {
105+
// return Object.myInstanceOf(Object.getPrototypeOf(obj), Fun);
106+
// }
107+
// //Object.getPrototypeOf(obj) -> 对象的隐式原型
108+
// }
109+
110+
// function bar(){
111+
112+
// }
113+
// console.log( Object.myInstanceOf(s1,Object));
114+
115+
// console.log(Object.myInstanceOf(a, Object));
116+
117+
118+
119+
120+
//4.数组和类数组
121+
//arguments
122+
//dom
123+
// var arrLike = document.getElementsByTagName('div');
124+
// arr-like
125+
// var a = [1,2,3];
126+
// a = {
127+
// "0": 1,
128+
// "1": 2,
129+
// "2": 3,
130+
// "length": 3,
131+
// __proto__ : Array.prototype
132+
// }
133+
134+
// function demo(){
135+
// console.log(arguments);
136+
// }
137+
// demo(1,2,3);
138+
139+
140+
// function abc() {
141+
// console.log(arguments);
142+
// }
143+
144+
// abc(1, 2, 3);
145+
//数组的实例方法
146+
147+
// console.log(document.getElementsByTagName('div'));
148+
149+
// String的包装类
150+
// var a = "hello";
151+
// console.log(a[2]);
152+
// console.log(a.length);
153+
154+
155+
// var t = { a: 1 };
156+
// var x = Object.create(t);
157+
// console.log(x);
158+
//返回一个没有任何属性对象
159+
160+
161+
//5.隐式原型的修改
162+
// 浏览器： __proto__ //效率上
163+
//
164+
//Object.getPrototypeOf(obj) -> 返回参数对象的隐式原型
165+
166+
//Object.setPrototypeOf(obj,Obj)
167+
168+
//返回一个以obj为隐式原型的值的对象
169+
//Object.create(obj)
170+
//如何得到没有任何属性的对象?
171+
172+
// var obj = {
173+
// a:1
174+
// }
175+
// // obj = new Object();
176+
// // obj.a = 1;
177+
// new Function();
178+
179+
// var o = Object.create(obj); //
180+
// console.log(o);
181+
182+
183+
184+
//忽略掉getter和setter以及属性描述符
185+
186+
// 题目1 （网易云音乐）
187+
// 难度：满星
188+
// 考点：LHS&RHS (状态的读和写) [[GET]] 和 [[PUT]] ,
189+
// 所有的程序 -> 状态机
190+
// // 数据的集合 -> 读和写
191+
// var b = 2;
192+
// var a = b;
193+
//LHS RHS
194+
//[[PUT]] [[GET]]
195+
196+
// function A(){};
197+
// A.prototype.n = 3;
198+
// A.prototype.add1 = function () {
199+
200+
// this.n++;
201+
// // this.n = this.n + 1; //RHS [[GET]]
202+
// // LHS->[[PUT]]
203+
204+
// }
205+
// var a = new A();
206+
// var b = new A();
207+
// var c = new A();
208+
// a.add1(); //[[GET]] //关于this 绑定this
209+
// console.log(a);
210+
// b.add1(); // b.n = 4
211+
// console.log(b);
212+
// console.log(a.n,b.n,c.n) // 4, 4, 3
213+
//[[GET]] 和 [[PUT]]
214+
// function A(){};
215+
// A.prototype.m = { t: 1 };
216+
// A.prototype.add2 = function () {
217+
// this.m.t++ ;//覆盖
218+
// //[[PUT]]
219+
// }
220+
// var d = new A();
221+
222+
// d.add2();
223+
// console.log(d.m.t);//[[GET]]
224+
225+
226+
227+
// 题目2：
228+
// function Person(name, age) {
229+
// this.name = name;
230+
// this.age = age;
231+
// this.eat = function () {
232+
// console.log(age + "岁的" + name + "在吃饭。");
233+
// }
234+
// }
235+
236+
// Person.run = function () { } //静态
237+
// Person.prototype.walk = function () { }
238+
239+
240+
241+
// let p1 = new Person("jsliang", 24);
242+
// let p2 = new Person("jsliang", 24);
243+
244+
// // 对象的引用 的值判断 -> 判断地址
245+
// console.log(p1.eat === p2.eat); //false
246+
// console.log(p1.run === p2.run); //true
247+
// console.log(p1.walk === p2.walk); //true
248+
249+
250+
251+
252+
// 题目3
253+
// function foo() {
254+
// this.some = '222'
255+
// let ccc = 'ccc'
256+
// foo.obkoro1 = 'obkoro1'
257+
// foo.prototype.a = 'aaa'
258+
// }
259+
260+
// foo.koro = '扣肉'
261+
262+
// foo.prototype.test = 'test'
263+
264+
// let foo1 = new foo()
265+
// foo.prototype.test = 'test2'
266+
//foo1 访问到哪些属性？
267+
268+
//6.继承
269+
</script>
270+
</body>
271+
272+
</html>

‎【核心篇】3.原型链的应用/2.es6语法糖.html

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
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+
13+
</body>
14+
15+
</html>

‎【核心篇】3.原型链的应用/3.继承.html

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<!DOCTYPE html>
2+
<html lang="zh-CN">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport"
7+
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,minimal-ui:ios">
8+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
9+
<title>Document</title>
10+
</head>
11+
12+
<body>
13+
14+
<script>
15+
//1.不会提升
16+
//2.必须通过new调用
17+
18+
19+
20+
// var s1 = new Student('jack', 18, 'male', '家里蹲', 'cs');
21+
// console.log(s1);
22+
23+
24+
//ES5写法：继承：
25+
//https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf
26+
function People(name, age, sex) {
27+
this.name = name;
28+
this.age = age;
29+
this.sex = sex;
30+
}
31+
People.prototype.eat = function () {
32+
console.log(this.name + "正在吃饭");
33+
}
34+
35+
//extends -> 1. 2.
36+
const Buffer = Object.create(People.prototype);
37+
function Student(name, age, sex, school, major) {
38+
People.call(this, name, age, sex)
39+
this.school = school;
40+
this.major = major;
41+
}
42+
Student.prototype = Buffer;
43+
44+
45+
var a = new Student('jack', 18, 'male', 'xxx', 'yyy');
46+
a.eat();
47+
48+
49+
50+
</script>
51+
</body>
52+
53+
</html>

‎【核心篇】4.重新理解js/demo.js

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
2+
console.log([] == ![]);

‎【核心篇】4.重新理解js/deni.html

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
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+
var a = 1;
14+
(function b() {
15+
b = 2;
16+
console.log(a);
17+
})();
18+
console.log(b);
19+
</script>
20+
</body>
21+
22+
</html>

0 commit comments

Comments
 (0)