ECMA-Script5

严格模式

所谓严格模式，从字面上就很好理解，即更严格的模式

在这种模式下执行，浏览器会对JS的要求更苛刻。

举例： 

function m1(){

     max = 100;

}

m1();

alert(max); //由于max没有var声明，因此max会变成全局变量

但是在严格模式下：

function m1(){

    "use strict";

    max = 100;

}

m1();

alert(max);

Uncaught ReferenceError: max is not defined

不加var报错

with被禁用

callee 被禁用

禁止delete window对象属性

八进制被禁用

arguments与形参不同步

this不允许指向window

所以不要轻易在全局范围开头增加 "use strict" 声明

建议在作用域内部使用

bind方法

Jquery里面也有bind方法，它大概长这个样子：

$("#btn").bind("click",function(){

     alert(this.id);

})

或许你真的从来没有认真的想过，为什么我们的匿名函数里会有this关键字？

当你点击的时候，#btn的ID就被弹了出来。this为什么会指向了#btn???

举例：

btn.onclick = function(){

     setTimeout(function(){

              this.innerText = "已点击"; 

     }.bind(this),2000)

}

我们都知道定时器的匿名函数里不能写this，它会指向window

但有了bind方法以后，我们可以随意设定this 的指向

貌似在字面量编程风格中，可能好处就更明显

举例：

var Engine = {

     body : $("#main"),

     setBackground : function(){

             this.body.css("background","url(xxxx.png) repeat-y");

     }

     loadEvents : function(){

         $("#cb").click(function(){  //我们给某个元素添加单击事件

              this.setBackground("");  //但实际操作却是Engine本身，从结构上做到了解耦

          }.bind(this)); 

     },

     init : function(){

          //.......

          this.loadEvents();

          return this;

     }

}

JSON.parse / JSON.stringify

我们从eval方法，过渡到了JSON.parse()，去除了eval方法注入代码的风险

JSON提供了两个方法

JSON.parse，解析一个字符串，并返回对象

举例：

var obj = JSON.parse('{"id":3, "value":30}');

obj.value; //30

注意：id\value都使用了双引号，否则解析不正确

JSON.stringify，解析一个对象，并返回字符串

举例：

var obj = { id: 3, value: 30 };

JSON.stringify(obj);  //'{"id":3, "value":30}'

扩展： 额外的处理函数

var obj = JSON.parse('{"id":3, "value":30.99}');

obj.value; //30.99

如果你想四舍五入

JSON.parse('{"id":3, "value":30.99}', function(key,
val){

     if(typeof val == "string"){

          return Math.round(Number(val));

     } else {

          return Math.round(val);

     }

})

最终结果： obj.value // 31

数组的额外方法

indexOf

[2, 5, 7, 3, 5].indexOf(5)  //返回1   

无法判定对象数组，这时候可以用some

 

forEach

["a", "b", "c", "d", "e"].forEach(function(item, index, array){

     //跟jquery几乎一样，除了参数顺序

     //item表示当前遍历的元素，index表示下标，array表示数组本身

     console.log(item);

});

其实也可以更简单：

["a", "b", "c", "d", "e"].forEach(alert);

注意：

["a", "b", "c", "d", "e"].forEach(console.log);    //会出现Uncaught TypeError: Illegal invocation(…),forEach(function(){},this)

因为执行上下文非法导致的，我们需要指定一下上下文：

["a", "b", "c", "d", "e"].forEach(console.log, console);  //正确执行，forEach(function(item){console.log(item)},console)

map 映射，遍历---->操作----->返回

var newarr = [1,2,3,4,5].map(function(item, index, array){

     return item+2;  //

})

newarr;

结果： [3, 4, 5, 6, 7]

reduce 归并

[1,2,3,4].reduce(function(pre, next, index, array){

     //参数中的x和y，代表了之前的处理结果和下一个元素

     return x+y; //return的结果会赋值给下一个函数的x参数

});

结果 ： 10

		var list=['a',1,2,3,4,5];
		list.reduce=function(callback){//模拟实现
			var _tmp=this[0];
			for(var i=1;i<this.length;i++){
				_tmp=callback(_tmp, this[i], i, this)

			}
			return _tmp;

		}
		var new_value=list.reduce(function(pre, next, index, array){
			return pre*next;

		});
		console.log(new_value);

filter 过滤

var res = [88,69,92,77,90,96,98,99].filter(function(item, index, array){

     return item>80;//找出所有大于80的元素

});

结果：[88,92,90,96,98,99]

		var list=[1,2,3,4,5];
		list.filter=function(callback){//模拟实现
			var _tmp=[];
			for(var i in list){
				if(callback(this[i],i,this))
					_tmp.push(this[i]);
			}
			return _tmp;

		}
		var newList=list.filter(function(item,index,arr){
			return index%2==0?true:false;

		});
		console.log(newList);

some 某些   (我觉得叫anyone更适合)

if(["yt","hr","wc","jk"].some(function(item){

     //判断数组中是否存在yt？

     return item=="yt";

})){

     alert("好的！");

}

跟过滤器好像差不多，但它只会返回一个布尔类型，如果匹配成功，则返回true

而且一旦匹配成功，后面就不再遍历了，如果没有匹配成功，最后返回false

可以用来做一些检测

every

["ab","bc","cd","xy","zz"].every(function(item){

     return typeof item === "string";

});

跟some一样，但要求每一项都符合，才返回true

有一项不合格就返回false

String的trim方法

"   abc   ".trim();

首尾去空格

"abc"

Object.keys() /Object.values()

用于获取对象的属性和对象的值

对于不可枚举的属性无效

var obj = {id:3, age: 20};

Object.keys(obj);     // ["id","age"]

Object.values(obj);   // [3, 20]

Object.defineProperty(obj, "age", {

    enumerable : false

});

Object.keys(obj);     // ["id"]

Object.values(obj);   // [3]

Object.create 

创建对象的一种新形式：

var father = {

     money: 999999

}

var son = Object.create(father);

son.money; //999999

//不要误以为这是在复制对象，实际上这是在继承，因为fahter对象的内容被存入了son对象的原型当中

举例：

function Father(){

     this.name = "王健林";

     this.age = 60;

}

Father.prototype = {

     wanda : function(){

          return "$99999999999";

     }

}

//以前的写法，大概是这样：

//Son.prototype = new Father();

//缺点很明显就是，连名字和年龄都继承了，其实我们并不想要这些

//下面的写法，带来了一定的好处，Son的原型的原型是Fahter的原型，同样是原型链继承的效果。

Son.prototype = Object.create(Father.prototype);

function Son(){    

     this.name = "王思聪";

     this.age = 30;

}

new Son().wanda();

//要注意这个方法不能实现对象拷贝，因为这里是原型的赋值，并且生成了新对象，不是简单的属性复制

例如：

var a = {

     text1 : "abc"

}

var b = {

     text2 : "def"

}

b = Object.create(a); //结果b虽然继承了a，但原有内容被覆盖了！

b.text1; //abc

b.text2; //undefined

解决办法如下：

var b = Object.create(a, {

     text2 : {

         value : "def" 

     }

})

Object.defineProperty

对于属性的定义和拦截，讲个实用的例子吧

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript">

        "use strict";

        window.onload = function(){

            QF.appInit();

        }

        var QF = {

            scope : {},

            appInit(){

                this.htmlstr = document.body.innerHTML

                this.app = $("[qf-app]").get(0);

                this.inputlist = $(this.app).find("[qf-model]").get();

                for(let inpt of this.inputlist){

                    if(inpt.nodeName=="INPUT" && inpt.type == "text"){

                        let modelname = inpt.getAttribute("qf-model");

                        let vm = {

                            viewlist : $(QF.app).find(":contains('"+"{{"+modelname+"}}')")

                        };

                        //view model的修改监听

                        Object.defineProperty(vm, "value", {

                            configurable: true,

                            enumerable: true,

                            set : function(val){

                                this.viewlist.each(function(){

                                    $(this).html(val);                                   

                                });

                            }

                        });

                        this.scope[modelname] = vm;

                        //输入框的修改监听

                        Object.defineProperty(HTMLInputElement.prototype, "value", {

                            configurable: true,

                            enumerable: true,

                            set: function(val){

                                console.log(val, inpt.value);

                                QF.scope[this.getAttribute("qf-model")].value = this.value;

                            }

                        })

                    }

                }

                $("input").bind("input",function(){

                    this.value = this.value;

                });

            },

        }

    </script>

    <body>

        <div qf-app>

            <input qf-model="yourname" type="text"/>

            <input qf-model="hername" type="text"/>

            <p>{{yourname}}</p>

            <p>{{yourname}}</p>

            <p>{{hername}}</p>

        </div>

    </body>

</html>

上面这段代码是一个简单的View —— >
Model —— >  View的
数据绑定

defineProperty函数最大的好处就是可以自定义属性的读写权限，以及遍历权限(可枚举性)

Object.defineProperty(stu, 'score', {

     writeable: true,  //表示该属性是否可写

     enumerable: true,  //表示该属性是否可以枚举（遍历）    

     configurable: true,  //表示该属性是否可删除，以及是否可配置, 比如writeable能不能被修改 

     set: function(val){

          //当属性被赋值时，做一些拦截动作，例如将数据同步到view

     }

     get: function(){

          //当属性被获取时，做一些拦截动作，例如权限检查之类的

     }

});

Object.getPropertyOf

用来获取原型对象，可以充当JAVA中的super来使用

function Person(){

    this.method1 = function(){     alert(1);     }

}

Man.prototype = new Person();//原型继承

function Man(){

    this.method1 = function(){

        //相当于this.__proto__.method1();

        Object.getPrototypeOf(this).method1();

    }

}

var man = new Man();  

man.method1();