From 203c5385656f684624565b354383d3273b85a14e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=8D=8E=E4=BC=9F?= <1931626338@qq.com> Date: Thu, 3 Nov 2022 12:51:28 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E9=80=92=E5=BD=92=EF=BC=8C=E4=B8=A5?= =?UTF-8?q?=E6=A0=BC=E5=87=BD=E6=95=B0=EF=BC=8C=E9=93=BE=E5=BC=8F=E5=87=BD?= =?UTF-8?q?=E6=95=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...\346\254\241\344\275\234\344\270\232.html" | 55 ++++ ...\346\254\241\344\275\234\344\270\232.html" | 62 ++++ .../2022-10-31 \351\227\255\345\214\205.md" | 157 ++++++++++ ...45\346\240\274\345\207\275\346\225\260.md" | 274 ++++++++++++++++++ 4 files changed, 548 insertions(+) create mode 100644 "12 \351\231\210\345\215\216\344\274\237/\344\275\234\344\270\232/2022-11-02 \347\254\254\345\205\253\346\254\241\344\275\234\344\270\232.html" create mode 100644 "12 \351\231\210\345\215\216\344\274\237/\344\275\234\344\270\232/2022-11-03 \347\254\254\344\271\235\346\254\241\344\275\234\344\270\232.html" create mode 100644 "12 \351\231\210\345\215\216\344\274\237/\347\254\224\350\256\260/2022-10-31 \351\227\255\345\214\205.md" create mode 100644 "12 \351\231\210\345\215\216\344\274\237/\347\254\224\350\256\260/2022-11-02 \351\223\276\345\274\217\345\207\275\346\225\260\357\274\214\351\200\222\345\275\222,\344\270\245\346\240\274\345\207\275\346\225\260.md" diff --git "a/12 \351\231\210\345\215\216\344\274\237/\344\275\234\344\270\232/2022-11-02 \347\254\254\345\205\253\346\254\241\344\275\234\344\270\232.html" "b/12 \351\231\210\345\215\216\344\274\237/\344\275\234\344\270\232/2022-11-02 \347\254\254\345\205\253\346\254\241\344\275\234\344\270\232.html" new file mode 100644 index 0000000..996b3ba --- /dev/null +++ "b/12 \351\231\210\345\215\216\344\274\237/\344\275\234\344\270\232/2022-11-02 \347\254\254\345\205\253\346\254\241\344\275\234\344\270\232.html" @@ -0,0 +1,55 @@ + + + + + + + Document + + + + + + \ No newline at end of file diff --git "a/12 \351\231\210\345\215\216\344\274\237/\344\275\234\344\270\232/2022-11-03 \347\254\254\344\271\235\346\254\241\344\275\234\344\270\232.html" "b/12 \351\231\210\345\215\216\344\274\237/\344\275\234\344\270\232/2022-11-03 \347\254\254\344\271\235\346\254\241\344\275\234\344\270\232.html" new file mode 100644 index 0000000..7486fc3 --- /dev/null +++ "b/12 \351\231\210\345\215\216\344\274\237/\344\275\234\344\270\232/2022-11-03 \347\254\254\344\271\235\346\254\241\344\275\234\344\270\232.html" @@ -0,0 +1,62 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git "a/12 \351\231\210\345\215\216\344\274\237/\347\254\224\350\256\260/2022-10-31 \351\227\255\345\214\205.md" "b/12 \351\231\210\345\215\216\344\274\237/\347\254\224\350\256\260/2022-10-31 \351\227\255\345\214\205.md" new file mode 100644 index 0000000..34499dc --- /dev/null +++ "b/12 \351\231\210\345\215\216\344\274\237/\347\254\224\350\256\260/2022-10-31 \351\227\255\345\214\205.md" @@ -0,0 +1,157 @@ +## 作用域 + +#### 作用域 + +outer.[[scope]]: 每个函数都有作用域(码农看不到,供js内部调用)， 其中存储了**执行期的上下文集合** + +执行期上下文：当函数执行前，会创建一个称为执行期上下文的内部对象(AO)。一个执行期上下文定义了一个函数执行时的环境，函数每次执行时对应的执行上下文都是独一无二的，所以多次调用一个函数会导致创建多个执行上下文，当函数执行元毕，它所产生的执行上下文被销毁。 + +查找变量：从作用域链的顶端依次向下查找。 + +**作用域链**：[[]] + +```js +function outer(){ + function inner(){ + var b = 23; + } + var a = 12; + b(); +} +var global = 100; +a(); +``` + +**作用域详细图解**:https://blog.csdn.net/qq_53225741/article/details/125082166 + +## 闭包 + +```js +function a(){ + var aa = '这是外层函数'; + function b(){ + var bb = '这是中层函数'; + function c(){ + var cc = '这是里层函数，我最先释放'; + } + return c; // + } + b(); +} +//a(); + +var fun = a(); + + +``` + +闭包作用： + +- 实现公有变量 +- 可以做**缓存（存储结构**） 练习4 + +- 可以实现封装（继承） +- 模块化开发，防止污染全局变量， + +闭包缺点：当函数保存在外部时，将会生成闭包，闭包会导致原有作用域链不释放，从而造成**内存泄漏**。 + +```js +//函数内部可以访问外部的全局变量 + //函数外部无法读取函数内部的变量 + // let age = 10; + // function huhu(){ + // console.log(age); + // } + // huhu(); + + //链式作用域结构 + //首先子对象会在自身的作用域寻找变量，如果没有则一层一层的向父级寻找。、 + // var name = '小明' + // function man() { + // console.log(name) + // var age = '20'; + // (function getage() { + // console.log(age) + // }()) + // } + // man() + + //闭包的作用 + //访问局部变量 + // function man(){ + // var age = 20; + // return function(){ + // console.log(age); + // } + // } + // //console.log(age); //报错 + // var huhu = man(); + // huhu(); + + //保存局部变量 + //因为垃圾回收机制的存在，函数执行完成后里面的局部变量会被销毁 + // function get(){ + // var num = 0; + // return function(){ + // console.log(num++); + // } + // } + // var aa = get(); + // aa(); // 0 + // aa(); // 1 + + //实现类的封装 + // function man(){ + // var name = '小明'; + // var age = 15; + // return { + // getName : function (){ + // console.log(name); + // }, + // setName : function (newName){ + // name = newName; + // } + // } + // } + // var huhu = new man(); + // huhu.getName(); + // huhu.setName('张三'); + // huhu.getName(); + + //注意点：内存泄漏 （正常情况下，因为垃圾回收机制，局部变量在函数执行完毕之后其生命周期也结束， + //所以内存会被回收释放。但是因为我们使用了闭包，导致变量一直保存在内存，无法得到释放，造成内存的消耗。） + //退出函数前，将不使用的局部变量删除，或者解除函数的引用 + // function num(){ + // var num = 0; + // return function(){ + // console.log(num++); + // } + // } + // var huhu = num(); + // huhu(); + // huhu(); + // huhu = null; //解除函数的引用，此时变量num释放 +``` + + + + + + + + + + + + + + + + + + + + + + + diff --git "a/12 \351\231\210\345\215\216\344\274\237/\347\254\224\350\256\260/2022-11-02 \351\223\276\345\274\217\345\207\275\346\225\260\357\274\214\351\200\222\345\275\222,\344\270\245\346\240\274\345\207\275\346\225\260.md" "b/12 \351\231\210\345\215\216\344\274\237/\347\254\224\350\256\260/2022-11-02 \351\223\276\345\274\217\345\207\275\346\225\260\357\274\214\351\200\222\345\275\222,\344\270\245\346\240\274\345\207\275\346\225\260.md" new file mode 100644 index 0000000..be3175e --- /dev/null +++ "b/12 \351\231\210\345\215\216\344\274\237/\347\254\224\350\256\260/2022-11-02 \351\223\276\345\274\217\345\207\275\346\225\260\357\274\214\351\200\222\345\275\222,\344\270\245\346\240\274\345\207\275\346\225\260.md" @@ -0,0 +1,274 @@ +## 作用域 + +#### 作用域 + +outer.[[scope]]: 每个函数都有作用域(码农看不到,供js内部调用)， 其中存储了**执行期的上下文集合** + +执行期上下文：当函数执行前，会创建一个称为执行期上下文的内部对象(AO)。一个执行期上下文定义了一个函数执行时的环境，函数每次执行时对应的执行上下文都是独一无二的，所以多次调用一个函数会导致创建多个执行上下文，当函数执行元毕，它所产生的执行上下文被销毁。 + +查找变量：从作用域链的顶端依次向下查找。 + +**作用域链**：[[]] + +```js +function outer(){ + function inner(){ + var b = 23; + } + var a = 12; + b(); +} +var global = 100; +a(); +``` + +**作用域详细图解**:https://blog.csdn.net/qq_53225741/article/details/125082166 + +## 闭包 + +```js +function a(){ + var aa = '这是外层函数'; + function b(){ + var bb = '这是中层函数'; + function c(){ + var cc = '这是里层函数，我最先释放'; + } + return c; // + } + b(); +} +//a(); + +var fun = a(); + + +``` + +闭包作用： + +- 实现公有变量 +- 可以做**缓存（存储结构**） 练习4 + +- 可以实现封装（继承） +- 模块化开发，防止污染全局变量， + +闭包缺点：当函数保存在外部时，将会生成闭包，闭包会导致原有作用域链不释放，从而造成**内存泄漏**。 + +```js +//函数内部可以访问外部的全局变量 + //函数外部无法读取函数内部的变量 + // let age = 10; + // function huhu(){ + // console.log(age); + // } + // huhu(); + + //链式作用域结构 + //首先子对象会在自身的作用域寻找变量，如果没有则一层一层的向父级寻找。、 + // var name = '小明' + // function man() { + // console.log(name) + // var age = '20'; + // (function getage() { + // console.log(age) + // }()) + // } + // man() + + //闭包的作用 + //访问局部变量 + // function man(){ + // var age = 20; + // return function(){ + // console.log(age); + // } + // } + // //console.log(age); //报错 + // var huhu = man(); + // huhu(); + + //保存局部变量 + //因为垃圾回收机制的存在，函数执行完成后里面的局部变量会被销毁 + // function get(){ + // var num = 0; + // return function(){ + // console.log(num++); + // } + // } + // var aa = get(); + // aa(); // 0 + // aa(); // 1 + + //实现类的封装 + // function man(){ + // var name = '小明'; + // var age = 15; + // return { + // getName : function (){ + // console.log(name); + // }, + // setName : function (newName){ + // name = newName; + // } + // } + // } + // var huhu = new man(); + // huhu.getName(); + // huhu.setName('张三'); + // huhu.getName(); + + //注意点：内存泄漏 （正常情况下，因为垃圾回收机制，局部变量在函数执行完毕之后其生命周期也结束， + //所以内存会被回收释放。但是因为我们使用了闭包，导致变量一直保存在内存，无法得到释放，造成内存的消耗。） + //退出函数前，将不使用的局部变量删除，或者解除函数的引用 + // function num(){ + // var num = 0; + // return function(){ + // console.log(num++); + // } + // } + // var huhu = num(); + // huhu(); + // huhu(); + // huhu = null; //解除函数的引用，此时变量num释放 +``` + +# 2022-11-02 + +## 链式函数 + +## 严格函数 + +# 函数 + +###### call,apply,bind + +改变this指向，函数被执行时，内部会产生一个this + +arguments:伪数组,只有下标，长度，元素是实参的映射 + +实列：（call apply 两者类似） + +```js +function Person(name, age) { + var { name : '张三' ,age:18} + console.log(this); + this.name = name; //obj.name = name; + this.age = age; //obj.age = age; + return {} + } + var obj = {}; +Person.call(obj,'张三',18); +Person.apply(obj, ['张三', 18]); +Person('张三',18); +``` + +实列：bind + +```js + // const module = { + // x: 42, + // getX: function () { + // console.log(this); + // return this.x; //window.x + // } + // }; + + // var x = 99; + //bind + // const unboundGetX = module.getX; + // console.log(unboundGetX()); //42 + // const boundGetX = unboundGetX.bind(module);//函数 调用bind方法，返回一个带this指向的新函数 + // console.log(boundGetX()); +``` + +#### 严格模式（'use strict'） + +：严格模式:防止意外发生错误时，及时抛出该错误 + +1.在严格模式下，函数内部不会再意外地生成全局变量，而是抛出异常 + +2.严格模式要求一个对象内的所有属性名在对象内必须唯一 + +3.严格模式下会抛出错误，非严格模式会自动转换全局 + +4.构造函数使用严格模式,必须使用new： + +```js + // function Product(name, price) { + // 'use strict' + // this.name = name; + // this.price = price; + // } + // new Product('张三',18); +``` + +函数命名 + +//构造函数:Person() + + //普通函数小驼峰: getNameAge + + //普通变量: personAge perons_age + + //常量:PI + +## 递归 + +**什么是递归：** +如果一个函数在内部可以调用其本身，那么这个函数就是[递归函数](https://so.csdn.net/so/search?q=递归函数&spm=1001.2101.3001.7020)。 +简单理解:函数内部自己调用自己, 这个函数就是递归函数 + +**比如：** + +```js + + //但上面代码报错因为递归很容易发生“栈溢出”错误（stack ），所以必须要加退出条件 return。 +``` + +**递归必须由以下两部分组成。** + +- 递归调用的过程。 + +- 递归终止的条件。 + + 在没有限制的情况下，递归运算会无终止地自身调用。因此，在递归运算中要结合 if 语句进行控制， + 只有在某个条件成立时才允许执行递归，否则不允许调用自身。 + + 递归很消耗内存 + +```js + + +``` + + + + + + + + + + + + + -- Gitee From 4208b99dfe709a00204e9def99de05dc4852e617 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=8D=8E=E4=BC=9F?= <1931626338@qq.com> Date: Fri, 4 Nov 2022 12:20:44 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=E5=8E=9F=E5=9E=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...\346\254\241\344\275\234\344\270\232.html" | 0 ...\346\254\241\344\275\234\344\270\232.html" | 0 ...\346\254\241\344\275\234\344\270\232.html" | 58 +++++++++++++++ .../2022-11-03 \345\216\237\345\236\213.md" | 71 +++++++++++++++++++ 4 files changed, 129 insertions(+) rename "12 \351\231\210\345\215\216\344\274\237/\344\275\234\344\270\232/2022-11-02 \347\254\254\345\205\253\346\254\241\344\275\234\344\270\232.html" => "12 \351\231\210\345\215\216\344\274\237/\344\275\234\344\270\232/2022-10-31 \347\254\254\345\205\253\346\254\241\344\275\234\344\270\232.html" (100%) rename "12 \351\231\210\345\215\216\344\274\237/\344\275\234\344\270\232/2022-11-03 \347\254\254\344\271\235\346\254\241\344\275\234\344\270\232.html" => "12 \351\231\210\345\215\216\344\274\237/\344\275\234\344\270\232/2022-11-02 \347\254\254\344\271\235\346\254\241\344\275\234\344\270\232.html" (100%) create mode 100644 "12 \351\231\210\345\215\216\344\274\237/\344\275\234\344\270\232/2022-11-03 \347\254\254\345\215\201\346\254\241\344\275\234\344\270\232.html" create mode 100644 "12 \351\231\210\345\215\216\344\274\237/\347\254\224\350\256\260/2022-11-03 \345\216\237\345\236\213.md" diff --git "a/12 \351\231\210\345\215\216\344\274\237/\344\275\234\344\270\232/2022-11-02 \347\254\254\345\205\253\346\254\241\344\275\234\344\270\232.html" "b/12 \351\231\210\345\215\216\344\274\237/\344\275\234\344\270\232/2022-10-31 \347\254\254\345\205\253\346\254\241\344\275\234\344\270\232.html" similarity index 100% rename from "12 \351\231\210\345\215\216\344\274\237/\344\275\234\344\270\232/2022-11-02 \347\254\254\345\205\253\346\254\241\344\275\234\344\270\232.html" rename to "12 \351\231\210\345\215\216\344\274\237/\344\275\234\344\270\232/2022-10-31 \347\254\254\345\205\253\346\254\241\344\275\234\344\270\232.html" diff --git "a/12 \351\231\210\345\215\216\344\274\237/\344\275\234\344\270\232/2022-11-03 \347\254\254\344\271\235\346\254\241\344\275\234\344\270\232.html" "b/12 \351\231\210\345\215\216\344\274\237/\344\275\234\344\270\232/2022-11-02 \347\254\254\344\271\235\346\254\241\344\275\234\344\270\232.html" similarity index 100% rename from "12 \351\231\210\345\215\216\344\274\237/\344\275\234\344\270\232/2022-11-03 \347\254\254\344\271\235\346\254\241\344\275\234\344\270\232.html" rename to "12 \351\231\210\345\215\216\344\274\237/\344\275\234\344\270\232/2022-11-02 \347\254\254\344\271\235\346\254\241\344\275\234\344\270\232.html" diff --git "a/12 \351\231\210\345\215\216\344\274\237/\344\275\234\344\270\232/2022-11-03 \347\254\254\345\215\201\346\254\241\344\275\234\344\270\232.html" "b/12 \351\231\210\345\215\216\344\274\237/\344\275\234\344\270\232/2022-11-03 \347\254\254\345\215\201\346\254\241\344\275\234\344\270\232.html" new file mode 100644 index 0000000..67696d5 --- /dev/null +++ "b/12 \351\231\210\345\215\216\344\274\237/\344\275\234\344\270\232/2022-11-03 \347\254\254\345\215\201\346\254\241\344\275\234\344\270\232.html" @@ -0,0 +1,58 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git "a/12 \351\231\210\345\215\216\344\274\237/\347\254\224\350\256\260/2022-11-03 \345\216\237\345\236\213.md" "b/12 \351\231\210\345\215\216\344\274\237/\347\254\224\350\256\260/2022-11-03 \345\216\237\345\236\213.md" new file mode 100644 index 0000000..b604f38 --- /dev/null +++ "b/12 \351\231\210\345\215\216\344\274\237/\347\254\224\350\256\260/2022-11-03 \345\216\237\345\236\213.md" @@ -0,0 +1,71 @@ +# 2022-11-03 + +## call apply bind + +他们的功能是改变this的指向 + + + + + +## 构造函数和prototype原型 + +构造函数是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总和new一起使用。 我们可以把对象中一些公共属性和方法抽取出来，然后封装到这个函数里面。 + +#### new在执行时会做四件事情: + +1. 在内存中创建一个新的空对象 +2. 让this指向这个新对象 +3. 执行构造函数里面的代码，给这个新对象添加属性和方法 +4. 返回这个新对象（所以这个构造函数里面不需要return） + +JS的构造函数中可以添加一些成员，可以在构造函数本身上添加，也可以在构造函数内部的this上添加。 通过这两种方式添加的成员，分别称为静态成员和实例成员。 + +- 静态成员 + + 在构造函数本身上添加的成员；只能由构造函数本身来访问 + +- 实例成员 + + 在构造函数内部创建的对象成员称为实例成员（this添加）；只能由实例化的对象来访问 ;实例成员就是构造函数内部通过this添加的成员 + +```js +//构造函数 +function fun (name,age){ + this.name + this.age +} +var a = new fun('zs',18) +``` + +## 构造函数 原型对象 prototype + +**1.所有被该构造函数构造出的对象都可以继承原型上的属性和方法**。 + +**2.如果this有自己的属性，那么会覆盖掉原型上已有的属性。**（开发惯例：所有方法写到原型，部分属性写到this）一般来说属性是配置项，需要你主动传参去配置。但是一般来说某个插件的方法功能几乎是一致的。 + +对象对原型的增删改 + +```js +function Phone(color, brand) { + this.color = color; + this.brand = brand; + this.screen = screen; +} +//原型本身也是一个对象 增删改查 +console.log(Phone.prototype); + + //add properties + Phone.prototype.screen = '18:9'; + console.log(Phone.prototype); + +//修改原型上的属性 + Phone.prototype.screen = '20:10'; + console.log(Phone.prototype.screen); + + //删 + delete Phone.prototype.screen; + console.log(Phone.prototype); + +``` + -- Gitee