深入理解ECMAScript5：严格模式与扩展特性-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_40052011/article/details/103097614

本文详细介绍了ECMAScript5的主要内容，包括严格模式的引入、目的与使用，以及对象、JSON、Array和Function的扩展特性。在严格模式下，变量必须通过var声明，函数中的this不再默认指向window。JSON的stringify和parse方法用于对象与JSON之间的转换。Object.create()和Object.defineProperties()提供了创建和扩展对象的新方式。Array的indexOf、lastIndexOf、forEach、map和filter等方法增强了数组操作。Function的bind方法用于绑定函数内部的this对象。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.ECMA是是一种由ECMA组织（前身为欧洲计算机制造商协会）制定和发布的脚本语言规范
2.而我们学的js是ECMA的实现，但属于ECMAscript和javascript平时表达一个意思
3.js包含三个部分
1）ECMAScript(核心)
2）扩展=》浏览器
DOM(文档对象模型)
BOM(浏览器对象模型)
3）扩展=》服务器
Node
4.es几个版本
es5:09年发布
es6(es2015):2015年发布的
es7(es2016):2016年发布的

es5:

严格模式
1.理解：
除了正常运行模式（混杂模式），ES5添加了第二种运行模式：“严格模式”（strict mode）.
顾名思义，这种模式使得j’s在更严格的语法条件下运行
2目的/作用
消除js语法的一些不合理不严谨之处，减少一些怪异行为
消除代码运行的一些不安全之处，
为未来新版本js做铺垫
3使用
在全局或函数的第一条语句定义为：“use strict”
如果浏览器不支持，指挥解析为一条简单语句，无副作用
4语法和行为改变
必须使用var声明变量
禁止自定义的函数中的this指向window
创建eval作用域
对象不能有重名属性

	//"use strict"
			var str = "xixi"
			eval("var str='haha';alert(str)")
			console.log(str)  //haha  //不使用严格模式,不安全,可能被人截取eval恶意修改;而在严格模式下,会给eval一个作用域,不会污染全局

JSON扩展
1.JSON.stringify(obj/arr)
js对象（数组）转换为json对象（数组）
2.JSON.parse(json)
json对象（数组）转换为js对象（数组）

<script type="text/javascript">
			var obj={name:"liu",age:"18"}
			var json=JSON.stringify(obj)
			console.log(json)  //{"name":"liu","age":"18"}
			var js=JSON.parse(json)
			console.log(js)  //{name:"liu",age:"18"}
		</script>

object扩展
es5给Object扩展了一些静态方法，常用两个：
1 Object.create(prototype,{})
作用：以指定对象为原型创建的新的对象
为新的对象指定新的属性，并对属性进行描述
value：指定值
writable:标识当前扩展属性是否是可修改的，默认为false
configurable:标识当前扩展属性是否可以被删除，默认为false
enumerable:标识当前扩展属性是否能用for in 枚举默认为false

var obj= {name:"liu", age:20}
			var obj1 ={}
			obj1 = Object.create(obj,{
				sex:{
					value:'男',
					writable:true,  //当前属性可修改
					enumerable:true ,//当前属性会被for in枚举出来
					configurable:true
					
				}
			})
			console.log(obj1.sex)  //男
			console.log(obj1.__proto__) //{name:"liu", age:20}
			//给obj1的sex修改为女
			obj1.sex='女';
			console.log(obj1.sex)   //女  //在没有设置writable前是男
			for(var i in obj1){
				console.log(i)  //sex name age //在没有设置enumerable没有sex
			}
			delete obj1.sex;
			console.log(obj1)  //没有sex属性了

2.Object.defineproperties(object,{})
get:用来获取当前属性值获得回调函数
set:监听当前属性值变化触发的回调函数，实参为修改后的值
存取器属性：setter,getter一个用来存值，一个用来取值


			//Object.defineproperty
			var obj2={firstName:"kobe",lastName:"bryant"}
			Object.defineProperties(obj2,{
				fullName:{
					get:function(){//自动获取扩展属性的值
						return this.firstName+" "+this.lastName
					},
					set:function(data){//监听扩展属性,当扩展属性发生变化时自动调用
						console.log('set()',data)
					},
					
				}
			})
			console.log(obj2.fullName)
			obj2.firstName ="Steve"  //kobe bryant
			console.log(obj2.fullName)  //Steve bryant
			obj2.fullName = "Taylor swift"//set() Taylor swift   //监听到了
			console.log(obj2.fullName) //Steve bryant

监听到并做操作：

var obj2={firstName:"kobe",lastName:"bryant"} 
			Object.defineProperties(obj2,{
				fullName:{
					get:function(){//自动获取扩展属性的值
						return this.firstName+" "+this.lastName
					},
					set:function(data){//监听扩展属性,当扩展属性发生变化时自动调用
						console.log('set()',data)
						var names = data.split(" ")
						this.firstName = names[0]
						this.lastName = names[1]
					},
				}
			})
			obj2.fullName = "Taylor swift"//set() Taylor swift 
			console.log(obj2.fullName) //Taylor swfit

3.对象本身的两个方法
get propertyName(){}用来得到当前属性值的回调函数
set propertyName(){}用来监视当前属性值变化的回调函数

//对象本身的两个方法
			var obj3={
				firstName:"he",
				lastName:"qiao",
				get fullName(){
					return this.firstName+" "+this.lastName
				},
				set fullName(data){
					var names = data.split(" ")
					this.firstName=names[0]
					this.lastName=names[1]
				}
			}
			obj3.fullName = "pig worm"
			console.log(obj3.fullName)  //pig worm

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

<script type="text/javascript">
			/*要求：
			1.输出第一个4的下标
			2.输出最后一个4的下标
			3.输出所有元素的值和下标
			4.根据arr产生一个新数组，要求每个元素都比原来的大10
			5.根据arr产生一个新数组，返回每个元素要大于4
			*/
		   var arr =[2,4,3,1,2,6,5,4]
		   console.log(arr.indexOf(4))  //1
		   console.log(arr.lastIndexOf(4)) //7
		   arr.forEach(function(value,index){
			   console.log(value, index)
		   })
		   
		  var arr1 =  arr.map(function(value){
			   return value+10
		   })
		   console.log(arr1) //[12,14,13,11,12,16,15,14]
		   
		   
		   var arr2 = arr.filter(function(value){
			   return value > 4 //[6,5]
		   })
		   console.log(arr2)
		</script>

Function扩展
1.Function.prototype.bind(obj)
作用：将函数内的this绑定为obj,并将函数返回
2.面试题:区别bind(),apply(),call()
都能指定函数中的this
call()/apply()是立即调用函数
bind()是将函数返回

			var obj = {userName:"kobe"}
			function foo(data){
				console.log(this,data)
			}
			foo() //window
			//不传参时,call(),apply()是一样的
			foo.call(obj)  //{userName:"kobe"}
			foo.apply(obj)  //{userName:"kobe"}
			//传参时call()直接从第二个参数开始,依次传入;apply()第二个参数必须是数组,传入放在数组中
			foo.call(obj,33)  //{userName:"kobe"}  33
			foo.apply(obj,[33])  //{userName:"kobe"}  33
			
			//因为bind绑定完this不会立即调用函数,而是将函数返回
			foo.bind(obj) //  不会输出,因为bind绑定完this不会立即调用函数,而是将函数返回
			var bar = foo.bind(obj)
			console.log(bar)  //function foo(data){console.log(this,data)}
			bar()  //{userName:"kobe"} undefined
			//bind传参方式同call一样
			var bar1 = foo.bind(obj,33)
			bar1()  //{userName:"kobe"}  33
			
			//bind用法: 修改回调函数的this
			setTimeout(function(){
				console.log(this)  //{userName:"kobe"}
			}.bind(obj),2000)