ES5基礎學習教程

瀏覽器對ES5的支援:

1. IE8只支援defineProperty、getOwnPropertyDescriptor的部分特性和JSON的新特性
2. IE9不支援嚴格模式, 其它都可以
3. IE10和其他主流瀏覽器都支援了
4. PC端開發需要注意IE9以下的相容, 但移動端開發時不需要

一、嚴格模式

顧名思義，這種模式使得Javascript在更嚴格的語法條件下執行
嚴格模式的出現作用：
1. 消除Javascript語法的一些不合理、不嚴謹之處，減少一些怪異行為
2. 消除程式碼執行的一些不安全之處，保證程式碼執行的安全
3. 為未來新版本的Javascript做好鋪墊

在使用嚴格模式的時候在全域性或函式的第一條語句需定義為: ‘use strict’; 如果瀏覽器不支援, 只解析為一條簡單的語句, 沒有任何副作用

主要內容：
1. 必須用var宣告變數（混雜模式中可以直接使用變數而不定義，但是這種做法會對後期造成很大的麻煩）
2. 建立eval作用域

			var str='NBA';
    		eval('var str="cba"; alert(str)'); //解析傳入的字串
    		alert(str); //不使用嚴格模式，eval中的str會改變全域性str的值，嚴格模式下
    		則只在eval作用域中修改str的值。即不使用嚴格模式彈出的分別是cba,cba;
    		使用嚴格模式彈出的是cba,NBA

3.禁止this指向window

	//建立一個建構函式
	function People(){
		this.name=name;
		this.age=age;
	}
	new People("xiaoming",18);
	//必須要加new，不然函式是自呼叫，this指向的是window

4.物件不能用重名的屬性
5.函式不能有重名的形參

二、json物件

JSON.stringify(obj/arr)js物件（陣列）轉換為json物件（陣列）
JSON.parse(json)json物件（陣列）轉換為js物件（陣列）

    var obj={username:"mike"};
    obj=JSON.stringify(obj);
    console.log(typeof obj);
    //json物件和陣列，不要說json字串
    //json是一種傳輸資料的格式，還有xml。

三、object物件方法擴充套件

ES5給Object擴充套件了好一些靜態方法, 常用的2個:

1. Object.create(prototype[, descriptors]) : 建立一個新的物件
   1). 以指定物件（prototype）為原型建立新的物件
   2). 指定新的屬性, 並對屬性進行描述
   value : 指定值
   writable : 標識當前屬性值是否是可修改的, 預設為true
   get : 用來得到當前屬性值的回撥函式
   set : 用來監視當前屬性值變化的回撥函式

	var obj={username:"damu",age:30};
    var obj1={};
    obj1=Object.create(obj); //Object是obj1上一級的建構函式，呼叫他所具有的函式creat
    console.log(obj1); //也就是obj1可以繼承obj的屬性username和age

  var obj={username:"damu",age:30};
  var obj1={};
  obj1=Object.create(obj,{
      sex:{
          value:"男",
          writable:true,//有一個writable屬性：標識當前屬性值是否是可以修改的，預設為false
          configurable:true,//有一個屬性configurable：標識當前屬性是否可以被刪除
          enumerable:true  //有一個屬性enumerable：標識當前屬性是否能用for in列舉 預設為false
  }
      } //對當前擴充套件屬性的描述
  }); //使用create給obj1新增擴充套件屬性
  console.log(obj1.sex);
  obj1.sex="女"
  console.log(obj1.sex);
  delete obj1.sex;//規定不能直接刪掉，有一個屬性configurable：標識當前屬性是否可以被刪除，預設為false
  console.log(obj1.sex);
  for(var i in obj1){
      console.log(i)//for in 找不到obj1使用create擴充套件出來的屬性
      //有一個屬性enumerable：標識當前屬性是否能用for in列舉 預設為false
  }

2. Object.defineProperties(object,descriptors)
   作用：為指定object物件定義擴充套件多個屬性
   get：用來獲取當前屬性值的回撥函式
   set：修改當前屬性值的觸發的回撥函式，並且實參即為修改後的值
   存取器屬性：setter，getter一個用來存值一個用來取值

var obj2={firstName:"kobe",lastName:"bryant"};
    Object.defineProperties(obj2,{
        fullName:{
            get:function () {//使用get來獲取擴充套件屬性的值
                return this.firstName+" "+this.lastName//fullName想要設定的值
            },
            set:function (data) {//監聽擴充套件屬性，當擴充套件屬性發生變化時自動呼叫後會將變化的值作為實參注入到set函式。
                console.log("set()",data);
                var names=data.split(" ");
                this.firstName=names[0];
                this.lastName=names[1];
            }
        }//建立一個配置物件
    })

    console.log(obj2.fullName)
    obj2.fullName="haha heih";
    console.log(obj2.fullName)
    //get方法什麼時候呼叫？ 獲取擴充套件屬性值的時候，get方法自動呼叫

    //物件本身的兩個方法：
    //get propertyName(){}
    //set propertyName(){}

    var objj={
        age:15,
        tall:180,
        get all(){
            return this.age+" "+this.tall;
        },
        set all(data){
            console.log("set()",data);
            var names=data.split(" ");
            this.age=names[0];
            this.tall=names[1];
        }

    }
    console.log(objj);
    objj.all="13 189";
    console.log(objj);

四、陣列擴充套件
1.Array.prototype.indexOf(value):得到值在陣列中的第一個下標,輸入第一個3的下標
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=[2,3,5,1,4,6,3];
	console.log(arr.indexOf(3));	//輸出第一個6的下標
	console.log(arr.lastIndexOf(3)); //輸出最後一個6的下標

	arr.forEach(function(item,index){
		console.log(item+" "+index)	//輸出所有元素的值和下標
	})

	var arr1=arr.map(function(item,index){
		return item+10;
	});
	console.log(arr1);	//根據arr產生一個新陣列，要求每個元素比原來大10

	var arr2=arr.filter(function(item,index){
		return item > 4; 
	})

	console.log(arr2);	//根據arr產生一個新陣列，返回的每個元素都要大於4

五、bind()、call()、apply()的區別

call和apply繫結this一個在後面傳一個要求放在陣列裡

	var obj={username:"kobe"};
	function foo(data){
		console.log(this,data)
	}
	// foo();
	//自呼叫時this指向的是window，使this指向我們定義的obj
	foo.call(obj);
	foo.apply(obj);
	//call和apply在不傳參的情況下使用方式是一樣的
	
	//區別
	function foo(data){
		console.log(this,data)
	}

	foo.call(obj,33); //直接傳入引數
	foo.apply(obj,[33]); //傳入資料必須寫在陣列裡

	//bind

	var bar=foo.bind(obj,33);//繫結完this有一個返回值，不會立即呼叫當前函式而是將函式返回,通常用來指定回撥函式的this。用bar來接收返回的函式然後執行
	bar();

	// 也可寫成foo.bind(obj,33)()