前端技术之ES5基础

• 严格模式（strict mode）

  • 理解

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

  • 目的/作用

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

  • 使用

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

  • 语法和行为改变

    • 必须用var声明变量
    • 禁止自定义的函数中的this指向window
    • 创建eval作用域
    • 对象不能有重名的属性

  • 案例

    <script type="text/javascript">
      //启用严格模式
      'use strict';
      //必须用var声明变量
       var age = 12;
       console.log(age);
    
      function Person(name, age) {
         this.name = name;
         this.age = age;
       }
       //禁止自定义的函数中的this指向window
       var person = new Person('kobe', 39);
     
      setTimeout(function () {
         console.log(this);//window
      }.bind(person), 1000);
    
      //创建eval作用域
      var name = 'kobe';
      eval('var name = "anverson";alert(name)');
       console.log(name);
    
      //对象不能有重名的属性
      var obj = {
        name : 'kobe',
        name : 'weide'
      };
      console.log(obj);
    </script>
    
    

  • 严格模式下，如不用var声明变量，浏览器会提示如下错误：
    

• JSON对象

  • JSON.stringify(obj/arr)：js对象(数组)转换为json对象(数组)

  • JSON.parse(json)：json对象(数组)转换为js对象(数组)

  • 案例

    <script type="text/javascript">
      let obj = {
        name : 'kobe',
        age : 39
      };
      let objStr = JSON.stringify(obj);
      alert(objStr);//{"name":"kobe","age":39}
      alert(typeof objStr);//string
      obj = JSON.parse(objStr);
      alert(obj);//[object,object]
    </script>
    
    

• Object 扩展

  • Object.create(prototype, [descriptors])

    • 作用: 以指定对象为原型创建新的对象
    • 为新的对象指定新的属性, 并对属性进行描述
      • value : 指定值
      • writable : 标识当前属性值是否是可修改的, 默认为false
      • configurable: 标识当前属性是否可以被删除 默认为false
      • enumerable： 标识当前属性是否能用for in 枚举 默认为false

  • Object.defineProperties(object, descriptors)

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

  • 对象本身的两个方法

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

  • 案例

    <script type="text/javascript">
    
      let obj = {name : 'curry', age : 29}
      let obj1 = {};
      //Object.create(prototype, [descriptors])
      obj1 = Object.create(obj, {
        sex : {
          value : '男',
          writable : true
        }
      });
      console.log(obj1);
      obj1.sex = '女';
      console.log(obj1.sex);
      
      //Object.defineProperties(object, descriptors)
      let obj2 = {
        firstName : 'curry',
        lastName : 'stephen'
      };
      Object.defineProperties(obj2, {
        fullName : {
          get : function () {
            return this.firstName + '-' + this.lastName
          },
          set : function (data) {
            let 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);
    </script>
    
    

• Array扩展

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

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

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

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

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

  • 案例

    <script type="text/javascript">
    	let arr = [1, 4, 6, 2, 5, 6];
        console.log(arr.indexOf(6));//2
        //Array.prototype.lastIndexOf(value) : 得到值在数组中的最后一个下标
        console.log(arr.lastIndexOf(6));//5
    
        //Array.prototype.forEach(function(item, index){}) : 遍历数组
        arr.forEach(function (item, index) {
            console.log(item, index);
        });
        
        //Array.prototype.map(function(item, index){}) : 遍历数组返回一个新的数组，返回加工之后的值
        let arr1 = arr.map(function (item, index) {
            return item + 10
        });
        console.log(arr, arr1);
    
    	//Array.prototype.filter(function(item, index){}) : 遍历过滤出一个新的子数组， 返回条件为true的值
      	let arr2 = arr.filter(function (item, index) {
            return item > 4
        });
        console.log(arr, arr2);
    </script>
    
    

• Function扩展

  • Function.prototype.bind(obj)：作用: 将函数内的this绑定为obj, 并将函数返回

  • 区别bind()与call()和apply()？

    • 都能指定函数中的this
    • call()/apply()是立即调用函数
    • bind()是将函数返回

  • 案例

    <script type="text/javascript">
        function fun(age) {
            this.name = 'kobe';
            this.age = age;
            console.log('dddddddddddddd');
        }
        let obj = {};
        fun.bind(obj, 12)();
        fun.call(obj,12);
        console.log(obj.name, obj.age);
    </script>