ES5和ES6作用域
ES5和ES6作用域
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>ES5和ES6的区别</title>
</head> <body>
<script type="text/javascript">
//ES5 中作用域，
const callbacks = []
//i是通过var定义的 是全局变量
for (var i = 0; i <= 2; i++) {
//闭包的作用域是全局
callbacks[i] = function() {
return i * 2 //callbacks中的return i*2，是对变量的引用，而不是对函数变量值的引用。函数体中是一个变量，而不是一个值
}
}
console.table([
callbacks[0](), //6,for循环执行完毕，i=3，调用callback的时候 i=3
callbacks[1](), //6
callbacks[2](), //6
]);
console.log([
callbacks[0](),
callbacks[1](),
callbacks[2](),
]); //ES6 作用域
const callbacks2 = []
//用let声明的变量有块作用域的概念
for (let j = 0; j <= 2; j++) {
callbacks2[j] = function() {
return j * 2 //闭包取决于当前的块作用域，每循环一次，它就重新生成新的作用域
}
}
console.table([
callbacks2[0](), //0
callbacks2[1](), //2
callbacks2[2](), //4
]); //ES5 es5中要执行立即执行函数（(function(){},()），才能对作用域进行隔离。
((function() {
const foo = function() {
return 1;
}
console.log("foo === 1", foo() === 1);
((function() {
const foo = function() {
return 2;
}
console.log("foo === 2", foo() === 2);
})())
console.log("foo === 1", foo() === 1);
})())
//ES6 es6:{}表示一个新的作用域，{}可以对作用域进行隔离。
{
function foo() {
return 1;
}
console.log("foo === 1", foo() === 1); {
function foo() {
return 2;
}
}
console.log("foo === 2", foo() === 2); } //ES3,ES5写法
var evens = [1, 2, 3, 4, 5];
var odds = evens.map(function(v) { //遍历
return v + 1
});
console.log(evens, odds)
//ES6箭头函数
{
let evens = [1, 2, 3, 4, 5];
let odds = evens.map(v => v + 1);
console.log(evens, odds)
}
/*
*箭头函数与普通函数的区别，在于this的绑定 */
//ES3,ES5，this指向是该函数被调用的对象
{
var factory = function() {
this.a = 'a';
this.b = 'b';
this.c = {
a: 'a+',
b: function() {
return this.a
}
}
}
console.log(new factory().c.b()); //a+
}
//ES6 this指向定义时的this
{
var factory = function() {
this.a = 'a';
this.b = 'b';
this.c = {
a: 'a+',
b: () => {
return this.a
}
}
}
console.log(new factory().c.b()); //a
}
/*
**默认参数
*/
{
//ES3,ES5默认参数写法
function f(x, y, z) {
if (y === undefined) {
y = 7;
}
if (z === undefined) {
z = 42;
}
return x + y + z; }
console.log(f(1)); //50
console.log(f(1, 3)); //46
} {
//ES6 默认参数写法
function f(x, y = 7, z = 42) {
return x + y + z;
}
console.log(f(1)); //50
console.log(f(1, 3)); //46
} {
//es6 检查X默认参数是否赋值了
//先声明一个函数
function checkParameter() {
// throw new Error阻止js运行
throw new Error('can\'t be empty')
} function f(x = checkParameter(), y = 7, z = 42) {
return x + y + z;
}
console.log(f(2));
try {
f();
} catch (e) {
console.log(e)
} finally {}
} {
// ES3,ES5 可变参数
function f() {
var a = Array.prototype.slice.call(arguments); //伪数组，获取当前的参数列表
var sum = 0; //初始值
a.forEach(function(item) {
sum += item * 1; //求和运算
})
return sum;
}
console.log(f(1, 2, 3))
} {
//ES6 可变参数写法
//...a代表扩展运算符，可变参数的列表
function f(...a) {
var sum = 0;
a.forEach(item => {
sum += item * 1; //求和运算
})
return sum; }
console.log(f(1, 2, 3))
}
/*
**合并数组
*/
{
//es5 合并数组
var params = ['hi','true',7];
var other = [1,2].concat(params);
console.log(other)
}
{
//es6 利用扩展运算符合并数组写法
var params = ['hi','true',7];
var other = [1,2,...params];
console.log(other)
}
</script>
</body> </html>
效果图：
ES5和ES6作用域的更多相关文章
- React入门 (1)—使用指南（包括ES5和ES6对比）
前言 本篇会简明扼要的介绍一下React的使用方法.代码会用JSX+ES5和JSX+ES6两种方式实现. React简介 React来自Facebook,于2013年开源.至今不断修改完善,现在已经到 ...
- JavaScript、ES5和ES6的介绍和区别
JavaScript由三部分组成: ECMAScript(核心) DOM(文档对象模型) BOM (浏览器对象模型) ES5(ECMAScript第五个版本) strict模式 严格模式,限制一些用法 ...
- ES5和ES6那些你必须知道的事儿(三)
ES5和ES6那些你必须知道的事儿 ES6新增的东西 一.块级作用域:关键字let,常量const let与var的区别: a.不会进行变量声明提升 b.变量不允许被重复定义 c.变量不允许被删除 d ...
- ES5与ES6的小差异
ES5与ES6的小差异 变量的定义 ES6与ES5的区别 ES5: <script> console.log(username); var username; var username = ...
- React Native的语法之ES5和ES6
原文地址:http://www.devio.org/2016/08/11/React-Native%E4%B9%8BReact%E9%80%9F%E5%AD%A6%E6%95%99%E7%A8%8B- ...
- 多角度对比 ES5与ES6的区别
ES5与ES6的对比不同点整理 本文关键词:ES6,javascript, 1.Default Parameters(默认参数) es6之前,定义默认参数的方法是在一个方法内部定义 var link ...
- ES5与ES6常用语法教程之 ②解构语法糖、声明变量异同
js常用语法系列教程如下 es5与es6常用语法教程(1) es5与es6常用语法教程(2) es5与es6常用语法教程(3) es5与es6常用语法教程(4) es5与es6常用语法教程(5) es ...
- ES5和ES6基本介绍与面向对象的基本思想
ES6和ES5基本介绍 let const 关键词定义变量 let 定义变量 特点: let 定义的变量,不会进行预解析 let 定义的变量,与 forEach() 中的变量类似 每次执行都会 ...
- ES5和ES6中对于继承的实现方法
在ES5继承的实现非常有趣的,由于没有传统面向对象类的概念,Javascript利用原型链的特性来实现继承,这其中有很多的属性指向和需要注意的地方. 原型链的特点和实现已经在之前的一篇整理说过了,就是 ...
随机推荐
- python中numpy计算数组的行列式numpy.linalg.det()
numpy.linalg.det numpy.linalg.det(a)[source] 计算任何一个数组a的行列式,但是这里要求数组的最后两个维度必须是方阵. 参数: a : (..., M, M) ...
- StretchBlt
StretchBlt 函数从源矩形中复制一个位图到目标矩形,必要时按目前目标设备设置的模式进行图像的拉伸或压缩以满足目标矩形的尺寸. 原型: BOOL StretchBlt( HDC hdcDest ...
- 40. Combination Sum II (Back-Track)
Given a collection of candidate numbers (C) and a target number (T), find all unique combinations in ...
- Oracle 注意点大全
1.索引 经常查询的字段.主表与从表关联主键id必须建立索引.
- MySQL学习2---索引
MySQL 索引 MySQL索引的建立对于MySQL的高效运行是很重要的,索引可以大大提高MySQL的检索速度. 索引分单列索引和组合索引.单列索引,即一个索引只包含单个列,一个表可以有多个单列索引, ...
- 二叉树翻转 · binary tree flipping
［抄题］: 给定一个二叉树,其中所有右节点要么是具有兄弟节点的叶节点(有一个共享相同父节点的左节点)或空白,将其倒置并将其转换为树,其中原来的右节点变为左叶子节点.返回新的根节点. 您在真实的面试中是 ...
- Struts2,Spring3,Hibernate4整合--SSH框架
Struts2,Spring3,Hibernate4整合--SSH框架(学习中) 一.包的导入 1.Spring包 2.Hibernate 包 3.struts 包 (还欠 struts2-sprin ...
- 全球数据库-->基金/管理产品-->分类/行业平均-->开放式分类
SecID 招募书中所定净费率 换手率% 回报日期(每日) 计价货币 回报-本月以来(每日)计价货币 回报-本季以来(每日)计价货币 回报-本年以来(每日)计价货币 回报-1日(每日)计价货币 回报- ...
- BUG记忆
保留两位小数 <fmt:formatNumber value="${list.avgAssessment}" pattern="#.00#"/> ...
- TCP端口状态说明ESTABLISHED、TIME_WAIT
TCP状态转移要点 TCP协议规定,对于已经建立的连接,网络双方要进行四次握手才能成功断开连接,如果缺少了其中某个步骤,将会使连接处于假死状态,连接本身占用的资源不 会被释放.网络服务器程序要同时管理 ...