Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

函数的扩展(es6) #4

Open
YoursJoker opened this issue Aug 3, 2020 · 0 comments
Open

函数的扩展(es6) #4

YoursJoker opened this issue Aug 3, 2020 · 0 comments

Comments

@YoursJoker
Copy link
Owner

YoursJoker commented Aug 3, 2020

ES6总结系列之 函数的扩展 篇


函数参数默认值

参数变量是默认声明的,所以不能用let或const再次声明

function foo(x = 5) {
  let x = 1; // error
  const x = 2; // error
  var x = 3; //不报错
}

使用参数默认值时,函数不能有同名参数

// 不报错
function foo(x, x, y) {
  // ...
}

// 报错
function foo(x, x, y = 1) {
  // ...
}

参数默认值是惰性求值的,每次都重新计算默认值

let x = 99;
function foo(p = x + 1) {
  console.log(p);
}

foo() // 100

x = 100;
foo() // 101
//每次调用函数foo时都会重新计算参数x+1

函数length属性失真,不包括默认值参数,rest参数

length属性在有指定默认值的函数中,只返回没有默认值的参数的个数。即在有默认值参数的函数中,length失真.
这是因为length属性的含义是,该函数预期传入的参数个数。某个参数指定默认值以后,预期传入的参数个数就不包括这个参数了

(function (a) {}).length // 1
(function (a = 5) {}).length // 0
(function (a, b, c = 5) {}).length // 2

如果设置了默认值的参数不是尾参数,那么length属性也不再计入后面的参数了。

(function (a = 0, b, c) {}).length // 0
(function (a, b = 1, c) {}).length // 1

rest参数同理:

(function(...args) {}).length // 0

作用域

设置了参数默认值,函数进行声明初始化时,参数会形成一个单独作用域,等到初始化结束,这个作用域就会消失。这种语法行为,在不设置参数默认值时,是不会出现的。

var x = 1;

function f(x, y = x) {
  console.log(y);
}

f(2) // 2

下面是更复杂的例子

var x = 1;
function foo(x, y = function() { x = 2; }) {
  var x = 3;
  y();//y函数中的x指向参数x
  console.log(x);
}

foo() // 3
x // 1
var x = 1;
function foo(x, y = function() { x = 2; }) {
  x = 3;//x与参数x是一致的
  y();//y函数中的x指向参数x
  console.log(x);
}

foo() // 2
x // 1

rest参数

rest参数形式为(...变量名)

function add(...values) {
  let sum = 0;

  for (var val of values) {
    sum += val;
  }

  return sum;
}

add(2, 5, 3) // 10

rest 参数之后不能再有其他参数(即只能是最后一个参数),否则会报错

// 报错
function f(a, ...b, c) {
  // ...
}

函数的length属性,不包括 rest 参数。

(function(a) {}).length  // 1
(function(...a) {}).length  // 0
(function(a, ...b) {}).length  // 1

箭头函数

①箭头函数里的this就是定义所在的对象,不是使用时所在的对象,箭头函数没有自己的this,导致内部的this就是外层代码块中的this

②由于箭头函数没有自己的this,所以当然也不能用call(), apply(), bind()改变this指向

③不可以用作构造函数,即不可以使用new命令(没有this)

④不存在arguments对象,可用rest参数代替

⑤对象不构成单独的作用域

导致jumps箭头函数定义时的作用域就是全局作用域。

const cat = { 
    lives: 9, 
    jumps: () => { this.lives--; }//指向全局作用域
}
ES6新增了大括号{}表示的块级作用域,但是对象并不构成单独的作用域

总结要点

函数参数默认值

  • 参数变量是默认声明的,所以不能用let或const再次声明
  • 使用参数默认值时,函数不能有同名参数
  • 函数length属性失真,不包括默认值参数,rest参数
  • 参数默认值是惰性求值的,每次都重新计算默认值
  • 作用域:设置了参数默认值,函数进行声明初始化时,参数会形成一个单独作用域

rest参数

  • rest参数形式为(...变量名)
  • rest 参数之后不能再有其他参数(即只能是最后一个参数),否则会报错
  • 函数的length属性,不包括 rest 参数。

箭头函数

  • 箭头函数里的this就是定义所在的对象,不是使用时所在的对象,箭头函数没有自己的this,导致内部的this就是外层代码块中的this
  • 由于箭头函数没有自己的this,所以当然也不能用call(), apply(), bind()改变this指向
  • 不可以用作构造函数,即不可以使用new命令(没有this)
  • 不存在arguments对象,可用rest参数代替
  • 对象不构成单独的作用域

  • 个人Github,欢迎star^_^
  • ES6总结系列参考自阮一峰《ECMAScript6入门》

上一篇:ES6总结系列之 模板字符串 篇
下一篇:ES6总结系列之 数组的扩展 篇

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant