23.单实例对象

1. 单个对象： 对象，JavaScript 的基本 OOP 构建块如何独立工作？
2. 原型链：每个对象都有一个零个或多个 原型对象链。原型是 JavaScript 的核心继承机制。
3. 类：JavaScript 的 类 是对象的工厂。类及其实例之间的关系基于原型继承。
4. 子类化：子类 与其 超类 之间的关系也基于原型继承。

• 记录：作为记录的对象具有固定数量的属性，其密钥在开发时是已知的。它们的值可以有不同的类型。本章首先介绍了这种使用对象的方法。
• 字典：Objects-as-dictionaries 具有可变数量的属性，其密钥在开发时是未知的。它们的所有值都具有相同的类型。通常最好将映射用作词典而不是对象（本章稍后将对此进行介绍）。

const jane = {
  first: 'Jane',
  last: 'Doe', // optional trailing comma
};

• 第一个属性具有键first和值'Jane'。
• 第二个属性具有键last和值'Doe'。

assert.equal(jane.first, 'Jane'); // get property .first
jane.first = 'John'; // set property .first
assert.equal(jane.first, 'John');

const x = 4;
const y = 1;
assert.deepEqual(
  { x, y },
  { x: x, y: y }
);

• 如果属性键是字符串，则它也称为 属性名称。
• 如果属性键是符号，则它也称为 属性符号。

• Object.keys(obj)：返回obj的所有属性键
• Object.getOwnPropertyNames(obj)
• Object.getOwnPropertySymbols(obj)

obj.propKey

const obj = {};
assert.equal(obj.propKey, undefined);

obj.propKey = value;

const obj = {};
assert.deepEqual(
  Object.keys(obj), []);
obj.propKey = 123;
assert.deepEqual(
  Object.keys(obj), ['propKey']);

const jane = {
  first: 'Jane', // data property
  says(text) {   // method
    return `${this.first} says “${text}”`; // (A)
  }, // comma as separator (optional at end)
};
assert.equal(jane.says('hello'), 'Jane says “hello”');

• getter 是 调用 （读取）属性调用的方法。
• setter 是由 设置 （写入）属性调用的方法。

const jane = {
  first: 'Jane',
  last: 'Doe',
  get full() {
    return `${this.first} ${this.last}`;
  },
};
assert.equal(jane.full, 'Jane Doe');
jane.first = 'John';
assert.equal(jane.full, 'John Doe');

const jane = {
  first: 'Jane',
  last: 'Doe',
  set full(fullName) {
    const parts = fullName.split(' ');
    this.first = parts[0];
    this.last = parts[1];
  },
};
jane.full = 'Richard Roe';
assert.equal(jane.first, 'Richard');
assert.equal(jane.last, 'Roe');

> const obj = {foo: 1, bar: 2};
> {...obj, baz: 3}
{ foo: 1, bar: 2, baz: 3 }

> const obj = {foo: 1, bar: 2, baz: 3};
> {...obj, foo: true}
{ foo: true, bar: 2, baz: 3 }
> {foo: true, ...obj}
{ foo: 1, bar: 2, baz: 3 }

const copy = {...original};

const original = { a: 1, b: {foo: true} };
const copy = {...original};
// The first level is a true copy:
assert.deepEqual(
  copy, { a: 1, b: {foo: true} });
original.a = 2;
assert.deepEqual(
  copy, { a: 1, b: {foo: true} }); // no change
// Deeper levels are not copied:
original.b.foo = false;
// The value of property `b` is shared
// between original and copy.
assert.deepEqual(
  copy, { a: 1, b: {foo: false} });

const DEFAULTS = {foo: 'a', bar: 'b'};
const providedData = {foo: 1};
const allData = {...DEFAULTS, ...providedData};
assert.deepEqual(allData, {foo: 1, bar: 'b'});

const providedData = {foo: 1};
const allData = {foo: 'a', bar: 'b', ...providedData};
assert.deepEqual(allData, {foo: 1, bar: 'b'});

const obj = {foo: 'a', bar: 'b'};
const updatedObj = {...obj, foo: 1};
assert.deepEqual(updatedObj, {foo: 1, bar: 'b'});

const jane = {
  first: 'Jane',
  says(text) {
    return `${this.first} says “${text}”`;
  },
};

assert.equal(typeof jane.says, 'function');

const jane = {
  first: 'Jane',
  says: function (text) {
    return `${this.first} says “${text}”`;
  },
};

someFunc.call(thisValue, arg1, arg2, arg3);

const obj = {
  method(x) {
    assert.equal(this, obj); // implicit parameter
    assert.equal(x, 'a');
  },
};
obj.method('a');
// Equivalent:
obj.method.call(obj, 'a');

1. 一个用于访问属性：obj.prop
2. 一个用于进行方法调用：obj.prop()

function func(x) {
  assert.equal(this, undefined); // implicit parameter
  assert.equal(x, 'a');
}
func('a');
// Equivalent:
func.call(undefined, 'a');

const boundFunc = someFunc.bind(thisValue, arg1, arg2, arg3);

boundFunc('a', 'b')
someFunc.call(thisValue, arg1, arg2, arg3, 'a', 'b')

const boundFunc2 = (...args) =>
  someFunc.call(thisValue, arg1, arg2, arg3, ...args);

function bind(func, thisValue, ...boundArgs) {
  return (...args) =>
    func.call(thisValue, ...boundArgs, ...args);
}

function add(x, y) {
  return x + y;
}
const add8 = add.bind(undefined, 8);
assert.equal(add8(1), 9);

const jane = {
  first: 'Jane',
  says(text) {
    return `${this.first} says “${text}”`; // (A)
  },
};
const func = jane.says.bind(jane, 'hello');
assert.equal(func(), 'Jane says “hello”');

const jane = {
  first: 'Jane',
  says(text) {
    return `${this.first} says “${text}”`;
  },
};
const func = jane.says; // extract the method
assert.throws(
  () => func('hello'), // (A)
  {
    name: 'TypeError',
    message: "Cannot read property 'first' of undefined",
  });

assert.throws(
  () => jane.says.call(undefined, 'hello'), // `this` is undefined!
  {
    name: 'TypeError',
    message: "Cannot read property 'first' of undefined",
  });

const func2 = jane.says.bind(jane);
assert.equal(func2('hello'), 'Jane says “hello”');

const func3 = text => jane.says(text);
assert.equal(func3('hello'), 'Jane says “hello”');

class ClickHandler {
  constructor(elem) {
    elem.addEventListener('click', this.handleClick); // (A)
  }
  handleClick(event) {
    alert('Clicked!');
  }
}

elem.addEventListener('click', this.handleClick.bind(this));

const obj = {
  name: 'Jane',
  sayHiTo(friends) {
    return friends.map(
      function (friend) { // (A)
        return `${this.name} says hi to ${friend}`; // (B)
      });
  }
};
assert.throws(
  () => obj.sayHiTo(['Tarzan', 'Cheeta']),
  {
    name: 'TypeError',
    message: "Cannot read property 'name' of undefined",
  });

const obj = {
  name: 'Jane',
  sayHiTo(friends) {
    return friends.map(
      (friend) => {
        return `${this.name} says hi to ${friend}`;
      });
  }
};
assert.deepEqual(
  obj.sayHiTo(['Tarzan', 'Cheeta']),
  ['Jane says hi to Tarzan', 'Jane says hi to Cheeta']);

1. 提取方法
2. 意外遮蔽this

“避免关键字function”：绝不使用普通函数，只使用箭头函数（用于实际函数）和方法定义。

• 如果所有实际函数都是箭头函数，则第二个陷阱永远不会发生。
• 使用方法定义意味着您只能在方法中看到this，这使得此功能不那么混乱。

• 功能调用：
  • 普通功能：this === undefined
  • 箭头功能：this与周围范围相同（词汇this）
• 方法调用：this是呼叫接收方
• new：this是指新创建的实例

• <script>元素：this === window
• ES 模块：this === undefined
• CommonJS 模块：this === module.exports

const obj = {
  mustBeAnIdentifier: 123,
};
// Get property
assert.equal(obj.mustBeAnIdentifier, 123);
// Set property
obj.mustBeAnIdentifier = 'abc';
assert.equal(obj.mustBeAnIdentifier, 'abc');

const obj = {
  'Can be any string!': 123,
};

// Get property
assert.equal(obj['Can be any string!'], 123);
// Set property
obj['Can be any string!'] = 'abc';
assert.equal(obj['Can be any string!'], 'abc');

const obj = {
  'A nice method'() {
    return 'Yes!';
  },
};
assert.equal(obj['A nice method'](), 'Yes!');

const obj = {
  ['Hello world!']: true,
  ['f'+'o'+'o']: 123,
  [Symbol.toStringTag]: 'Goodbye', // (A)
};
assert.equal(obj['Hello world!'], true);
assert.equal(obj.foo, 123);
assert.equal(obj[Symbol.toStringTag], 'Goodbye');

assert.equal(obj['f'+'o'+'o'], 123);
assert.equal(obj['==> foo'.slice(-3)], 123);

const methodKey = Symbol();
const obj = {
  [methodKey]() {
    return 'Yes!';
  },
};
assert.equal(obj[methodKey](), 'Yes!');

const obj = {
  foo: 'abc',
  bar: false,
};
assert.equal('foo' in obj, true);
assert.equal('unknownKey' in obj, false);

assert.equal(
  obj.unknownKey ? 'exists' : 'does not exist',
  'does not exist');
assert.equal(
  obj.foo ? 'exists' : 'does not exist',
  'exists');

assert.equal(
  obj.bar ? 'exists' : 'does not exist',
  'does not exist'); // should be: 'exists'

const obj = {
  foo: 123,
};
assert.deepEqual(Object.keys(obj), ['foo']);
delete obj.foo;
assert.deepEqual(Object.keys(obj), []);

const dict = {};
assert.equal('toString' in dict, true);

const dict = {};
dict['__proto__'] = 123;
// No property was added to dict:
assert.deepEqual(Object.keys(dict), []);

• 只要你可以，使用映射。它们是词典的最佳解决方案。
• 如果你不能：将库用于可以安全地完成所有操作的对象字典。
• 如果你不能：使用没有原型的对象。这消除了现代 JavaScript 中的两个陷阱。

  const dict = Object.create(null); // no prototype
  assert.equal('toString' in dict, false);
  dict['__proto__'] = 123;
  assert.deepEqual(Object.keys(dict), ['__proto__']);
  

const enumerableSymbolKey = Symbol('enumerableSymbolKey');
const nonEnumSymbolKey = Symbol('nonEnumSymbolKey');
// We create the enumerable properties via an object literal
const obj = {
  enumerableStringKey: 1,
  [enumerableSymbolKey]: 2,
}
// For the non-enumerable properties,
// we need a more powerful tool:
Object.defineProperties(obj, {
  nonEnumStringKey: {
    value: 3,
    enumerable: false,
  },
  [nonEnumSymbolKey]: {
    value: 4,
    enumerable: false,
  },
});
assert.deepEqual(
  Object.keys(obj),
  [ 'enumerableStringKey' ]);
assert.deepEqual(
  Object.getOwnPropertyNames(obj),
  [ 'enumerableStringKey', 'nonEnumStringKey' ]);
assert.deepEqual(
  Object.getOwnPropertySymbols(obj),
  [ enumerableSymbolKey, nonEnumSymbolKey ]);
assert.deepEqual(
  Reflect.ownKeys(obj),
  [ 'enumerableStringKey',
    'nonEnumStringKey',
    enumerableSymbolKey,
    nonEnumSymbolKey ]);

const obj = {foo: 1, bar: 2};
assert.deepEqual(
  Object.values(obj),
  [1, 2]);

const obj = {foo: 1, bar: 2};
assert.deepEqual(
  Object.entries(obj),
  [
    ['foo', 1],
    ['bar', 2],
  ]);

• 具有整数索引的属性（例如，数组索引）
  • 按升序数字顺序
• 带字符串键的剩余属性
  • 按照添加顺序
• 带符号键的属性
  • 按照添加顺序

> Object.keys({b:0,a:0, 2:0,1:0})
[ '1', '2', 'b', 'a' ]

assert.deepEqual(
  Object.fromEntries([['foo',1], ['bar',2]]),
  {
    foo: 1,
    bar: 2,
  }
);

const address = {
  street: 'Evergreen Terrace',
  number: '742',
  city: 'Springfield',
  state: 'NT',
  zip: '49007',
};
assert.deepEqual(
  pick(address, 'street', 'number'),
  {
    street: 'Evergreen Terrace',
    number: '742',
  }
);

function pick(object, ...keys) {
  const filteredEntries = Object.entries(object)
    .filter(([key, _value]) => keys.includes(key));
  return Object.fromEntries(filteredEntries);
}

assert.deepEqual(
  invert({a: 1, b: 2, c: 3}),
  {1: 'a', 2: 'b', 3: 'c'}
);

function invert(object) {
  const mappedEntries = Object.entries(object)
    .map(([key, value]) => [value, key]);
  return Object.fromEntries(mappedEntries);
}

function fromEntries(iterable) {
  const result = {};
  for (const [key, value] of iterable) {
    let coercedKey;
    if (typeof key === 'string' || typeof key === 'symbol') {
      coercedKey = key;
    } else {
      coercedKey = String(key);
    }
    Object.defineProperty(result, coercedKey, {
      value,
      writable: true,
      enumerable: true,
      configurable: true,
    });
  }
  return result;
}

• Object.defineProperty()在本章后面中解释。
• 官方 polyfill 可通过 npm 包object.fromentries 获得。

• .toString()
• .valueOf()

> String({toString() { return 'Hello!' }})
'Hello!'
> String({})
'[object Object]'

> Number({valueOf() { return 123 }})
123
> Number({})
NaN

Object.assign(target, source_1, source_2, ···)

const target = { foo: 1 };
const result = Object.assign(
  target,
  {bar: 2},
  {baz: 3, bar: 4});
assert.deepEqual(
  result, { foo: 1, bar: 4, baz: 3 });
// target was changed!
assert.deepEqual(target, result);

const frozen = Object.freeze({ x: 2, y: 5 });
assert.throws(
  () => { frozen.x = 7 },
  {
    name: 'TypeError',
    message: /^Cannot assign to read only property 'x'/,
  });

• writable：是否可以更改属性的值？
• enumerable：Object.keys()是否列出了该属性？

const obj = { foo: 123 };
assert.deepEqual(
  Object.getOwnPropertyDescriptor(obj, 'foo'),
  {
    value: 123,
    writable: true,
    enumerable: true,
    configurable: true,
  });

const obj = {
  foo: 1,
  bar: 2,
};
assert.deepEqual(Object.keys(obj), ['foo', 'bar']);
// Hide property `bar` from Object.keys()
Object.defineProperty(obj, 'bar', {
  enumerable: false,
});
assert.deepEqual(Object.keys(obj), ['foo']);