ES6中函数扩展的示例
这篇文章给大家分享的是有关ES6中函数扩展的示例的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。
专注于为中小企业提供成都网站设计、网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业承留免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了上千多家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。
函数参数的默认值
ES6 允许为函数的参数设置默认值,即直接写在参数定义的后面。
ES6之前:
function makeRequest(url,timeout,callback) { timeout=(typeof timeout!=="undefined")?timeout:2000; callback=(typeof callback!=="undefined")?callback:function(){}; // 函数的剩余部分 }
//ES6 function log(x, y = 'World') { console.log(x, y); } log('Hello') // Hello World log('Hello', 'China') // Hello China log('Hello', '') // Hello
参数变量是默认声明的,所以不能用let或const再次声明。
function foo(x = 5) { let x = 1; // error const x = 2; // error }
使用参数默认值时,函数不能有同名参数。
// 不报错 function foo(x, x, y) { // ... } // 报错 function foo(x, x, y = 1) { // ... } // SyntaxError: Duplicate parameter name not allowed in this context
参数默认值不是传值的,而是每次都重新计算默认值表达式的值。也就是说,参数默认值是惰性求值的。
let x = 99; function foo(p = x + 1) { console.log(p); } foo() // 100 x = 100; foo() // 101
在函数声明中能指定任意一个参数的默认值,即使该参数排在未指定默认值的参数之前也是可以的。
function makeRequest(ur1,timeout=2000,callback){ //函数的剩余部分 } // 使用默认的 timeout makeRequest("/foo", undefined, function(body) { doSomething(body); }); // 使用默认的 timeout makeRequest("/foo"); // 不使用默认值 makeRequest("/foo", null, function(body) { doSomething(body); });
在本例中,只有在未传递第二个参数、或明确将第二个参数值指定为undefined时,timeout的默认值才会被使用。
与解构赋值默认值结合使用
function foo({x, y = 5}) { console.log(x, y); } foo({}) // undefined 5 foo({x: 1}) // 1 5 foo({x: 1, y: 2}) // 1 2 foo() // TypeError: Cannot read property 'x' of undefined
上面代码只使用了对象的解构赋值默认值,没有使用函数参数的默认值。只有当函数foo的参数是一个对象时,变量x和y才会通过解构赋值生成。如果函数foo调用时没提供参数,变量x和y就不会生成,从而报错。通过提供函数参数的默认值,就可以避免这种情况。
function foo({x, y = 5} = {}) { console.log(x, y); } foo() // undefined 5 function fetch(url, { body = '', method = 'GET', headers = {} }) { console.log(method); } fetch('http://example.com', {}) // "GET" fetch('http://example.com') // 报错 function fetch(url, { body = '', method = 'GET', headers = {} } = {}) { console.log(method); } fetch('http://example.com') // "GET"
会影响函数的length属性
指定了默认值以后,函数的length属性,将返回没有指定默认值的参数个数。也就是说,指定了默认值后,length属性将失真。
(function (a) {}).length // 1 (function (a = 5) {}).length // 0 (function (a, b, c = 5) {}).length // 2
上面代码中,length属性的返回值,等于函数的参数个数减去指定了默认值的参数个数。比如,上面最后一个函数,定义了3个参数,其中有一个参数c指定了默认值,因此length属性等于3减去1,最后得到2。
这是因为length属性的含义是,该函数预期传入的参数个数。某个参数指定默认值以后,预期传入的参数个数就不包括这个参数了。同理,后文的 rest 参数也不会计入length属性。
(function(...args) {}).length // 0
如果设置了默认值的参数不是尾参数,那么length属性也不再计入后面的参数了
(function (a = 0, b, c) {}).length // 0 (function (a, b = 1, c) {}).length // 1
参数默认值的作用域
一旦设置了参数的默认值,函数进行声明初始化时,参数会形成一个单独的作用域(context)。等到初始化结束,这个作用域就会消失。这种语法行为,在不设置参数默认值时,是不会出现的。
var x = 1; function f(x, y = x) { console.log(y); } f(2) // 2
let x = 1; function f(y = x) { let x = 2; console.log(y); } f() // 1
参数初始化会在函数被调用时进行,无论是给参数传递了一个值、还是使用了参数的默认值。
上面代码中,函数f调用时,参数y = x形成一个单独的作用域。这个作用域里面,变量x本身没有定义,所以指向外层的全局变量x。函数调用时,函数体内部的局部变量x影响不到默认值变量x。如果此时,全局变量x不存在,就会报错。
var x = 1; function foo(x, y = function() { x = 2; }) { var x = 3; y(); console.log(x); } foo() // 3 x // 1
上面代码中,函数foo的参数形成一个单独作用域。这个作用域里面,首先声明了变量x,然后声明了变量y,y的默认值是一个匿名函数。这个匿名函数内部的变量x,指向同一个作用域的第一个参数x。函数foo内部又声明了一个内部变量x,该变量与第一个参数x由于不是同一个作用域,所以不是同一个变量,因此执行y后,内部变量x和外部全局变量x的值都没变。
如果将var x =3的var去除,函数foo的内部变量x就指向第一个参数x,与匿名函数内部的x是一致的,所以最后输出的就是2,而外层的全局变量x依然不受影响。
var x = 1; function foo(x, y = function() { x = 2; }) { x = 3; y(); console.log(x); } foo() // 2 x // 1
参数默认值的暂时性死区
与1et声明相似,函数每个参数都会创建一个新的标识符绑定,它在初始化之前不允许被访问,否则会抛出错误。参数初始化会在函数被调用时进行,无论是给参数传递了一个值、还是使用了参数的默认值。
function getValue(value) { return value + 5; } function add(first, second = getValue(first)) { return first + second; } console.log(add(1, 1));// 2 console.log(add(1));// 7
调用add(1, 1)和add(1)事实上执行了以下代码来创建first与second的参数值:
//JS调用add(1,1)可表示为 let first = 1; let second = 1; //JS调用add(1)可表示为 let first = 1; let second = getValue(first);
改写一下
function add(first = second, second) { return first + second; } console.log(add(1, 1));// 2 console.log(add(undefined, 1));// 抛出错误
本例中调用 add(1, 1) 与 add(undefined, 1) 对应着以下的后台代码:
// JS 调用 add(1, 1) 可表示为 let first = 1; let second = 1; // JS 调用 add(1) 可表示为 let first = second; let second = 1;
本例中调用add(undefined,1)抛出了错误,是因为在first被初始化时second尚未被初始化。此处的second存在于暂时性死区内,对于second的引用就抛出了错误。
函数参数拥有各自的作用域和暂时性死区,与函数体的作用域相分离,这意味着参数的默认值不允许访问在函数体内部声明的任意变量。
应用
利用参数默认值,可以指定某一个参数不得省略,如果省略就抛出一个错误。
function throwIfMissing() { throw new Error('Missing parameter'); } function foo(mustBeProvided = throwIfMissing()) { return mustBeProvided; } foo() // Error: Missing parameter
rest 参数
ES6 引入 rest参数(形式为...变量名),用于获取函数的多余参数,这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组,该变量将多余的参数放入数组中。rest参数就是一个真正的数组,数组特有的方法都可以使用。
function add(...values) { let sum = 0; for (var val of values) { sum += val; } return sum; } add(2, 5, 3) // 10
// arguments变量的写法 function sortNumbers() { return Array.prototype.slice.call(arguments).sort(); } // rest参数的写法 const sortNumbers = (...numbers) => numbers.sort();
rest 参数的限制条件
一是函数只能有一个剩余参数,并且它必须被放在最后。
// 报错 function f(a, ...b, c) { // ... }
第二个限制是剩余参数不能在对象字面量的 setter 属性中使用,这意味着如下代码同样会导致语法错误:
1et object={ //语法错误:不能在setter中使用剩余参数 set name(...value){ //一些操作 };
存在此限制的原因是:对象字面量的setter被限定只能使用单个参数;而剩余参数按照定义是不限制参数数量的,因此它在此处不被许可。
前面有讲函数的length属性,不包括 rest 参数。
(function(a) {}).length // 1 (function(...a) {}).length // 0 (function(a, ...b) {}).length // 1
严格模式
从 ES5 开始,函数内部可以设定为严格模式。
function doSomething(a, b) { 'use strict'; // code }
ES2016 做了一点修改,规定只要函数参数使用了默认值、解构赋值、或者扩展运算符,那么函数内部就不能显式设定为严格模式,否则会报错。
// 报错 function doSomething(a, b = a) { 'use strict'; // code } // 报错 const doSomething = function ({a, b}) { 'use strict'; // code }; // 报错 const doSomething = (...a) => { 'use strict'; // code }; const obj = { // 报错 doSomething({a, b}) { 'use strict'; // code } };
这样规定的原因是,函数内部的严格模式,同时适用于函数体和函数参数。但是,函数执行的时候,先执行函数参数,然后再执行函数体。这样就有一个不合理的地方,只有从函数体之中,才能知道参数是否应该以严格模式执行,但是参数却应该先于函数体执行。
把函数包在一个无参数的立即执行函数里面可以规避这种限制。
const doSomething = (function () { 'use strict'; return function(value = 42) { return value; }; }());
在代码块中声明函数
在ES3或更早版本中,在代码块中声明函数(即块级函数)严格来说应当是一个语法错误,但所有的浏览器却都支持该语法。可惜的是,每个支持该语法的浏览器都有轻微的行为差异,所以最佳实践就是不要在代码块中声明函数(更好的选择是使用函数表达式)。
严格模式下
为了控制这种不兼容行为,ES5的严格模式为代码块内部的函数声明引入了一个错误。
然而ES6会将 doSomething()函数视为块级声明,并允许它在定义所在的代码块内部被访问。块级函数与 let 函数表达式相似,在执行流跳出定义所在的代码块之后,函数定义就会被移除。关键区别在于:块级函数会被提升到所在代码块的顶部;而使用let的函数表达式则不会 。
"use strict"; if (true) { console.log(typeof doSomething);//"function" function doSomething() { // ... } doSomething(); } console.log(typeof doSomething);// "undefined
非严格模式下
ES6 在非严格模式下同样允许使用块级函数,但行为有细微不同。块级函数的作用域会被提升到所在函数或全局环境的顶部,而不是代码块的顶部。
// ES6 behavior if (true) { console.log(typeof doSomething);//"function" function doSomething() { // ... } doSomething(); } console.log(typeof doSomething);// "function"
name 属性
函数的name属性,返回该函数的函数名。
function foo() {} foo.name // "foo"
getter函数,因此它的名称是 "get firstName" ,以标明它的特征;同样,setter函数也会带有"set"的前缀(getter与setter函数都必须用Object.getOwnPropertyDescriptor()来检索)。另外,使用bind()创建的函数会在名称属性值之前带有"bound”前缀;而使用Function构造器创建的函数,其名称属性则会有“anonymous”前缀,如果将一个匿名函数赋值给一个变量,ES5的name属性,会返回空字符串,而 ES6 的name属性会返回实际的函数名。
var f = function () {}; // ES5 f.name // "" // ES6 f.name // "f"
new.target元属性
JS为函数提供了两个不同的内部方法:[[Call]]与[[Construct]]。当函数未使用new进行调用时,[[Call]]方法会被执行,运行的是代码中显示的函数体。而当函数使用new进行调用时,[[Construct]]方法则会被执行,负责创建一个被称为新目标的新的对象,并且使用该新目标作为this去执行函数体。拥有[[Construct]] 方法的函数被称为构造器。记住并不是所有函数都拥有[[Construct]]方法,因此不是所有函数都可以用new来调用。
在ES5中判断函数如何被调用
在ES5中判断函数是不是使用了new来调用(即作为构造器),最流行的方式是使用instanceof,例如:
function Person(name) { if (this instanceof Person) { this.name = name;// 使用new } else { throw new Error("You must use new with Person } } var person = new Person("Nicholas"); var notAPerson = Person("Nicholas");//抛出错误
可惜的是,该方法并不绝对可靠,因为在不使用 new 的情况下this仍然可能是 Person 的实例。
var notAPerson = Person.call(person, "Michael"); // 奏效了!
在ES6中判断函数如何被调用
为了解决这个问题,ES6引入了new.target 元属性。元属性指的是“非对象”(例如new)上的一个属性,并提供关联到它的目标的附加信息。当函数的[[Construct]]方法被调用时,new.target 会被填入new运算符的作用目标,该目标通常是新创建的对象实例的构造器,并且会成为函数体内部的this值。而若[[Call]]被执行,new.target的值则会是undefined。
通过检查new.target是否被定义,这个新的元属性就让你能安全地判断函数是否被使用new 进行了调用。
function Person(name) { if (typeof new.target !== "undefined") { this.name = name;// 使用new } else { throw new Error("You must use new with Person } } var person = new Person("Nicholas"); var notAPerson = Person("Nicholas");//抛出错误
警告:在函数之外使用new.target会有语法错误。
箭头函数
ES6 允许使用“箭头”(=>)定义函数。但它的行为在很多重要方面与传统的JS函数不同:
区别
没有this、super、arguments,也没有new.target 绑定:this、super、arguments、以及函数内部的new.target的值由所在的、最靠近的非箭头函数来决定。
不能被使用new调用:箭头函数没有[[Construct]]方法,因此不能被用为构造函数,使用new调用箭头函数会抛出错误。
没有原型:既然不能对箭头函数使用new,那么它也不需要原型,也就是没有prototype 属性。
不能更改this:this的值在函数内部不能被修改,在函数的整个生命周期内其值会保持不变。
没有arguments对象:既然箭头函数没有arguments绑定,你必须依赖于具名参数或剩余参数来访问函数的参数。
不允许重复的具名参数:箭头函数不允许拥有重复的具名参数,无论是否在严格模式下;而相对来说,传统函数只有在严格模式下才禁止这种重复。
不可以使用yield命令,因此箭头函数不能用作 Generator 函数。
var f = () => 5; // 等同于 var f = function () { return 5 }; var sum = (num1, num2) => num1 + num2; // 等同于 var sum = function(num1, num2) { return num1 + num2; };
如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来,并且使用return语句返回。
var sum = (num1, num2) => { return num1 + num2; }
由于大括号被解释为代码块,所以如果箭头函数直接返回一个对象,必须在对象外面加上括号,否则会报错。
// 报错 let getTempItem = id => { id: id, name: "Temp" }; // 不报错 let getTempItem = id => ({ id: id, name: "Temp" });
下面是一种特殊情况,虽然可以运行,但会得到错误的结果。
let foo = () => { a: 1 }; foo() // undefined
上面代码中,原始意图是返回一个对象{a:1},但是由于引擎认为大括号是代码块,所以执行了一行语句a: 1。这时,a可以被解释为语句的标签,因此实际执行的语句是1;,然后函数就结束了,没有返回值。
如果箭头函数只有一行语句,且不需要返回值,可以采用下面的写法,就不用写大括号了。
let fn = () => void doesNotReturn();
this指向的固定化,并不是因为箭头函数内部有绑定this的机制,实际原因是箭头函数根本没有自己的this,导致内部的this就是外层代码块的this。正是因为它没有this,所以也就不能用作构造函数。
所以,箭头函数转成 ES5 的代码如下。
// ES6 function foo() { setTimeout(() => { console.log('id:', this.id); }, 100); } // ES5 function foo() { var _this = this; setTimeout(function () { console.log('id:', _this.id); }, 100); }
箭头函数的this看外层的是否有函数
如果有,外层函数的this就是内部箭头函数的this。
function Person() { this.obj = { showThis : () => { console.log(this);//person } } } let fun5 = new Person(); fun5.obj.showThis();
如果没有,this值就会是全局对象(在浏览器中是window,在nodejs中是global)。
let obj = { name : 'kobe', age : 39, getName : () => { btn2.onclick = () => { console.log(this);//window }; } }; obj.getName();
不适用的场合
由于箭头函数使得this从“动态”变成“静态”,下面两个场合不应该使用箭头函数。
第一个场合是定义函数的方法,且该方法内部包括this。
const cat = { lives: 9, jumps: () => { this.lives--; } }
第二个场合是需要动态this的时候,也不应使用箭头函数。
var button = document.getElementById('press'); button.addEventListener('click', () => { this.classList.toggle('on'); });
上面代码运行时,点击按钮会报错,因为button的监听函数是一个箭头函数,导致里面的this就是全局对象。如果改成普通函数,this就会动态指向被点击的按钮对象。
另外,如果函数体很复杂,有许多行,或者函数内部有大量的读写操作,不单纯是为了计算值,这时也不应该使用箭头函数,而是要使用普通函数,这样可以提高代码可读性。
双冒号运算符
箭头函数可以绑定this对象,大大减少了显式绑定this对象的写法(call、apply、bind)。但是,箭头函数并不适用于所有场合,所以现在有一个提案,提出了“函数绑定”(function bind)运算符,用来取代call、apply、bind调用。
函数绑定运算符是并排的两个冒号(::),双冒号左边是一个对象,右边是一个函数。该运算符会自动将左边的对象,作为上下文环境(即this对象),绑定到右边的函数上面。
foo::bar; // 等同于 bar.bind(foo); foo::bar(...arguments); // 等同于 bar.apply(foo, arguments); const hasOwnProperty = Object.prototype.hasOwnProperty; function hasOwn(obj, key) { return obj::hasOwnProperty(key); }
如果双冒号左边为空,右边是一个对象的方法,则等于将该方法绑定在该对象上面。
var method = obj::obj.foo; // 等同于 var method = ::obj.foo; let log = ::console.log; // 等同于 var log = console.log.bind(console);
感谢各位的阅读!关于ES6中函数扩展的示例就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到吧!
分享名称:ES6中函数扩展的示例
URL地址:http://myzitong.com/article/jhoghg.html