From d12e94f797c2de767842fa4bf191ed6b3987abcd Mon Sep 17 00:00:00 2001 From: qianguyihao Date: Wed, 14 Mar 2018 22:49:34 +0800 Subject: [PATCH] =?UTF-8?q?add=20file:call=E5=92=8Capply?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../01-JavaScript语法基础：JS简介&变量.md | 55 ++-- .../02-JavaScript语法基础：运算符和表达式.md | 2 - ...ipt语法基础：循环控制（if语句&for循环）.md | 39 +++ 03-JavaScript/05-对象简介.md | 257 +++++++++++++++++ ...JavaScript语法基础：函数.md => 06-函数.md} | 121 +++++++- 03-JavaScript/07-call、apply、bind的区别.md | 16 ++ 03-JavaScript/07-面向对象.md | 270 ++++++++++++++++++ ...象.md => 11-JavaScript语法基础：面向对象和内置对象.md} | 2 +- ...DOM操作.md => 12-JavaScript基础：DOM操作.md} | 0 ....md => 13-JavaScript基础：BOM的常见内置方法和内置对象.md} | 0 ...泡.md => 13-JavaScript基础：事件对象Event和冒泡.md} | 0 03-JavaScript/{11-原型链.md => 14-原型链.md} | 0 .../others/06-作用域和闭包.md | 1 - .../others/21-面试题整理 by smyhvae.md | 4 +- 12-前端/01-前端的几道题目.md | 44 ++- 15 files changed, 772 insertions(+), 39 deletions(-) create mode 100644 03-JavaScript/05-对象简介.md rename 03-JavaScript/{05-JavaScript语法基础：函数.md => 06-函数.md} (60%) create mode 100644 03-JavaScript/07-call、apply、bind的区别.md create mode 100644 03-JavaScript/07-面向对象.md rename 03-JavaScript/{06-JavaScript语法基础：面向对象和内置对象.md => 11-JavaScript语法基础：面向对象和内置对象.md} (99%) rename 03-JavaScript/{07-JavaScript基础：DOM操作.md => 12-JavaScript基础：DOM操作.md} (100%) rename 03-JavaScript/{08-JavaScript基础：BOM的常见内置方法和内置对象.md => 13-JavaScript基础：BOM的常见内置方法和内置对象.md} (100%) rename 03-JavaScript/{09-JavaScript基础：事件对象Event和冒泡.md => 13-JavaScript基础：事件对象Event和冒泡.md} (100%) rename 03-JavaScript/{11-原型链.md => 14-原型链.md} (100%) diff --git a/03-JavaScript/01-JavaScript语法基础：JS简介&变量.md b/03-JavaScript/01-JavaScript语法基础：JS简介&变量.md index 3b61205..4d7eff3 100644 --- a/03-JavaScript/01-JavaScript语法基础：JS简介&变量.md +++ b/03-JavaScript/01-JavaScript语法基础：JS简介&变量.md @@ -441,9 +441,9 @@ implements、import、int、interface、long、native、package、private、prot 复杂数据类型：参数赋值的时候，传地址（修改的同一片内存空间） -### 数值型：number +### 数值型：Number -如果一个变量中，存放了数字，那么这个变量就是数值型的。 +如果一个变量中，存放了数字（包括整数和浮点数），那么这个变量就是数值型的。 ```javascript var a = 100; //定义了一个变量a，并且赋值100 @@ -456,7 +456,7 @@ implements、import、int、interface、long、native、package、private、prot number ``` -**typeof()**表示“**获取变量的类型**”，语法为： +**typeof()**表示“**获取变量的类型**”，返回的是小写，语法为： ``` typeof 变量 @@ -478,7 +478,9 @@ typeof 变量 **NaN和isNaN()函数：** -（1）NaN：Not a Number，非数值。 +（1）NaN是一个特殊的数字，表示Not a Number，非数值。 + +注意：`typeof NaN`的返回值是number。 ``` console.log(“abc”/18); //结果是NaN @@ -497,19 +499,6 @@ Undefined和任何数值计算为NaN。NaN 与任何值都不相等，包括 NaN ``` -### undefined和null - - -null和undefined有最大的相似性。看看null == undefined的结果(true)也就更加能说明这点。 - -但是null ===undefined的结果(false)。不过相似归相似，还是有区别的，就是和数字运算时，10 + null结果为：10；10 + undefined结果为：NaN。 - - -- 任何数据类型和undefined运算都是NaN; - -- 任何值和null运算，null可看做0运算。 - - ### 字符串型：string @@ -592,6 +581,33 @@ null和undefined有最大的相似性。看看null == undefined的结果(true) 于是我们明白了，在变量中加入字符串进行连接，可以被同化为字符串。 + +### 布尔值：Boolean + +true 和 fase。 + + +### null和undefined + + +- `null`：Null类型的值只有一个，就是null。比如：`var a = null`。专门用来表示一个为空的对象。使用 typeof 检查一个null值时，会返回object。 + + +- `undefined`：**声明一个变量，但是没有赋值**，此时它的值就是undefined。例如：`var a;`使用 type of 检查一个undefined时，会返回undefined。 + + + +null和undefined有最大的相似性。看看null == undefined的结果(true)也就更加能说明这点。 + +但是null ===undefined的结果(false)。不过相似归相似，还是有区别的，就是和数字运算时，10 + null结果为：10；10 + undefined结果为：NaN。 + + +- 任何数据类型和undefined运算都是NaN; + +- 任何值和null运算，null可看做0运算。 + + + ## 变量值的传递（赋值） 语句： @@ -810,6 +826,11 @@ null和undefined有最大的相似性。看看null == undefined的结果(true) String(变量) ``` + +使用String()函数做强制类型转换时，对于Number和Boolean而言，实际上是调用的toString()方法。 + + + （3）方法三： ``` diff --git a/03-JavaScript/02-JavaScript语法基础：运算符和表达式.md b/03-JavaScript/02-JavaScript语法基础：运算符和表达式.md index 33fee0c..99bd49b 100644 --- a/03-JavaScript/02-JavaScript语法基础：运算符和表达式.md +++ b/03-JavaScript/02-JavaScript语法基础：运算符和表达式.md @@ -212,9 +212,7 @@ sqrt即“square 开方”。比如： alert(a>=18 && a<= 65); ``` -## 数据类型转换 -暂略。 ## 我的公众号 diff --git a/03-JavaScript/03-JavaScript语法基础：循环控制（if语句&for循环）.md b/03-JavaScript/03-JavaScript语法基础：循环控制（if语句&for循环）.md index 46fe055..cc5c0f9 100644 --- a/03-JavaScript/03-JavaScript语法基础：循环控制（if语句&for循环）.md +++ b/03-JavaScript/03-JavaScript语法基础：循环控制（if语句&for循环）.md @@ -4,6 +4,21 @@ > 以下是正文。 +## 代码块 + +用`{}`包围起来的代码，就是代码块。 + + +JS中的代码块，只具有**分组**的作用，没有其他的用途。 + +代码块中的内容，在外部是完全可见的。 + + + + + + + ## if语句 ### 最基本的if语句 @@ -267,6 +282,30 @@ for循环举例： 死循环。 +## switch语句 + +当所有的比较结果都为false时，则只执行default里的语句。 + + +## break和continue + + +### break + +- break可以用来退出switch语句或**整个**循环语句（循环语句包括for、while。不包括if。if里不能用break，否则会报错）。 + +- break会立即终止离它最近的那个循环语句。 + + +### continue + +- continue可以用来跳过**当次**循环。 + +- 同样，continue默认只会离他最近的循环起作用。 + + + + ## 算法题练习 暂略。 diff --git a/03-JavaScript/05-对象简介.md b/03-JavaScript/05-对象简介.md new file mode 100644 index 0000000..b505afe --- /dev/null +++ b/03-JavaScript/05-对象简介.md @@ -0,0 +1,257 @@ + + + +## 基本数据类型和引用数据类型的对比 + + +- **基本数据类型**：字符串 String、数字 Number、布尔 Boolean、未定义 undefined、空 null。 + +- **引用数据类型**：Object、function、Array、Date、RegExp、Error... + + +JS中的变量都是保存到栈内存中的。 + +基本数据类型的值直接在栈内存中存储，值与值之间是独立存在，修改一个变量不会影响其他的变量。 + +对象是保存到堆内存中的，每创建一个新的对象，就会在堆内存中开辟出一个新的空间。变量保存的是对象的内存地址（对象的引用），如果两个变量保存的是同一个对象引用， +当一个通过一个变量修改属性时，另一个也会受到影响。 + +例如： + +```javascript + var obj = new Object(); + obj.name = "孙悟空"; + + var obj2 = obj; + + //修改obj的name属性 + obj.name = "猪八戒"; +``` + +当我修改obj的name属性后，会发现，obj2的name属性也会被修改。因为obj和obj2指向的是堆内存中的同一个地址。 + + +## 对象简介 + + +以后我们看到的值，只要不是那五种基本数据类型，那就一定是**对象**。 + +如果使用基本数据类型的数据，我们所创建的变量都是独立，不能成为一个整体。 + +对象属于一种复合的数据类型，在对象中可以保存多个不同数据类型的属性。 + + +### 对象的分类 + +1.内建对象： + +- 由ES标准中定义的对象，在任何的ES的实现中都可以使用 + +- 比如：Math String Number Boolean Function Object.... + +2.宿主对象： + +- 由JS的运行环境提供的对象，目前来讲主要指由浏览器提供的对象 + +- 比如 BOM DOM。比如`console`、`document`。 + +3.自定义对象： + +- 由开发人员自己创建的对象 + +### 创建对象 + +使用new关键字调用的函数，是构造函数constructor。**构造函数是专门用来创建对象的函数**。 + + +例如： + +```javascript + var obj = new Object(); +``` + + +使用typeof检查一个对象时，会返回object。 + + +### 向对象添加属性 + + +语法： + +```javascript + 对象.属性名 = 属性值; +``` + +举例： + +```javascript + //向obj中添加一个name属性 + obj.name = "孙悟空"; + + //向obj中添加一个gender属性 + obj.gender = "男"; + + //向obj中添加一个age属性 + obj.age = 18; +``` + + +### 获取对象中的属性 + +语法： + +```javascript + 对象.属性名 +``` + +如果获取对象中没有的属性，不会报错而是返回**undefined**。 + +举例： + + +```javascript + console.log(obj.gender); + console.log(obj.hello); +``` + + +### 修改对象的属性值 + +语法：对象.属性名 = 新值 + + + +```javascript + obj.name = "tom"; +``` + + + +### 删除对象的属性 + + + +```javascript + delete obj.name; +``` + + +### js中的属性值，可以是一个对象 + +JS对象的属性值，可以是任意的数据类型，甚至也**可以是一个对象**。 + +举例： + +```javascript + var obj = new Object(); + obj.test = true; + obj.test = null; + obj.test = undefined; + + //创建一个对象 + var obj2 = new Object(); + obj2.name = "smyhvae"; + + //将obj2设置为obj的属性 + obj.test = obj2; + + console.log(obj.test.name); +``` + +打印结果为：smyhvae + + + + +### in 运算符 + +通过该运算符可以检查一个对象中是否含有指定的属性。如果有则返回true，没有则返回false。 + +语法： + +```javascript + "属性名" in 对象 +``` + +举例： + +```javascript + //检查obj中是否含有name属性 + console.log("name" in obj); +``` + + +我们平时使用的对象不一定是自己创建的，可能是别人提供的，这个时候，in 运算符可以派上用场。 + +## 对象字面量 + +创建一个对象： + +```javascript + var obj = new Object(); +``` + +使用对象字面量来创建一个对象： + +```javascript + var obj = {}; +``` + + +使用对象字面量，可以在创建对象时，直接指定对象中的属性。语法：{属性名:属性值,属性名:属性值....} + +例如： + +```javascript + var obj2 = { + + name: "猪八戒", + age: 13, + gender: "男", + test: { + name: "沙僧" + } + //在对象中增加一个方法。以后可以通过obj2.sayName()来调用 + sayName: function(){ + console.log('smyhvae'); + } + }; +``` + + +对象字面量的属性名可以加引号也可以不加，建议不加。如果要使用一些特殊的名字，则必须加引号。 + +属性名和属性值是一组一组的键值对结构，键和值之间使用:连接，多个名值对之间使用,隔开。如果一个属性之后没有其他的属性了，就不要写`,` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/03-JavaScript/05-JavaScript语法基础：函数.md b/03-JavaScript/06-函数.md similarity index 60% rename from 03-JavaScript/05-JavaScript语法基础：函数.md rename to 03-JavaScript/06-函数.md index 807438d..5e524c4 100644 --- a/03-JavaScript/05-JavaScript语法基础：函数.md +++ b/03-JavaScript/06-函数.md @@ -4,7 +4,11 @@ ## 函数 -函数：就是将一些语句进行**封装**，然后通过**调用**的形式，执行这些语句。 +函数：就是将一些语句（功能）进行**封装**，然后通过**调用**的形式，执行这些语句。 + +- **函数也是一个对象** + +- 使用typeof检查一个函数对象时，会返回function **函数的作用：** @@ -24,9 +28,23 @@ } ``` -**1、第一步：函数的定义** -函数定义的语法： +我们在实际开发中很少使用构造函数来创建一个函数对象。 + + + +### 第一步：函数的定义 + +**方式一**：使用`函数声明`来创建一个函数。语法： + + +```javascript + function 函数名([形参1,形参2...形参N]){ + 语句... + } +``` + +举例： ```javascript function sum(a, b){ @@ -47,7 +65,26 @@ PS：方法写完之后，我们在方法的前面输入`/**`，然后回车，会发现，注释的格式会自动补齐。 -**2、第二步：函数的调用** +**方式二**：使用`函数表达式`来创建一个函数。语法： + + +```javascript + var 函数名 = function([形参1,形参2...形参N]){ + 语句.... + } +``` + + +举例： + +```javascript + var fun3 = function() { + console.log("我是匿名函数中封装的代码"); + }; +``` + + +### 第二步：函数的调用 函数调用的语法： @@ -62,7 +99,7 @@ PS：方法写完之后，我们在方法的前面输入`/**`，然后回车， ![](http://img.smyhvae.com/20180118_1130.png) -注意：实际参数和形式参数的个数，要相同。 + 举例： @@ -85,6 +122,24 @@ PS：方法写完之后，我们在方法的前面输入`/**`，然后回车， helloworld ``` +**实参的类型：** + +函数的实参可以是任意的数据类型。 + +调用函数时解析器不会检查实参的类型，所以要注意，是否有可能会接收到非法的参数，如果有可能则需要对参数进行类型的检查。 + + + +**实参的数量：** + +调用函数时，解析器也不会检查实参的数量： + +- 多余实参不会被赋值 + +- 如果实参的数量少于形参的数量，则没有对应实参的形参将是undefined。例如： + +20180314_2030.png + ### 函数的返回值 举例： @@ -101,13 +156,16 @@ return的作用是结束方法。 注意： -1. 如果函数没有显示的使用 return语句 ，那么函数有默认的返回值：undefined +- return后的值将会会作为函数的执行结果返回，可以定义一个变量，来接收该结果。 -2. 如果函数使用 return语句，那么跟再return后面的值，就成了函数的返回值 +- 在函数中return后的语句都不会执行（函数在执行完 return 语句之后停止并立即退出） -3. 如果函数使用 return语句，但是return后面没有任何值，那么函数的返回值 也是：undefined +- 如果return语句后不跟任何值，就相当于返回一个undefined + +- 如果函数中不写return，则也会返回undefined + +- 返回值可以是任意的数据类型，可以是对象，也可以是函数。 -4. 函数使用return语句后，这个函数会在执行完 return 语句之后停止并立即退 出，也就是说return后面的所有其他代码都不会再执行。 ### 1.6 函数名、函数体和函数加载问题（重要，请记住） @@ -189,8 +247,49 @@ return的作用是结束方法。 ``` - - +## foo() 和 foo 的区别 + + +foo()： + +- 调用函数 + +- 相当于使用函数的返回值 + +foo： + +- 函数对象 + +- 相当于直接使用函数对象 + + + + +## 立即执行函数 + +匿名函数如下： + +```javascript + function(a, b) { + console.log("a = " + a); + console.log("b = " + b); + }; + ``` + + +立即执行函数如下： + +```javascript + (function(a, b) { + console.log("a = " + a); + console.log("b = " + b); + })(123, 456); +``` + + +立即执行函数：函数定义完，立即被调用，这种函数叫做立即执行函数。 + +立即执行函数往往只会执行一次。 diff --git a/03-JavaScript/07-call、apply、bind的区别.md b/03-JavaScript/07-call、apply、bind的区别.md new file mode 100644 index 0000000..6c9014d --- /dev/null +++ b/03-JavaScript/07-call、apply、bind的区别.md @@ -0,0 +1,16 @@ + + + +参考链接： + +- + +- + +- + + + + + + diff --git a/03-JavaScript/07-面向对象.md b/03-JavaScript/07-面向对象.md new file mode 100644 index 0000000..7e984a3 --- /dev/null +++ b/03-JavaScript/07-面向对象.md @@ -0,0 +1,270 @@ + +## 面向对象的概念 + +**对象的作用是：封装信息**。比如Student类里可以封装学生的姓名、年龄、成绩等。 + + +对象具有**特征**（属性）和**行为**（方法）。 + +面向对象：可以创建自定义的类型、很好的支持继承和多态。 + +面向对象的特征：封装、继承、多态。 + + +## 向对象中添加属性/添加方法 + +首先创建一个对象： + + +```javascript + var obj = new Object(); +``` + + +向对象中添加属性： + +```javascript + obj.name = "孙悟空"; + obj.age = 18; +``` + + +对象的属性值可以是任何的数据类型，也可以是个**函数**： + +```javascript + var obj = new Object(); + obj.sayName = function () { + console.log('smyhvae'); + }; + + console.log(obj.sayName); //没加括号，获取的是对象 + console.log('-----------'); + console.log(obj.sayName()); //加了括号，执行函数内容，并执行函数体的内容 + +``` + + +打印结果： + +20180314_2109.png + +**重要：** + +如果一个函数作为一个对象的属性保存，那么我们称这个函数是这个对象的**方法**。调用这个函数就说调用对象的方法（method）。但是它只是名称上的区别，没有其他的区别。 + + + +```javascript + //调方法 + obj.sayName(); + + //调函数 + fun(); +``` + + +## 枚举对象中的属性：for in + +语法： + +```javascript + for (var 变量 in 对象) { + + } +``` + +解释：对象中有几个属性，循环体就会执行几次。每次执行时，会将对象中的**每个属性的名字赋值给变量**。 + + +举例： + + +```html + + + + + + + + + + + + + + +``` + + +打印结果： + +20180314_2125.png + +## 作用域 Scope【重要】 + +作用域指一个变量的作用的范围。在JS中一共有两种作用域： + +- 全局作用域 + +- 函数作用域 + +### 全局作用域 + +直接编写在script标签中的JS代码，都在全局作用域。 + +- 全局作用域在页面打开时创建，在页面关闭时销毁。 + +- 在全局作用域中有一个全局对象window，它代表的是一个浏览器的窗口，它由浏览器创建我们可以直接使用。 + +在全局作用域中： + +- 创建的变量都会作为window对象的属性保存。 + +- 创建的函数都会作为window对象的方法保存。 + +全局作用域中的变量都是全局变量，在页面的任意的部分都可以访问的到。 + + +**变量的声明提前：** + + +使用var关键字声明的变量（ 比如 `var a = 1`），**会在所有的代码执行之前被声明**（但是不会赋值），但是如果声明变量时不是用var关键字（比如直接写`a = 1`），则变量不会被声明提前。 + +举例1： + +```javascript + console.log(a); + var a = 123; +``` + + +打印结果：undefined + +举例2： + + +```javascript + console.log(a); + a = 123; //此时a相当于window.a +``` + +程序会报错： + +20180314_2136.png + + +**函数的声明提前：** + +- 使用`函数声明`的形式创建的函数`function foo(){}`，**会被声明提前**。 + +也就是说，它会在所有的代码执行之前就被创建，所以我们可以在函数声明之前，调用函数。 + + +- 使用`函数表达式`创建的函数`var foo = function(){}`，**不会被声明提前**，所以不能在声明前调用。 + +很好理解，因为此时foo被声明了，且为undefined，并没有给其赋值`function(){}`。 + +所以说，下面的例子，会报错： + +20180314_2145.png + + +### 函数作用域 + +**调用函数时创建函数作用域，函数执行完毕以后，函数作用域销毁。** + +每调用一次函数就会创建一个新的函数作用域，他们之间是互相独立的。 + +在函数作用域中可以访问到全局作用域的变量，在全局作用域中无法访问到函数作用域的变量。 + +当在函数作用域操作一个变量时，它会先在自身作用域中寻找，如果有就直接使用（**就近原则**）。如果没有则向上一级作用域中寻找，直到找到全局作用域；如果全局作用域中依然没有找到，则会报错ReferenceError。 + + +在函数中要访问全局变量可以使用window对象。（比如说，全局作用域和函数作用域都定义了变量a，如果想访问全局变量，可以使用`window.a`） + + +**提醒1：** + +在函数作用域也有声明提前的特性： + +- 使用var关键字声明的变量，会在函数中所有的代码执行之前被声明 + +- 函数声明也会在函数中所有的代码执行之前执行 + + + +因此，在函数中，没有var声明的变量都会成为**全局变量**，而且并不会提前声明。 + +举例1： + +```javascript + var a = 1; + + function foo() { + console.log(a); + a = 2; // 此处的a相当于window.a + } + + foo(); + console.log(a); //打印结果是2 + +``` + +上方代码中，foo()的打印结果是`1`。如果去掉第一行代码，打印结果是`Uncaught ReferenceError: a is not defined` + + + +**提醒2：**定义形参就相当于在函数作用域中声明了变量。 + +``` + + function fun6(e) { + console.log(e); + } + + fun6(); //打印结果为 undefined + fun6(123);//打印结果为123 +``` + + +## this + + + + + + + + + + + +```javascript + + +``` + + + + + + + + + + + diff --git a/03-JavaScript/06-JavaScript语法基础：面向对象和内置对象.md b/03-JavaScript/11-JavaScript语法基础：面向对象和内置对象.md similarity index 99% rename from 03-JavaScript/06-JavaScript语法基础：面向对象和内置对象.md rename to 03-JavaScript/11-JavaScript语法基础：面向对象和内置对象.md index f509122..bb589e4 100644 --- a/03-JavaScript/06-JavaScript语法基础：面向对象和内置对象.md +++ b/03-JavaScript/11-JavaScript语法基础：面向对象和内置对象.md @@ -4,7 +4,7 @@ **对象的作用是：封装信息**。比如Student类里可以封装学生的姓名、年龄、成绩等。 -那为什么不用数组封装信息呢？首先，数组只能存放同一种类型的数据；其次，要功过 +那为什么不用数组封装信息呢？首先，数组只能存放同一种类型的数据；其次，要... 对象具有**特征**（属性）和**行为**（方法）。 diff --git a/03-JavaScript/07-JavaScript基础：DOM操作.md b/03-JavaScript/12-JavaScript基础：DOM操作.md similarity index 100% rename from 03-JavaScript/07-JavaScript基础：DOM操作.md rename to 03-JavaScript/12-JavaScript基础：DOM操作.md diff --git a/03-JavaScript/08-JavaScript基础：BOM的常见内置方法和内置对象.md b/03-JavaScript/13-JavaScript基础：BOM的常见内置方法和内置对象.md similarity index 100% rename from 03-JavaScript/08-JavaScript基础：BOM的常见内置方法和内置对象.md rename to 03-JavaScript/13-JavaScript基础：BOM的常见内置方法和内置对象.md diff --git a/03-JavaScript/09-JavaScript基础：事件对象Event和冒泡.md b/03-JavaScript/13-JavaScript基础：事件对象Event和冒泡.md similarity index 100% rename from 03-JavaScript/09-JavaScript基础：事件对象Event和冒泡.md rename to 03-JavaScript/13-JavaScript基础：事件对象Event和冒泡.md diff --git a/03-JavaScript/11-原型链.md b/03-JavaScript/14-原型链.md similarity index 100% rename from 03-JavaScript/11-原型链.md rename to 03-JavaScript/14-原型链.md diff --git a/04-前端基本功：CSS和DOM练习/others/06-作用域和闭包.md b/04-前端基本功：CSS和DOM练习/others/06-作用域和闭包.md index 35fa2da..cadf4b1 100644 --- a/04-前端基本功：CSS和DOM练习/others/06-作用域和闭包.md +++ b/04-前端基本功：CSS和DOM练习/others/06-作用域和闭包.md @@ -167,7 +167,6 @@ console.log(name); 闭包就是能够读取其他函数内部变量的函数。 - 只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成"定义在一个函数内部的函数"。 diff --git a/04-前端基本功：CSS和DOM练习/others/21-面试题整理 by smyhvae.md b/04-前端基本功：CSS和DOM练习/others/21-面试题整理 by smyhvae.md index ced12a0..e70377d 100644 --- a/04-前端基本功：CSS和DOM练习/others/21-面试题整理 by smyhvae.md +++ b/04-前端基本功：CSS和DOM练习/others/21-面试题整理 by smyhvae.md @@ -41,9 +41,9 @@ cookie用于存储时的缺点： - `foreach`用于遍历数组，是数组的一个方法。不支持 return。 -- `for ... in`获取的是index索引值。 +- `for ... in`获取的对象是index索引值。 -- `for ... of`获取的是数组里的值。 +- `for ... of`获取的是对象里的值。 diff --git a/12-前端/01-前端的几道题目.md b/12-前端/01-前端的几道题目.md index cc289de..89716a8 100644 --- a/12-前端/01-前端的几道题目.md +++ b/12-前端/01-前端的几道题目.md @@ -19,17 +19,44 @@ **方式一：**如果宽高已知，可以利用绝对定位。 -**方式二：** +**方式二：**用 translate 位移来做。（在宽高未知的情况下，也可以这样做） + +```css + div { + background-color: red; + position: absolute; 绝对定位的盒子 + top: 50%; 首先，让上边线居中 + transform: translateY(-50%); 然后，利用translate，往上走自己宽度的一半【推荐写法】 + } +``` + + +**方式三：**flex 布局 + +```css + parentElement{ + display: flex;/*Flex布局*/ + display: -webkit-flex; /* Safari */ + align-items: center;/*设置子元素在侧轴方向上的布局*/ + } +``` + + +参考链接： + +- + +- [水平垂直居中方案与flexbox布局](https://www.cnblogs.com/coco1s/p/4444383.html) -## 变量提升 +### 变量提升 **问题**：说一下你对JavaScript变量提升的理解。 -### 定义 +**定义**： 在函数体内部，声明变量，会把该变量提升到函数体的最顶端。注意：**只提升变量声明，不赋值**。 @@ -122,13 +149,12 @@ let x = 'global' - function 的「创建」「初始化」和「赋值」都被提升了。 - 参考链接： - [我用了两个月的时间才理解 let](https://zhuanlan.zhihu.com/p/28140450) -## this +### this 问题：下方代码的打印结果是什么？ @@ -179,6 +205,14 @@ let x = 'global' +### apply、call、bind的区别 + + + + + + + ## 链式调用 **问题**：如何实现类似jQuery的链式调用？