jiaqistart
This commit is contained in:
parent
5d39890424
commit
eca64f86c0
50
js/demo/day4-1.html
Normal file
50
js/demo/day4-1.html
Normal 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
0
js/demo/day4.html
Normal file
0
js/kejian/1.html
Normal file
0
js/kejian/1.html
Normal file
111
js/kejian/day4.md
Normal file
111
js/kejian/day4.md
Normal 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
70
js/kejian/day4yubianyi.md
Normal 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
59
js/kejian/day5.md
Normal 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
91
js/kejian/jsinfo - 副本.md
Normal 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
91
js/kejian/yubianyilx.md
Normal 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()
|
||||
```
|
||||
Loading…
Reference in New Issue
Block a user