JS的ES5的扩展内容

JS的ES5

1.严格模式：

（1）什么是严格模式：

• 在全局或函数的第一条语句定义为:  'use strict'

• 如果浏览器不支持, 只解析为一条简单的语句, 没有任何副作用

（2）严格模式作用：

• 必须用var声明变量

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

• 创建eval作用域

• 对象不能有重名的属性

2.json字符串：

分类：

• json对象

• json数组

json对象和数组都可以与js的对象和数组相互转换。

注：如果格式不是json的字符串要转为js对象就会出错

转换函数：

　　1. js --> json ： JSON.stringify(obj/arr)

　　2. json --> js：JSON.parse(json)

     var obj = {
         name : 'kobe',
         age : 39
     };
     obj = JSON.stringify(obj);
     console.log( typeof obj);// string
     console.log(obj); //{"name":"kobe","age":39}

     obj = JSON.parse(obj);
     console.log(obj); //Object

     var str = "sdfsd";
     str = JSON.parse(str); // 报错 Uncaught SyntaxError: Unexpected token s in JSON at position 0
     console.log(str); 

3.给Object添加了静态方法

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

作用：用一个对象设置另一个对象的原型，并且添加新的属性

     var obj = {name : 'curry', age : 29}
     var obj1 = {};

     //让新的对象obj1的原型设置为obj，并添加新的属性
     obj1 = Object.create(obj, {
         sex : {
             value : '男',
             writable : true,
             configurable: true,
             enumerable: true
         }
     });

对象obj设置对象obj1.__proto__，并在obj1上添加新的属性sex

  obj1:Object
         sex: "女"
         __proto__: Object
             age: 29
             name: "curry"
             __proto__: Object
                 ......

其中的四个参数为对新添加的属性进行描述

     value : 指定值
     writable : 标识当前属性值是否是可修改的, 默认为false
     configurable: 标识当前属性是否可以被删除 默认为false
     enumerable： 标识当前属性是否能用for in 枚举 默认为false

     var obj = {name : 'curry', age : 29}
     var obj1 = {};

     //让新的对象obj1的原型设置为obj，并添加新的属性sex
     obj1 = Object.create(obj, {
         sex : {
             value : '男',
             writable : true,
             configurable: true,
             enumerable: true
         }
     });

     obj1.sex = '女';
     console.log(obj1);
     /*
     Object
         sex: "女"
         __proto__: Object
             age: 29
             name: "curry"
             __proto__: Object
                 ......
     */
     console.log(obj1.age); //
     console.log(obj1.sex); //女
     delete obj1.sex;
     console.log(obj1); //删除了实例对象obj1的属性sex

补：

• for in可以美剧处对象的属性，同时也会枚举出原型上的属性。
• 使用obj1.hasOwnProperty(i)只获取自身属性不枚举原型上属性。必须设置 enumerable: true
• 使用delete obj1.sex删除实例对象自身的属性。必须设置 configurable: true

     for(var i in obj1){

         if(obj1.hasOwnProperty(i)){
             console.log(i);     //只打印一个sex

         }
     }

     delete obj1.sex;
     console.log(obj1); //删除了实例对象obj1的属性sex

（2） Object.defineProperties(object, descriptors)

作用：为指定对象添加新的属性

  //小技巧：防止循环调用set方法，在全局添加变量sex
         var sex = '男';
         var obj3 = {
             name: 'mynameobj3',
             age: 22
         }

         Object.defineProperties(obj3, {
             sex: {
                 get: function () {
                     //console.log("get调用");
                     return sex;
                 },
                 set: function (value) {
                     //console.log("set调用", value);
                     //this.sex = value; 不能这么写会造成循环调用
                     sex = value;
                 }

             }
         });

         console.log(obj3);
         /*
         Object
             age: 22
             name: "mynameobj3"
             sex: (...)
             get sex: ()
             set sex: (value)
             __proto__: Object
                 ......
         */
         obj3.sex = '女';
         console.log(obj3.sex); //女

obj3添加了sex属性并可以设置和获得

4.对象本身的两个方法

• get propertypeName()

• set propertypeName(value)

 var sex = 'man'; //利用上一个例子的小技巧
     var obj1 = {
         name: 'obj1',
         age: 22,
         sex: 'man',
         get sex(){
             return sex;
         },
         set sex(value){
             sex = value;
         }
     }

     console.log(obj1);
     console.log(obj1.sex);
     obj1.sex = 'woman';
     console.log(obj1.sex);

5.Array的扩展方法

 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的值

     var arr = [1, 4, 6, 2, 5, 6];
     console.log(arr.indexOf(6));//
     //Array.prototype.lastIndexOf(value) : 得到值在数组中的最后一个下标
     console.log(arr.lastIndexOf(6));//

     //Array.prototype.forEach(function(item, index){}) : 遍历数组
     arr.forEach(function (item, index) {
         console.log(item, index);
     });

     //Array.prototype.map(function(item, index){}) : 遍历数组返回一个新的数组，返回加工之后的值
     var arr1 = arr.map(function (item, index) {
         return item + 10
     });
     console.log(arr, arr1);

     //Array.prototype.filter(function(item, index){}) : 遍历过滤出一个新的子数组， 返回条件为true的值
     var arr2 = arr.filter(function (item, index) {
         return item > 4
     });
     console.log(arr, arr2);

6.修改this的绑定问题

方式：3种

• fun.call(obj,arg1,arg2,...):立即执行
• fun.apply(obj,[arg1,arg2,...])：立即执行
• fun.bind(obj,arg1,arg2,...)()：手动加入小括号执行  【适用于回调函数绑定this】

 var obj = {
   name: "obj"
 };

 function fun(msg){
   console.log(this);
   console.log(msg);
 }

 fun();  //this ==> window
 fun.call(obj,"call"); //this ==> obj 立即执行
 fun.apply(obj,["apply"]); //this ==> obj 立即执行
 fun.bind(obj,"bind")(); //this ==> obj 手动执行

 //回调函数只能用bind来绑定this
 setTimeout(function(){
   console.log(this);
 }.bind(obj),1000);   //注意是回调函数部分绑定this