diff --git a/js/demo/day4-1.html b/js/demo/day4-1.html new file mode 100644 index 0000000..89161e1 --- /dev/null +++ b/js/demo/day4-1.html @@ -0,0 +1,50 @@ + + + + + + + Document + + + + + + + + \ No newline at end of file diff --git a/js/demo/day4.html b/js/demo/day4.html new file mode 100644 index 0000000..e69de29 diff --git a/js/kejian/1.html b/js/kejian/1.html new file mode 100644 index 0000000..e69de29 diff --git a/js/kejian/day2.md b/js/kejian/day3.md similarity index 100% rename from js/kejian/day2.md rename to js/kejian/day3.md diff --git a/js/kejian/day4.md b/js/kejian/day4.md new file mode 100644 index 0000000..634f4f1 --- /dev/null +++ b/js/kejian/day4.md @@ -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() + +``` \ No newline at end of file diff --git a/js/kejian/day4yubianyi.md b/js/kejian/day4yubianyi.md new file mode 100644 index 0000000..d3c5753 --- /dev/null +++ b/js/kejian/day4yubianyi.md @@ -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(){} +} \ No newline at end of file diff --git a/js/kejian/day5.md b/js/kejian/day5.md new file mode 100644 index 0000000..25723b9 --- /dev/null +++ b/js/kejian/day5.md @@ -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') + })() +``` \ No newline at end of file diff --git a/js/kejian/jsinfo - 副本.md b/js/kejian/jsinfo - 副本.md new file mode 100644 index 0000000..a3d0ff9 --- /dev/null +++ b/js/kejian/jsinfo - 副本.md @@ -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() +``` diff --git a/js/kejian/yubianyilx.md b/js/kejian/yubianyilx.md new file mode 100644 index 0000000..a3d0ff9 --- /dev/null +++ b/js/kejian/yubianyilx.md @@ -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() +```