ES6语法补充

最新推荐文章于 2024-08-25 18:43:02 发布

m0_59519985

最新推荐文章于 2024-08-25 18:43:02 发布

阅读量258

点赞数 1

分类专栏： Vue 文章标签： es6 javascript 前端

本文链接：https://blog.csdn.net/m0_59519985/article/details/136541823

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文详细解释了JavaScript中`bind()`函数的作用，探讨了函数内`this`指向的规则，以及箭头函数对`this`的保持原样。还介绍了对象解构、数组展开以及命名与默认导出的特性。

摘要由CSDN通过智能技术生成

使用bind()函数绑定this取值
在JavaScript中，函数里的this指向的是执行时的调用者，而非定义时所在的对象。

例如：

const person = {
  name: "yxc",
  talk: function() {
    console.log(this);
  }
}

person.talk();

const talk = person.talk;
talk();

运行结果：

{name: 'yxc', talk: ƒ}
Window
bind()函数，可以绑定this的取值。例如：

const talk = person.talk.bind(person);
箭头函数的简写方式

const f = (x) => {
  return x * x;
};

可以简写为：

const f = x => x * x;

箭头函数不重新绑定this的取值
例如：

const person = {
  talk: function() {
    setTimeout(function() {
      console.log(this);
    }, 1000);
  }
};

person.talk();  // 输出Window
const person = {
  talk: function() {
    setTimeout(() => {
      console.log(this);
    }, 1000);
  }
};

person.talk();  // 输出 {talk: f}

对象的解构
例如：

const person = {
  name: "yxc",
  age: 18,
  height: 180,
};
const {name : nm, age} = person;  // nm是name的别名

数组和对象的展开
例如：

let a = [1, 2, 3];
let b = [...a];  // b是a的复制
let c = [...a, 4, 5, 6];
const a = {name: "yxc"};
const b = {age: 18};
const c = {...a, ...b, height: 180};

Named 与 Default exports
Named Export：可以export多个，import的时候需要加大括号，名称需要匹配
Default Export：最多export一个，import的时候不需要加大括号，可以直接定义别名