add file:call和apply

2018-03-14 22:49:34 +08:00 · 2018-03-14 22:49:34 +08:00 · d12e94f797
commit d12e94f797
parent 6bdc71246b
15 changed files with 772 additions and 39 deletions
--- 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）方法三：

 ```
--- a/03-JavaScript/02-JavaScript语法基础：运算符和表达式.md
+++ b/03-JavaScript/02-JavaScript语法基础：运算符和表达式.md
@ -212,9 +212,7 @@ sqrt即“square 开方”。比如：
 	alert(a>=18 && a<= 65);
 ```

-## 数据类型转换

-暂略。

 ## 我的公众号

--- 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默认只会离他最近的循环起作用。
+
+
+
+
 ## 算法题练习

 暂略。
--- a/03-JavaScript/05-对象简介.md
+++ 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');
+		}
+	};
+```
+
+
+对象字面量的属性名可以加引号也可以不加，建议不加。如果要使用一些特殊的名字，则必须加引号。
+
+属性名和属性值是一组一组的键值对结构，键和值之间使用:连接，多个名值对之间使用,隔开。如果一个属性之后没有其他的属性了，就不要写`,`
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
--- a/03-JavaScript/05-JavaScript语法基础：函数.md
+++ b/03-JavaScript/05-JavaScript语法基础：函数.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);
+```
+
+
+立即执行函数：函数定义完，立即被调用，这种函数叫做立即执行函数。
+
+立即执行函数往往只会执行一次。



--- a/03-JavaScript/07-call、apply、bind的区别.md
+++ b/03-JavaScript/07-call、apply、bind的区别.md
@ -0,0 +1,16 @@
+
+
+
+参考链接：
+
+- <https://www.jianshu.com/p/56a9c2d11adc>
+
+- <https://github.com/lin-xin/blog/issues/7>
+
+- <https://segmentfault.com/a/1190000007402815>
+
+
+
+
+
+
--- a/03-JavaScript/07-面向对象.md
+++ 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
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta charset="UTF-8">
+	<title></title>
+	<script type="text/javascript">
+		var obj = {
+			name: "smyhvae",
+			age: 26,
+			gender: "男",
+			address: "shenzhen"
+		};
+
+		//枚举对象中的属性
+		for (var n in obj) {
+			console.log("属性名:" + n);
+			console.log("属性值:" + obj[n]);
+		}
+	</script>
+</head>
+
+<body>
+</body>
+
+</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
+
+
+```
+
+
+
+
+
+
+
+
+
+
+
--- a/03-JavaScript/11-JavaScript语法基础：面向对象和内置对象.md
+++ b/03-JavaScript/11-JavaScript语法基础：面向对象和内置对象.md
@ -4,7 +4,7 @@

 **对象的作用是：封装信息**。比如Student类里可以封装学生的姓名、年龄、成绩等。

-那为什么不用数组封装信息呢？首先，数组只能存放同一种类型的数据；其次，要功过
+那为什么不用数组封装信息呢？首先，数组只能存放同一种类型的数据；其次，要...

 对象具有**特征**（属性）和**行为**（方法）。

--- a/03-JavaScript/12-JavaScript基础：DOM操作.md
+++ b/03-JavaScript/12-JavaScript基础：DOM操作.md
--- a/03-JavaScript/13-JavaScript基础：BOM的常见内置方法和内置对象.md
+++ b/03-JavaScript/13-JavaScript基础：BOM的常见内置方法和内置对象.md
--- a/03-JavaScript/13-JavaScript基础：事件对象Event和冒泡.md
+++ b/03-JavaScript/13-JavaScript基础：事件对象Event和冒泡.md
--- a/03-JavaScript/14-原型链.md
+++ b/03-JavaScript/14-原型链.md
--- a/04-前端基本功：CSS和DOM练习/others/06-作用域和闭包.md
+++ b/04-前端基本功：CSS和DOM练习/others/06-作用域和闭包.md
@ -167,7 +167,6 @@ console.log(name);
 闭包就是能够读取其他函数内部变量的函数。


-
 只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成"定义在一个函数内部的函数"。


--- a/04-前端基本功：CSS和DOM练习/others/21-面试题整理
+++ b/04-前端基本功：CSS和DOM练习/others/21-面试题整理
@ -41,9 +41,9 @@ cookie用于存储时的缺点：

 - `foreach`用于遍历数组，是数组的一个方法。不支持 return。

- `for ... in`获取的是index索引值。
+- `for ... in`获取的对象是index索引值。

- `for ... of`获取的是数组里的值。
+- `for ... of`获取的是对象里的值。



--- 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;/*设置子元素在侧轴方向上的布局*/
+    }
+```
+
+
+参考链接：
+
+- <https://www.zhihu.com/question/20543196>
+
+- [水平垂直居中方案与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的链式调用？