ECMAScript5

严格模式

• 理解

  • 除了正常运行模式(混杂模式)，ES5添加了第二种运行模式：“严格模式”（strict mode）。
  • 顾名思义，这种模式使得Javascript在更严格的语法条件下运行

• 目的/作用

  • 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为*
  • 消除代码运行的一些不安全之处，为代码的安全运行保驾护航
  • 为未来新版本的Javascript做好铺垫

• 使用

  • 在全局或函数的第一条语句定义为: ‘use strict’;
  • 如果浏览器不支持, 只解析为一条简单的语句, 没有任何副作用

• 语法和行为改变

  • 必须用var声明变量

  <script type="text/javascript">'use strict'username = 'yoliu'console.log(username)
  </script>
  

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-smCRhXEQ-1590810930197)(C:\Users\pc\AppData\Roaming\Typora\typora-user-images\image-20200525163639925.png)]

  • 禁止自定义的函数中的this指向window

  function Person(name, age){this.name = namethis.age = age
  }
  Person('yoliu', 21)  //当前自调用的话this指向window
  

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4xtgE0SR-1590810930206)(C:\Users\pc\AppData\Roaming\Typora\typora-user-images\image-20200525164002136.png)]

  正确：

  function Person(name, age){this.name = namethis.age = age
  }new Person('yoliu', 21)  //此时this指向实例对象
  

  • 创建eval作用域
    • 非严格模式下eval函数中修改的同名全局变量和污染到全局变量

  var str = 'NBA'
  eval('var str = "CBA" alert(str)')    //CBA
  alert(str)   //非严格模式下为CBA，严格模式下为NBA
  

  • 对象不能有重名的属性

JSON对象

JSON.stringify(obj/arr)

js对象(数组)转换为json对象(数组)

JSON.parse(json)

json对象(数组)转换为js对象(数组)

Object扩展

ES5给Object扩展了一些静态方法, 常用的2个:

1. Object.create(prototype, [descriptors])

• 作用: 以指定对象为原型创建新的对象，为新的对象指定新的属性, 并对属性进行描述

• value : 指定值

• writable : 标识当前属性值是否是可修改的, 默认为false

• configurable: 标识当前属性是否可以被删除 默认为false

• enumerable： 标识当前属性是否能用for in 枚举 默认为false

<script type="text/javascript"> var obj = {username:'yoliu',age:21}var obj1 = {}obj1 = Object.create(obj,{sex:{value:'女',writable:true, //标识当前属性值是否是可修改的, 默认为falseconfigurable:true, //标识当前属性是否可以被删除 默认为falseenumerable:true //标识当前属性是否能用for in 枚举 默认为false}})console.log(obj1)    console.log(obj1.sex)  //女obj1.sex = '男'console.log(obj1.sex)   //男for(var i in obj1){console.log(i)}
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oO47KIw3-1590810930212)(C:\Users\pc\AppData\Roaming\Typora\typora-user-images\image-20200525180403835.png)]

1. Object.defineProperties(object, descriptors)

• 作用: 为指定对象定义扩展多个属性
• get ：用来获取当前属性值得回调函数*
• set ：修改当前属性值得触发的回调函数，并且实参即为修改后的值

<script>
// Object.defineProperties(object, descriptors)var obj2 = {firstName:'li',lastName:'yongliu'}Object.defineProperties(obj2,{fullName:{get:function(){// 获取扩展属性的值,获取扩展属性值的get方法自动调用return this.firstName + ' ' + this.lastName},set:function(data){// 监听扩展属性，当扩展属性发生变化的时候会自动调用，调用后会将变化的值作为实参注入到set函数var names = data.split(' ')this.firstName = names[0]this.lastName = names[1]}}})console.log(obj2)console.log(obj2.fullName) //li yongliuobj2.fullName = 'kobe bryant'console.log(obj2.fullName) //kobe bryant
</script>

• 存取器属性：setter,getter一个用来存值，一个用来取值

对象本身的两个方法

1. get propertyName(){} 用来得到当前属性值的回调函数
2. set propertyName(){} 用来监视当前属性值变化的回调函数

<script type='text/javascript'>var obj = {firstName: 'currt',lastName: 'stephen',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)obj.fullName = 'kobe bryant'console.log(obj.fullName) //kobe b\ryant
</script>

数组扩展

1. Array.prototype.indexOf(value) : 得到值在数组中的第一个下标

2. Array.prototype.lastIndexOf(value) : 得到值在数组中的最后一个下标

3. Array.prototype.forEach(function(item, index){}) : 遍历数组

4. Array.prototype.map(function(item, index){}) : 遍历数组返回一个新的数组，返回加工之后的值

5. Array.prototype.filter(function(item, index){}) : 遍历过滤出一个新的子数组， 返回条件为true的值

<script type="text/javascript">/*需求:1. 输出第一个6的下标2. 输出最后一个6的下标3. 输出所有元素的值和下标4. 根据arr产生一个新数组,要求每个元素都比原来大105. 根据arr产生一个新数组, 返回的每个元素要大于4*/var arr = [2, 4, 6, 8, 7, 4, 6, 1, 0]console.log(arr.indexOf(6))console.log(arr.lastIndexOf(6))arr.forEach(function (item, index) {console.log(item, index)})var arr1 = arr.map(function (item, index) {return item + 10})console.log(arr1)var arr2 = arr.filter(function(item,index){return item > 3})console.log(arr2)
</script>

Function扩展

1.Function.prototype.bind(obj) :

• 作用: 将函数内的this绑定为obj, 并将函数返回

2.面试题: 区别bind()与call()和apply()?

• 都能指定函数中的this

• call()/apply()是立即调用函数

• bind()是将函数返回,通常用来指定回调函数的this

<script type="text/javascript">var obj = {username: 'yoliu'}function foo(data) {console.log(this, data)}foo(33) //window//传入参数的形式foo.call(obj, 33)   //直接从第二个参数开始，依次传入foo.apply(obj,[33])  //第二个参数必须是数组，传入放在数组里// bind的特点：绑定完this不会立即调用当前的函数，而是将函数返回// bind的传参方式同call一样foo.bind(obj,33)()//例如修改下列的thissetTimeout(function(){console.log(this)}.bind(obj),1000)
</script>