小知识随手记（十）：多重重复解构对象、es6函数带默认参数时将生成声明作用域、动态设置getter/setter、属性选择器

一、多次重复解构对象

　　es6居然可以重复解构对象。我们看代码

const obj = {
  a: {
    b: 1
  },
  c: 2
};

const { a: { b }, a, c } = obj;
console.log(b, a, c)

　　一行代码同时获取 a 和 a.b 和 c 。 在a和b都要多次用到的情况下，普通人的逻辑就是先解构出 a ，再在下一行解构出 b 。

　　接着继续看多重重复解构，nice，挺方便的。

二、es6函数带默认参数时将生成声明作用域

　　我们直接看代码

var x = 10;

function fn(x = 2, y = function () { return x + 1 }) {
  var x = 5;
  return y();
}

fn();   // 3

　　改一下：

var x = 10;

function fn(a = 2, y = function () { return x + 1 }) {
  var x = 5;
  return y();
}

fn();   // 11

　　取的是最外层的x。那我们再改一下

var b = 10;

function fn(a = 2, y = function () { return x + 1 }) {
  var x = 5;
  return y();
}

fn();   // VM660:3 Uncaught ReferenceError: x is not defined

　　再改一下：

var x = 10;

function fn(x = 2, y = function (x) { return x + 1 }) {
  var x = 5;
  return y(x);
}

fn(); // 6

　　这样一测试，就比较清楚了。

三、一些注意点

1、parseInt 太小的数字会产生 bug

parseInt(0.00000000454);  // 4
parseInt(10.23);          // 10

parseInt(0.0000454);  // 0

2、与null或undefined相加

1 + null          // 1
1 + undefined     // NaN

Number(null)      // 0
Number(undefined) // NaN

3、arguments 和形参是别名关系

function test(a, b) {
  console.log(a, b); // 2, 3
  
  arguments[0] = 100;
  arguments[1] = 200;
  
  console.log(a, b); // 100, 200
}
test(2, 3);

4、是否存在这样的变量 x ，使得它等于多个数字？

const x = {
  value: 0,
  toString() {
    return ++this.value;
  }
}

x == 1 && x == 2 && x == 3;    // true

　　通过隐式转换，这样不是什么难的事情。关于隐式转换，直接看：

5、对象 === 比较的是内存地址，而 >= 将比较转换后的值

{} === {} // false

// 隐式转换 toString()
{} >= {}  // true

6、Function.prototype 是个函数类型。而自定义函数的原型却是对象类型。

typeof Function.prototype === 'function';  // true

function People() {}
typeof People.prototype === 'object';      // true

　　所以我们设置空函数可以这么做：

// Good 
const noop = Function.prototype;

// Bad
const noop = () => {};

四、getter/setter 也可以动态设置

class Hello {
  _name = 'lucy';
 
  getName() {
    return this._name;
  }
  
  // 静态的getter
  get id() {
    return 1;
  }
}

const hel = new Hello();

hel.name;       // undefined
hel.getName();  // lucy

// 动态的getter
Hello.prototype.__defineGetter__('name', function() {
  return this._name;
});

Hello.prototype.__defineSetter__('name', function(value) {
  this._name = value;
});

hel.name;       // lucy
hel.getName();  // lucy

hel.name = 'jimi';
hel.name;       // jimi
hel.getName();  // jimi