add file：ES5中的一些扩展
This commit is contained in:
qianguyihao
145
10-ES6/01-ES5的严格模式.md
Normal file
145
10-ES6/01-ES5的严格模式.md
Normal file
@@ -0,0 +1,145 @@
|
||||
|
||||
|
||||
|
||||
## ES的几个重要版本
|
||||
|
||||
- ES5 : 09年发布。
|
||||
|
||||
- ES6(ES2015) : 2015年发布，也称为ECMA2015。
|
||||
|
||||
- ES7(ES2016) : 2016年发布，也称为ECMA2016 (变化不大)。
|
||||
|
||||
|
||||
## 严格模式的理解
|
||||
|
||||
### 概念
|
||||
|
||||
|
||||
**理解**：除了正常运行模式(混杂模式)，ES5添加了第二种运行模式："严格模式"（strict mode）。
|
||||
|
||||
顾名思义，这种模式使得Javascript在更严格的语法条件下运行。
|
||||
|
||||
**目的**：
|
||||
|
||||
- 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为
|
||||
|
||||
- 消除代码运行的一些不安全之处，为代码的安全运行保驾护航
|
||||
|
||||
- 为未来新版本的Javascript做好铺垫
|
||||
|
||||
### 使用
|
||||
|
||||
- 针对整个脚本文件：将`use strict`放在脚本文件的第一行，则整个脚本文件将以严格模式运行。
|
||||
|
||||
- 针对单个函数：将`use strict`放在函数体的第一行，则整个函数以严格模式运行。
|
||||
|
||||
PS：如果浏览器不支持，则这句话只解析为一条简单的语句, 没有任何副作用。
|
||||
|
||||
脚本文件的变通写法：因为第一种调用方法不利于文件合并，所以更好的做法是，借用第二种方法，将整个脚本文件放在一个立即执行的匿名函数之中。
|
||||
|
||||
### 语法和行为改变
|
||||
|
||||
- 必须用var声明变量
|
||||
|
||||
- 禁止自定义的函数中的this指向window
|
||||
|
||||
- 创建eval作用域
|
||||
|
||||
- 对象不能有重名的属性
|
||||
|
||||
|
||||
## 严格模式和普通模式的区别
|
||||
|
||||
### 1、全局变量显式声明
|
||||
|
||||
在正常模式中，如果一个变量没有声明就赋值，默认是全局变量。严格模式禁止这种用法，全局变量必须显式声明。
|
||||
|
||||
|
||||
### 2、禁止this关键字指向全局对象：
|
||||
|
||||
```javascript
|
||||
var foo = function () {
|
||||
console.log(this);
|
||||
}
|
||||
|
||||
foo();
|
||||
```
|
||||
上方代码中，普通模式打印的是window。严格模式下打印的是undefined。
|
||||
|
||||
### 3、创设eval作用域
|
||||
|
||||
|
||||
|
||||
### 2、禁止使用with语句
|
||||
|
||||
因为with语句无法在编译时就确定，属性到底归属哪个对象。
|
||||
|
||||
|
||||
|
||||
### 构造函数必须通过new实例化对象
|
||||
|
||||
构造函数必须通过new实例化对象，否则报错。因为this为undefined，此时无法设置属性。
|
||||
|
||||
比如说：
|
||||
|
||||
|
||||
```
|
||||
var Cat = function (name) {
|
||||
this.name = name;
|
||||
}
|
||||
|
||||
Cat('haha');
|
||||
```
|
||||
|
||||
上方代码中，如果在严格模式下，则会报错。
|
||||
|
||||
|
||||
### 5、为了让代码更安全，禁止函数内部遍历调用栈
|
||||
|
||||
### 6、严格模式下无法删除变量
|
||||
|
||||
|
||||
### 7~10 属性相关
|
||||
|
||||
普通模式下，对一个对象的只读属性进行赋值，不会报错，只会默默地失败。严格模式下，将报错。
|
||||
|
||||
严格模式下，对禁止扩展的对象添加新属性，会报错。
|
||||
|
||||
普通模式下，如果对象有多个重名属性，最后赋值的那个属性会覆盖前面的值。严格模式下，这属于语法错误。
|
||||
|
||||
|
||||
普通模式下，如果函数有多个重名的参数，可以用arguments[i]读取。严格模式下，多个重名的参数属于语法错误。
|
||||
|
||||
|
||||
比如下面这样的代码：
|
||||
|
||||
```javascript
|
||||
var obj = {
|
||||
username: 'smyh';
|
||||
username: 'vae'
|
||||
}
|
||||
```
|
||||
|
||||
上面的代码，在严格模式下属于语法错误，因为有重名的属性。
|
||||
|
||||
### 函数必须声明在顶层
|
||||
|
||||
|
||||
将来Javascript的新版本会引入"块级作用域"。为了与新版本接轨，严格模式只允许在全局作用域或函数作用域的顶层声明函数。也就是说，不允许在非函数的代码块内声明函数。
|
||||
|
||||
### 新增关键字
|
||||
|
||||
为了向将来Javascript的新版本过渡，严格模式新增了一些保留字：implements, interface, let, package, private, protected, public, static, yield。
|
||||
|
||||
|
||||
## 总结
|
||||
|
||||
至少要能答出四五条。
|
||||
|
||||
|
||||
参考链接：
|
||||
|
||||
- [阮一峰 | Javascript 严格模式详解](http://www.ruanyifeng.com/blog/2013/01/javascript_strict_mode.html)
|
||||
|
||||
|
||||
|
||||
297
10-ES6/02-ES5中的一些扩展.md
Normal file
297
10-ES6/02-ES5中的一些扩展.md
Normal file
@@ -0,0 +1,297 @@
|
||||
|
||||
|
||||
## JSON 对象
|
||||
|
||||
1、js对象(数组) --> json对象(数组)：
|
||||
|
||||
```javascript
|
||||
JSON.stringify(obj/arr)
|
||||
```
|
||||
|
||||
2、json对象(数组) --> js对象(数组)：
|
||||
|
||||
|
||||
```javascript
|
||||
JSON.parse(json)
|
||||
```
|
||||
|
||||
|
||||
上面这两个方法是ES5中提供的。
|
||||
|
||||
我们要记住，我们通常说的“json字符串”，只有两种：**json对象、json数组**。
|
||||
|
||||
`typeof json字符串`的返回结果是string。
|
||||
|
||||
## Object的扩展
|
||||
|
||||
ES5给Object扩展了一些静态方法，常用的有2个，我们接下来讲解。
|
||||
|
||||
|
||||
### 方法一
|
||||
|
||||
```javascript
|
||||
Object.create(prototype, [descriptors])
|
||||
```
|
||||
|
||||
作用: 以指定对象为原型，创建新的对象。同时，第二个参数可以为为新的对象添加新的属性，并对此属性进行描述。
|
||||
|
||||
**举例1**：（没有第二个参数时）
|
||||
|
||||
```javascript
|
||||
var obj1 = {username: 'smyhvae', age: 26};
|
||||
var obj2 = {address:'shenzhen'};
|
||||
|
||||
obj2 = Object.create(obj1);
|
||||
console.log(obj2);
|
||||
```
|
||||
|
||||
打印结果：
|
||||
|
||||
|
||||
|
||||
我们发现，obj1成为了obj2的原型。
|
||||
|
||||
**举例2**：（有第二个参数时）
|
||||
|
||||
第二个参数可以给新的对象添加新的属性。我们修改上面的代码，尝试给obj2添加新属性`sex`：
|
||||
|
||||
```javascript
|
||||
var obj1 = {username: 'smyhvae', age: 26};
|
||||
var obj2 = {address: 'shenzhen'};
|
||||
|
||||
obj2 = Object.create(obj1, {
|
||||
sex: {//给obj2添加新的属性`sex`。注意，这一行的冒号不要漏掉
|
||||
value: '男', //通过value关键字设置sex的属性值
|
||||
writable: false,
|
||||
configurable: true,
|
||||
enumerable: true
|
||||
}
|
||||
});
|
||||
|
||||
console.log(obj2);
|
||||
|
||||
```
|
||||
|
||||
上方代码中，我们通过第5行的sex给obj2设置了一个新的属性`sex`，但是要通过`value`来设置属性值（第6行）。
|
||||
|
||||
设置完属性值后，这个属性值默认是不可修改的，要通过`writable`来设置。总而言是，这几个关键字的解释如下：
|
||||
|
||||
- `value`：设置属性值。
|
||||
|
||||
- `writable`：标识当前属性值是否可修改。如果不写的话，默认为false，不可修改。
|
||||
|
||||
- `configurable`：标识当前属性是否可以被删除。默认为false，不可删除。
|
||||
|
||||
- `enumerable`：标识当前属性是否能用 for in 枚举。 默认为false，不可。
|
||||
|
||||
### 方法二
|
||||
|
||||
> 这个方法有点难理解。
|
||||
|
||||
|
||||
```javascript
|
||||
Object.defineProperties(object, descriptors)
|
||||
```
|
||||
|
||||
**作用**：为指定对象定义扩展多个属性。
|
||||
|
||||
代码举例：
|
||||
|
||||
|
||||
```javascript
|
||||
var obj2 = {
|
||||
firstName : 'smyh',
|
||||
lastName : 'vae'
|
||||
};
|
||||
Object.defineProperties(obj2, {
|
||||
fullName : {
|
||||
get : function () {
|
||||
return this.firstName + '-' + this.lastName
|
||||
},
|
||||
set : function (data) { //监听扩展属性，当扩展属性发生变化的时候自动调用，自动调用后将变化的值作为实参注入到set函数
|
||||
var names = data.split('-');
|
||||
this.firstName = names[0];
|
||||
this.lastName = names[1];
|
||||
}
|
||||
}
|
||||
});
|
||||
console.log(obj2.fullName);
|
||||
obj2.firstName = 'tim';
|
||||
obj2.lastName = 'duncan';
|
||||
console.log(obj2.fullName);
|
||||
obj2.fullName = 'kobe-bryant';
|
||||
console.log(obj2.fullName);
|
||||
```
|
||||
|
||||
- get ：用来获取当前属性值的回调函数
|
||||
|
||||
- set ：修改当前属性值得触发的回调函数，并且实参即为修改后的值
|
||||
|
||||
存取器属性：setter,getter一个用来存值，一个用来取值。
|
||||
|
||||
## Object的扩展（二）
|
||||
|
||||
obj对象本身就自带了两个方法。格式如下：
|
||||
|
||||
|
||||
```javascript
|
||||
get 属性名(){} 用来得到当前属性值的回调函数
|
||||
|
||||
set 属性名(){} 用来监视当前属性值变化的回调函数
|
||||
|
||||
```
|
||||
|
||||
举例如下：
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
var obj = {
|
||||
firstName : 'kobe',
|
||||
lastName : 'bryant',
|
||||
get fullName(){
|
||||
return this.firstName + ' ' + this.lastName
|
||||
},
|
||||
set fullName(data){
|
||||
var names = data.split(' ');
|
||||
this.firstName = names[0];
|
||||
this.lastName = names[1];
|
||||
}
|
||||
};
|
||||
console.log(obj.fullName);
|
||||
obj.fullName = 'curry stephen';
|
||||
console.log(obj.fullName);
|
||||
```
|
||||
|
||||
|
||||
## 数组的扩展
|
||||
|
||||
> 下面讲的这几个方法，都是给数组的实例用的。
|
||||
|
||||
**方法1**：
|
||||
|
||||
|
||||
```javascript
|
||||
Array.prototype.indexOf(value)
|
||||
```
|
||||
|
||||
作用：获取值在数组中的第一个下标。
|
||||
|
||||
**方法2**：
|
||||
|
||||
|
||||
```javascript
|
||||
Array.prototype.lastIndexOf(value)
|
||||
```
|
||||
|
||||
作用：获取值在数组中的最后一个下标。
|
||||
|
||||
举例：
|
||||
|
||||
```javascript
|
||||
var arr = [1, 3, 6, 2, 5, 6];
|
||||
console.log(arr.indexOf(6));//2
|
||||
console.log(arr.lastIndexOf(6));//5
|
||||
```
|
||||
|
||||
**方法3**：遍历数组
|
||||
|
||||
|
||||
```javascript
|
||||
Array.prototype.forEach(function(item, index){})
|
||||
```
|
||||
|
||||
举例：
|
||||
|
||||
```javascript
|
||||
var arr = [1, 3, 6, 2, 5, 6];
|
||||
|
||||
arr.forEach(function (item, index) {
|
||||
console.log(item, index);
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
打印结果：
|
||||
|
||||
|
||||
|
||||
**方法4**：
|
||||
|
||||
```javascript
|
||||
Array.prototype.map(function(item, index){})
|
||||
```
|
||||
|
||||
作用：遍历数组返回一个新的数组，返回的是**加工之后**的新数组。
|
||||
|
||||
比如说，有一个已知的数组arr1，我要求让arr1中的每个素加10，这里就可以用到map方法。举例：
|
||||
|
||||
```javascript
|
||||
var arr1 = [1, 3, 6, 2, 5, 6];
|
||||
|
||||
var arr2 = arr1.map(function (item, index) {
|
||||
return item + 10; //让arr1中的每个元素加10
|
||||
|
||||
})
|
||||
console.log(arr2);
|
||||
```
|
||||
|
||||
打印结果：
|
||||
|
||||
|
||||
|
||||
**方法5**：
|
||||
|
||||
|
||||
```javascript
|
||||
Array.prototype.filter(function(item, index){})
|
||||
```
|
||||
|
||||
|
||||
作用：遍历过滤出一个新的子数组，返回条件为true的值。
|
||||
|
||||
举例：让找出数组arr1中大于4的元素，返回一个新的数组。代码如下：
|
||||
|
||||
|
||||
```javascript
|
||||
var arr1 = [1, 3, 6, 2, 5, 6];
|
||||
|
||||
var arr2 = arr1.filter(function (item, index) {
|
||||
return item > 4; //将arr1中大于4的元素返回
|
||||
})
|
||||
console.log(arr2);
|
||||
|
||||
```
|
||||
|
||||
|
||||
打印结果：
|
||||
|
||||
|
||||
|
||||
## 函数function的扩展：bind()
|
||||
|
||||
> ES5中新增了`bind()`函数来改变this的指向。
|
||||
|
||||
|
||||
```javascript
|
||||
Function.prototype.bind(obj)
|
||||
```
|
||||
|
||||
作用：将函数内的this绑定为obj, 并将函数返回。
|
||||
|
||||
**面试题**: call()、apply()和bind()的区别：
|
||||
|
||||
- 都能改变this的指向
|
||||
|
||||
- call()/apply()是**立即调用函数**
|
||||
|
||||
- bind()：绑定完this后，不会立即调用当前函数，而是**将函数返回**，因此后面还需要再加`()`才能调用。
|
||||
|
||||
PS：bind()传参的方式和call()一样。
|
||||
|
||||
**分析**：
|
||||
|
||||
为什么ES5中要加入bind()方法来改变this的指向呢？因为bind()不会立即调用当前函数。
|
||||
|
||||
bind()通常使用在回调函数中，因为回调函数并不会立即调用。如果你希望在回调函数中改变this，不妨使用bind()。
|
||||
|
||||
Reference in New Issue
Block a user