es6--函数的扩展、class语法与继承

发布时间:2019-08-09 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了es6--函数的扩展、class语法与继承脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

函数的扩展

1.可以直接为函数的参数指定默认值

function Point(x,y='haha'){}

1.1. 注意

  • 使用参数默认值时,函数不能有同名参数。
  • 参数变量是默认声明的,所以不能用letconst再次声明。
  • 注意一下参数默认值的位置,尽量放在尾部。否则放在前面需要用undefiend(null不行)才能触发默认值。
  • 参数默认值可以和解构赋值默认值结合起来使用
function ha(x,y=1){const x=1;console.LOG(x)}
const p = new Gha(); // Uncaught SyntaxError: Identifier 'x' has already been declared

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

foo() // undefined 5  

1.2. 函数的length属性

length属性的含义是,该函数预期传入的参数个数。
指定了默认值以后,函数的length属性,将返回指定默认值的参数个数。如果设置了默认值的参数不是尾参数,那么length属性也不再计入后面的参数了。
即length属性会失真。

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

1.3. 作用域
函数调用时,函数体内部的局部变量x影响不到默认值变量x。

let x = 1;

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

f() // 1
VAR x = 1;

function foo(x = x) {
  // ...
}

foo() // ReferenceError: x is not defined

请注意下面2个实例

var x = 1;
function foo(x, y = function() { x = 2; }) {
  var x = 3;
  y();
  console.log(x);
}

foo() // 3
x // 1
var x = 1;
function foo(x, y = function() { x = 2; }) {
  x = 3;
  y();
  console.log(x);
}

foo() // 2
x // 1

1.4 应用

- 可以指定参数的默认值;
- 指定参数不得省略(方式1,将默认值设置为抛出错误的函数;方式2 设为undefiend)

2.函数的rest参数(...变量名)

含义:用于获取函数的多余参数.
rest参数(...变量名)搭配的变量是个数组
注意:

  • rest 参数的位置,只能在函数参数的尾端
  • 函数的length属性
  • ...变量名,也叫扩展运算符
  • 应用 数组可直接用在函数参数中
function add(...values) { // 这才是rest参数
  let sum = 0;

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

  return sum;
}

add(2, 5, 3) // 10  非此处是rest参数
add(...[2,5,3]) // 10  数组可直接用在函数参数中
@H_867_360@3.严格模式

ES2016 做了一点修改,规定只要函数参数使用了默认值、解构赋值或者扩展运算符,那么函数内部就不能显式设定为严格模式,否则会报错。
原因:函数的执行顺序:函数参数--》函数体。有时候,参数中使用了非严格模式,参数却能执行,等到函数体才报错,这样不合适,故es6直接禁止掉。

  • 解决方法1: 使用全局的严格模式,非函数的严格模式
  • 解决方法2: 把函数包在一个无参数的立即执行函数里面。
'use strict';

function DOSomething(a, b = a) {
  // code
}

const doSomething = (function () {
  'use strict';
  return function(value = 42) {
    return value;
  };
}());

4.name属性--还有函数的name属性;

  • es5es6的区别 对于函数表达式的name属性
  • 构造函数返回的函数实例,name属性值为anonymous
  • bind返回的函数,name属性值前加bound前缀
var f = function () {};

// ES5
f.name // ""

// ES6
f.name // "f"

const bar = function baz() {};

// ES5
bar.name // "baz"

// ES6
bar.name // "baz"

(new Function).name // "anonymous"
function foo() {};
foo.bind({}).name // "bound foo"

(function(){}).bind({}).name // "bound "

5.箭头函数

5.1 写法:(参数)=> XXXX

XXXX 只有一行, XXX就是返回值
若XXXX 超过一行, xxx就是函数体,返回值需要自己写
注意:当XXXX为{a:1}时,需要用小括号包一下,以免浏览器解析错误

5.2 与rest参数结合
应用1: 将函数参数变为数组

const numbers = (...nums) => nums;

numbers(1, 2, 3, 4, 5)
// [1,2,3,4,5]

const headAndTail = (head, ...tail) => [head, tail];

headAndTail(1, 2, 3, 4, 5)
// [1,[2,3,4,5]]

5.3 注意: 没有自己的this对象。可以绑定this对象
(1)函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。即传了啥,就是啥,和函数体无关。

(2)不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。

(3)不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。

(4)不可以使用yield命令,因此箭头函数不能用作 Generator 函数。

function Timer() {
  this.s1 = 0;
  this.s2 = 0;
  // 箭头函数
  setInterval(() => this.s1++, 1000);
  // 普通函数
  setInterval(function () {
    this.s2++;
  }, 1000);
}

var timer = new Timer();

setTimeout(() => console.log('s1: ', timer.s1), 3100);
setTimeout(() => console.log('s2: ', timer.s2), 3100);
// s1: 3
// s2: 0

6.总结 es5 es6 函数有哪些属性:

  1. length属性,
  2. name属性

7.双冒号运算符::

es5中有自己的this ,可用call apply bind 进行改变
es6 中用函数绑定运算符是并排的两个冒号(::),取代call apply bind;
函数绑定运算符是并排的两个冒号(::),双冒号左边是一个对象,右边是一个函数。该运算符会自动将左边的对象,作为上下文环境(即this对象),绑定到右边的函数上面。
obj::function();---obj就是this对象(上下文环境)

8.尾调用优化--未完待续

尾调用的概念:指某个函数的最后一步是调用另一个函数。

class

类的作用:通过类生成实例对象;优点,比之前的通过构造函数的方式,清晰、形象。更加像面向对象语言。

1.定义类的2种方法:

1.1构造函数的写法

class Haha{
    constructor(){}
    lala(){}
    ...
}
let shili = new Haha();
shili.lala();

1.2 表达式的写法

let Gaga = class me{
constructor(){}
    lala(){return me.name}
    ...
}
let shili = new Gaga();
shili.lala();

2.一些特性,主要是通过类生成实例对象

注意下constructor方法, 这个是类默认的方法,没有定义,也可以调用。

脚本宝典总结

以上是脚本宝典为你收集整理的es6--函数的扩展、class语法与继承全部内容,希望文章能够帮你解决es6--函数的扩展、class语法与继承所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。