theluyuan/webveuje
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

jiaqistart

Browse Source
This commit is contained in:
asd 2021-02-02 17:27:36 +08:00
parent 5d39890424
commit eca64f86c0
9 changed files with 472 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
js/demo/day4-1.html Normal file
View File

@ -0,0 +1,50 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var cat = {
name: "大喵",
run: function () {
console.log("我会跑")
},
eat() {
console.log("我在吃东西")
}
};
var dog = {
name: "大汪",
bark() {
console.log("汪汪汪")
},
paqiang(m, n) {
console.log(this)
console.log(m, n, "我能爬墙")
}
}
// 大喵需要借用大汪的paqiang的技能
// dog.paqiang.call(cat,1,2)
dog.paqiang.apply(cat, [1, 2])
dog.paqiang()
function a(val) {
var name = val
c = 0
function b() { }
}
var str = 'Hello World'
a(1)
console.log(window.c)
</script>
</head>
<body>
</body>
</html>

0
js/demo/day4.html Normal file
View File

0
js/kejian/1.html Normal file
View File

0
js/kejian/day2.md → js/kejian/day3.md
View File

111
js/kejian/day4.md Normal file
View File

@ -0,0 +1,111 @@
# this 指向
## 什么是 this
this 是执行期上下文中的一个属性，设计目的是在函数体内部指代函数当前的运行环境，以方便引用当前环境的其他变量
## 判断this指向的规则
**谁(对象)调用 就指向谁**
如果没在对象里面 this就指向全局window（全局对象）
如果在对象中，this指代的是当前对象实例，
箭头函数例外，他的函数内部没有this 在执行到this的时候会去找外部对象 所以 箭头函数的this最终就指向他外一层的对象 当他只有一层的时候 this会指向全局对象 window
思考下面的代码 会输出什么
```
var aaa=1;
var c=3
function fn(){
aaa=6
console.log(this.aaa)
}
var obj={
aaa:222,
fn:function(){
console.log(this.aaa)
}
fn1:()=>{
console.log(this.aaa)
}
}
fn()
obj.fn() //222
obj.fn1() //1
console.log(this.c) //this==> window
console.log(c) = console.log(window.c)
```
# call 和 apply (改变this指向)
### call
作用 ：改变this的指向
语法： B.方法名.call(A,n,m...)
这个方法本来是B拥有的，方法中的this 指向的也是B
执行完这句call 之后， 方法中的this 指向A
所以说A用了这个方法
```
var cat={
name:"大喵",
run:function(){
console.log("我会跑")
},
eat(){
console.log("我在吃东西")
}
};
var dog={
name:"大汪",
bark(){
console.log("汪汪汪")
},
paqiang(){
console.log(this)
console.log("我能爬墙")
}
}
// 大喵需要借用大汪的paqiang的技能
dog.paqiang.call(cat)
dog.paqiang()
//让别人用自己的技能
dog.paqiang.call(cat)
paqiang 是dog有的技能
this指向也变成猫了
```
### apply
apply 的作用和call 是完全一样的都是改变this的指向
语法： B.方法名.apply(A,[n,m...])
这个方法本来是B拥有的，方法中的this 指向的也是B
执行完这句apply 之后， 方法中的this 指向A
所以说A用了这个方法
上面的问题也可以用下面的方式解决：
```
var cat={
name:"大喵",
run:function(){
console.log("我会跑")
},
eat(){
console.log("我在吃东西")
}
};
var dog={
name:"大汪",
bark(){
console.log("汪汪汪")
},
paqiang(m,n){
console.log(this)
console.log(m,n,"我能爬墙")
}
}
// 大喵需要借用大汪的paqiang的技能
// dog.paqiang.call(cat,1,2) 这是call实现的
dog.paqiang.apply(cat,[1,2]) //这是用apply实现的
dog.paqiang()
```

70
js/kejian/day4yubianyi.md Normal file
View File

@ -0,0 +1,70 @@
# 预编译
### 预编译类型
* 全局预编译 （GO）
* 局部预编译 （AO）
### 预编译发生的时间点
* 全局预编译 发生在 整个页面加载完成
* 局部预编译 发生在 函数执行的前一刻
### 预编译过程
* GO:
1.先找变量和函数声明 赋值为undefined
2.扫描执行后 变量赋值
3.寻找函数声明 并把函数体赋给函数
4.执行
* AO
1.先找变量和形参
2.实参和形参相统一
3.寻找函数声明 并把函数体赋给函数
4.执行
函数表达式会在实参和形参相统一的步骤中完成赋值
```
function a (val) {
var name = val
// c=0 这里的c是全局变量 window.c 能访问到
function b () {}
var d=function(){} //d是一个函数表达式
}
var str = 'Hello World'
a(1)
```
分析：
GO:
1.找变量和函数声明 （a,str） 并赋值为Undefined
Go{
a:undefined,
str:undefined
}
2.执行的过程中 变量赋值
GO{
a:undefined
str:"hello world"
}
3.找函数声明
GO{
a:function(){}
str:"hello world"
}
Ao:
1.先找变量和形参
AO{
val:undefined,
name:undefined，
d:undefined
}
2.实参和形参相统一
AO{
val:1,
name:1，
d:function(){}
}
3.寻找函数声明 并把函数体赋给函数
AO{
val:1,
name:1,
b:function(){}，
d:function(){}
}

59
js/kejian/day5.md Normal file
View File

@ -0,0 +1,59 @@
# 作用域
定义：教我们怎么查变量值的一套规则
分类：
* 函数作用域：
在函数体范围内形成的作用域
* 块级作用域
在if else, for,while...等代码块范围内形成的作用域
demo:
函数作用域：
```
var value = 1;
function foo() {
console.log(value);
}
function bar() {
var value = 2;
foo();
}
bar(); // 1
```
bar执行时 会调用foo函数，foo输出了value 但是 foo函数中没有value 所以就在函数内找不到 之后会去上层作用域找value
foo 函数的上层作用域是window(全局对象) window中有一个value 并且值为1
demo2 块级作用域
```
var foo = true;
if (foo) {
let bar = foo * 2;
bar = something( bar );
console.log( bar ); //2
}
console.log( bar ); //报错
```
报错是因为 bar被let定义，{}里面的空间属于if的块级作用域，被let 定义的变量只能在块级作用域范围内访问 所以这里，在if代码块外部不能访问到bar 然后就会报错了
### 立即执行函数
语法：
(function(){
...函数体内要执行的操作
})()
注：() 里面可以写匿名函数 也可以写函数声明
如：
(function funname(){
...函数体内要执行的操作
})()
demo:
```
(function (){
console.log('bling')
})()
```

91
js/kejian/jsinfo - 副本.md Normal file
View File

@ -0,0 +1,91 @@
# js info
### 预编译
链接：
* https://juejin.cn/post/6916046341131599879
* https://juejin.cn/post/6896445621273083912
demo1:
```
function f() {
console.log(aa); // undefined
var aa = 5;
console.log(aa); // 5
}
f();
```
demo2:
```
var scope = 'global';
function t() {
console.log(scope); // undefined
var scope = 'local';
console.log(scope); // local
}
t();
console.log(scope); // global
```
demo3:
```
console.log(b) //undefined 变量提升
var b =2;
```
demo4
```
console.log(foo)
function foo(){
}
var foo =1
```
### 作用域
demo1:
```
function zxxFn () {
zxxs = 2
}
var zxx = 1
console.log(window.zxx) // 1
// console.log(zxxs) 未定义
zxxFn() // 执行后zxxs成为全局变量
console.log(zxxs) // 2
```
```
var zxx = 'zxx is a good girl'
function zxxFn () {
console.log(zxx)
var zxx = 'zxx is a great girl'
console.log(zxx)
zxx = 'very good'
console.log(zxx)
}
console.log(zxx)
zxxFn()
console.log(zxx)
// 依次输出 1. zxx is a good girl 2. undefined 3. zxx is a great girl
// 4. very good 5.zxx is a good girl
```
```
zxxAge = 'zxx is 18 years old'
function zxxFn () {
console.log(zxxAge)
var zxxAge = 'zxx is 8 years old'
var zxxSub = 'zxx is 25 years old'
console.log(zxxAge) // zxx is 8 years old
// console.log(zxxSub) // zxxSub is not defined
function zxxFnSub () {
var zxxSub = 'zxx is 18 years old'
console.log(zxxSub) // zxx is 18 years old
console.log(zxxAge) // zxxSub is not defined
}
zxxFnSub()
}
zxxFn()
```

91
js/kejian/yubianyilx.md Normal file
View File

@ -0,0 +1,91 @@
# js info
### 预编译
链接：
* https://juejin.cn/post/6916046341131599879
* https://juejin.cn/post/6896445621273083912
demo1:
```
function f() {
console.log(aa); // undefined
var aa = 5;
console.log(aa); // 5
}
f();
```
demo2:
```
var scope = 'global';
function t() {
console.log(scope); // undefined
var scope = 'local';
console.log(scope); // local
}
t();
console.log(scope); // global
```
demo3:
```
console.log(b) //undefined 变量提升
var b =2;
```
demo4
```
console.log(foo)
function foo(){
}
var foo =1
```
### 作用域
demo1:
```
function zxxFn () {
zxxs = 2
}
var zxx = 1
console.log(window.zxx) // 1
// console.log(zxxs) 未定义
zxxFn() // 执行后zxxs成为全局变量
console.log(zxxs) // 2
```
```
var zxx = 'zxx is a good girl'
function zxxFn () {
console.log(zxx)
var zxx = 'zxx is a great girl'
console.log(zxx)
zxx = 'very good'
console.log(zxx)
}
console.log(zxx)
zxxFn()
console.log(zxx)
// 依次输出 1. zxx is a good girl 2. undefined 3. zxx is a great girl
// 4. very good 5.zxx is a good girl
```
```
zxxAge = 'zxx is 18 years old'
function zxxFn () {
console.log(zxxAge)
var zxxAge = 'zxx is 8 years old'
var zxxSub = 'zxx is 25 years old'
console.log(zxxAge) // zxx is 8 years old
// console.log(zxxSub) // zxxSub is not defined
function zxxFnSub () {
var zxxSub = 'zxx is 18 years old'
console.log(zxxSub) // zxx is 18 years old
console.log(zxxAge) // zxxSub is not defined
}
zxxFnSub()
}
zxxFn()
```