从零开始学习前端JAVASCRIPT — 5、JavaScript基础ES5

1:ES5简介

ECMAScript 5.1 (或仅 ES5) 是ECMAScript(基于JavaScript的规范)标准的修正。 与HTML5规范进程本质类似,ES5通过对现有JavaScript方法添加语句和原生ECMAScript对象做合并实现标准化。

2:严格模式的意义

  相对于正常模式而言:

1:消除Javascript语法的一些不合理、不严谨之处,减少一些怪异行为。

2:消除代码运行的一些不安全之处,保证代码运行的安全。

3:提高编译器效率,增加运行速度。

4:为未来新版本的Javascript做好铺垫。

"严格模式"体现了Javascript更合理、更安全、更严谨的发展方向,包括IE 10在内的主流浏览器,都已经支持它,许多大项目已经开始全面拥抱它。

3:进入严格模式

进入“严格模式”的标志,书写这行语句:"use strict";

老版本的浏览器会把它当作一行普通字符串,加以忽略。

4:如何调用严格模式

"严格模式"有两种调用方法,适用于不同的场合。

针对整个脚本文件:将"use strict"放在脚本文件的第一行,则整个脚本都将以"严格模式"运行。如果这行语句不在第一行,则无效,整个脚本以"正常模式"运行。如果不同模式的代码文件合并成一个文件,这一点需要特别注意。

针对单个函数:将"use strict"放在函数的第一行,则整个函数以"严格模式"运行。

脚本文件的变通写法:因为第一种调用方法不利于文件合并,所以更好的做法是,借用第二种方法,将整个脚本文件放在一个立即执行的匿名函数之中。

eg:

// a.js (组员a的js代码引入严格模式)
/*	‘use strict‘;
	var a = 4;
	var b = 3;
	console.log(a + b);*/
// b.js(组员b的js代码引入正常模式)
/*
	var c = 6;
	var d = 7;
	console.log(c + d);*/
//项目上线代码合并(如果直接合并代码,组员b的代未按照严格模式规范来coding,语法可能发生各种问题)。
//解决方案:将代码分别封装进入两个匿名自执行函数
(function () {
	‘use strict‘;
	var a = 4;
	var b = 3;
	console.log(a + b);
})();
(function () {
	var c = 6;
	var d = 7;
	console.log(c + d);
})();

5:严格模式改变语法和行为

严格模式对Javascript的语法和行为,都做了一些改变。

1:全局变量显式声明。

在正常模式中,如果一个变量没有声明就赋值,默认是全局变量。严格模式禁止这种用法,全局变量必须显式声明。因此,严格模式下,变量都必须先用var命令声明,然后再使用。

javascrip中的变量讲解中函数内部不加关键字var定义的全局变量如果引入严格模式,运行程序将会检查出语法错误。采用显示声明全局变量。

2:函数形参不允许重复。

3:禁止使用with语句。

4:禁止函数内部this关键字指向全局对象,this指向undefined。

5:函数必须声明在顶层。

将来Javascript的新版本会引入“块级作用域"。为了与新版本接轨,严格模式只允许在全局作用域或函数作用域的顶层声明函数。也就是说,不允许在非函数的代码块内声明函数。

// if(1){function a(){}} else {function a() {}}

原文地址:https://www.cnblogs.com/witkeydu/p/8335092.html

时间: 2024-07-29 00:35:12

从零开始学习前端JAVASCRIPT — 5、JavaScript基础ES5的相关文章

从零开始学习前端JAVASCRIPT — 1、JavaScript基础

1:定义:javascript是一种弱类型.动态类型.解释型的脚本语言. 弱类型:类型检查不严格,偏向于容忍隐式类型转换. 强类型:类型检查严格,偏向于不容忍隐式类型转换. 动态类型:运行的时候执行类型检查. 静态类型:编译的时候就知道每个变量的类型. 解释型:程序不需要编译,程序在运行的时候才翻译成机器语言,每执行一次都要翻译一次,因此效率比较低,但是跨平台性好. 编译型:程序在执行之前需要一个专门的翻译过程,把程序编译为机器语言的文件,运行时直接使用编译的结果就行了. 标记语言:标记语言的存

从零开始学习前端JAVASCRIPT — 6、JavaScript基础DOM

1:DOM(Document  Object  Model)的概念和作用 document对象是DOM核心对象:对html中的内容,属性,样式进行操作. 节点树中节点之间的关系:父子,兄弟. 2:DOM常用属性 title:返回或设置当前文档的标题. all:返回所有元素的集合. forms:返回对文档中所有form对象的引用. 通过集合来访问相应的对象: 1.通过下标的形式. 2.通过name形式. 3:DOM查询方法 1.getElementById(id):返回拥有指定id的(第一个)对象

从零开始学习前端JAVASCRIPT — 4、JavaScript基础Math和Date对象的介绍

Math对象的介绍 1:Math对象 Math 对象用于执行数学任务.并不像 Date 和 String 那样是对象的类,因此没有构造函数 Math().您无需创建它,通过把 Math 作为对象使用就可以调用其所有属性和方法. 2:Math属性 PI:返回圆周率(约等于3.14159). 3:Math方法 Math.round(3.6);   // 四舍五入. Math.random();     // 返回大于等于0到小于1之间的随机数. // 随机数如何设定范围 // 0 - 100(包含)

从零开始学习前端JAVASCRIPT — 3、JavaScript基础string字符串介绍

1:字符串 JS中的任何数据类型都可以当作对象来看.所以string既是基本数据类型,又是对象. 2:声明字符串 基本数据类型:var sStr = '字符串'; 对象的方法:var oStr = new String('字符串'); //统计每个字符出现的次数,结果显示 a 2.b 1.c 2.d1,去掉重复的字符,使结果显示 abcdfgj. //var定义的变量赋值字符串以对象[]的方式访问单个字符IE8以上支持 var str="abcdafgcj"; var arr={};

从零开始学习前端JAVASCRIPT — 14、闭包与继承

1:闭包 1 . 概念:闭包就是能够读取其他函数内部变量的函数.在JS中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解为”定义在一个函数内部的函数”. 2 . 闭包的特点 1)可以读取函数内部的变量. 2)让这些变量的值始终保存在内存中. 3 . 闭包的原理 理解闭包,首先必须理解JS变量的作用域.变量的作用域无非就是两种(es5):全局变量和局部变量. JS语言的特殊之处,就在于函数内部可以直接读取全局变量.另一方面,函数外部自然无法读取函数内的局部变量. 注意: 1)函数内部

从零开始学习前端开发 — 15、CSS3变形基础过渡、动画

一.css3过渡 语法: transition: 过渡属性 过渡时间 延迟时间 过渡方式; 1.过渡属性(transition-property) 取值:all 所有发生变化的css属性都添加过渡 eg: transition: all 1s; ident 指定要过渡的css属性列表 eg: transition:border-radius 1s,background 2s; none 没有属性发生过渡 注:我们可以省略滑过状态或其他状态的过渡属性,但是不能省略初始状态的transition属性

从零开始学习前端开发 — 5、CSS布局模型

一.css布局模型 1.流动模型(Flow) 元素在不设置css样式时的布局模型,是块元素就独占一行,是内联元素就在一行逐个进行显示 2.浮动模型(Float) 使用float属性来进行网页布局,给元素设置float后会脱离正常的文档流 3.层模型(Layer) 使用position属性对元素进行定位设置 二.定位 语法:position:static(默认值)|absolute(绝对定位)|relative(相对定位)|fixed(固定定位); 1.绝对定位 语法: position:abso

从零开始学习前端开发 — 3、CSS盒模型

★  盒子模型 (标准的盒模型) css盒模型的概念及组成 css盒模型是css的基石,每个html标签都可以看作是一个盒模型. css盒模型是由内容(content),补白或填充(padding),边框(border),外边距(margin)四部分组成(具体如图所示) 1.内容(content) 宽度 width:数值+单位; 高度 height:数值+单位; eg: .box{width:200px;height:100px;} 2.补白或填充 (设置内容和边框之间的距离) 语法:paddi

从零开始学习前端开发 — 7、常见浏览器兼容性问题及图片整合技术

一.常见浏览器兼容性问题 1.双倍浮动bug 描述:块状元素设置了float后,又设置了横向的margin,在IE6下显示的margin值要比设置的值大 解决方案: 给float的元素添加display:inline;将其转换为行内元素 2.表单元素行高不一致 解决方案: 方案一: 给表单元素添加 vertical-align:middle; 方案二: 给表单元素添加 float:left; 3.IE6不识别高度小于10px的容器 解决方案: 方案一: 给元素设置 overflow:hidden