React——ES6语法补充

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

例如：

const person = {
  name: "头发没了还会再长",
  talk: function(){
    console.log(this);
  }
}

person.talk();// person调用

const talk = person.talk;
talk(); // 等价于window.talk() 所以是window调用
1
2
3
4
5
6
7
8
9
10
11

运行结果：

{name: “头发没了还会再长”, talk: ƒ}
Window {window: Window, self: Window, document: document, name: “”, location: Location, …}

bind()函数，可以绑定this的取值。例如：

const talk = person.talk.bind(person);
1

再执行talk()这一行时，输出为
{name: “头发没了还会再长”, talk: ƒ}

箭头函数的简写方式

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

可以简写为：

const f = x => x * x; //return和大括号同时去掉
1

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

const person = {
  talk: function() {
    setTimeout(function() {
      console.log(this); //这个this指向window 因为最近的这个function是window调用
    }, 1000);
  }
};

person.talk();  // 输出Window
const person = {
  talk: function() {
    setTimeout(() => {
      console.log(this);//这个this指向talk 因为最近的这个function是person调用
    }, 1000);
  }
};

person.talk();  // 输出 {talk: f}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

对象的解构
例如：

const person = {
  name: "头发没了还会再长",
  age: 18,
  height: 168
};

const {name : nm, age} = person;  // nm是name的别名
console.log(nm, age); // 输出：头发没了还会再长 18
1
2
3
4
5
6
7
8

数组和对象的展开
例如：

let a = [1, 2, 3];
let b = [...a];  // b是a的复制
let c = [...a, 4, 5, 6]; //c是将a复制后加上4 5 6
console.log(a); // [1, 2, 3]
console.log(b); // [1, 2, 3]
console.log(a == b); //false
console.log(c); //[1, 2, 3, 4, 5, 6]
1
2
3
4
5
6
7

const a = {name: "头发没了还会再长"};
const b = {age: 18};
const c = {...a, ...b, height: 168};
console.log(a); // {name: "头发没了还会再长"}
console.log(b); // {age: 18}
console.log(c); // {name: "头发没了还会再长", age: 18, height: 168}
1
2
3
4
5
6

Named 与 Default exports

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

例如：

export default class person{
    constructor(){
      console.log("new person");
    }
  }
  
  let id = 1;
  
  export{
    id
  }
1
2
3
4
5
6
7
8
9
10
11

import Myperson, {id} from "./person"; //person是export default，所以不用加括号且可以直接改名为Myperson（或者其他名字），id 为named expor 所以要加大括号

let person = new Myperson();
console.log(person, id); // person {} 1
1
2
3
4