ECMAScript5相关笔记

ECMAScript5

严格模式

• 理解

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

• 目的/作用

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

• 使用

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

• 语法和行为改变

  • 必须用var声明变量

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

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

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

正确：

function Person(name, age){
		this.name = name
		this.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, //标识当前属性值是否是可修改的, 默认为false
      configurable:true, //标识当前属性是否可以被删除 默认为false
      enumerable: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>

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 yongliu
    obj2.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产生一个新数组,要求每个元素都比原来大10
   5. 根据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)()
    //例如修改下列的this
    setTimeout(function(){
      console.log(this)
    }.bind(obj),1000)
</script>