JavaScript

[scarcoco]

原型链

示例代码

function Student(name) {
    this.name = name
}
Student.prototype.hello = function() {
    console.log(`hello, ${this.name || ''}`);
}
const a = new Student('zhangsan')
const b = new Student('lisi')

a.__proto__ === Student.prototype
b.__proto__ === Student.prototype

Student.prototype.__proto__ === Object.prototype

Student.__proto__ === Function.prototype
Function.prototype.__proto__ === Object.prototype

[scarcoco]

Object

类方法

assign

Object.assign(target, ...sources)

• 实际调用了 target 的 setter 和 sources 的 getter；
• target 被修改，且返回新的 target，且两者相同；
• sources 支持多个；
• assign 是浅拷贝，只拷贝源对象自身且可枚举的属性；
• 原始类型会被包装成对象，但只有字符串有可枚举属性；
• 异常会终止拷贝，但异常之前的成功拷贝；
• 如果想拷贝描述符，需要自己实现；

const obj = {
  foo: 1,
  get bar() {
    return 2;
  }
};

let copy = Object.assign({}, obj); 
console.log(copy); // { foo: 1, bar: 2 } 

create

Object.create(proto[, propertiesObject])

• 注意区分 Object.create(null) 和 {}；
• Object.create 用于替换原型继承中的 F 函数；
• 第二个参数不能是 null 或者非原始包装对象；

defineProperties 和 defineProperty

Object.defineProperties(obj, props)
Object.defineProperty(obj, prop, descriptor)

• configurable 默认 false
• enumerable 默认 false
• value 默认 undefined
• writable 默认 false
• get 默认 undefined
• set 默认 undefined

{} 定义对象属性时，默认值和上面的这种方式的默认值不同。

Object.entries()、Object.values()、Object.keys()

Object.entries(obj)
Object.values(obj)
Object.keys(obj)

• 分别返回键值对、值、键数组；
• 返回顺序与for in 一致，区别是这些方法只返回自身属性可枚举属性，不返回原型上的属性；
• new Map(Object.entries(obj)) 快速返回 Map 对象；

Object.fromEntries

Object.fromEntries(iterable)

• 把 Map、Array 等可迭代对象转为普通对象

const entries = new Map([
  ['foo', 'bar'],
  ['baz', 42]
]);
Object.fromEntries(entries)
Object.fromEntries([['a', 1], ['b', 2]])

Object.seal、Object.freeze、Object.preventExtensions、Object.isSealed、Object.isExtensible、Object.isFrozen

灵活性：普通对象 > Object.preventExtensions > Object.seal > Object.freeze

Object.is

判断值是否相同

• 除 Symbol 基本类型相同值都是相同，包括相同的两个 undefined、null、布尔值、字符串、+0、-0、NaN 等
• +0和-0 返回 false
• 相同应用对象认为是同一个，否则不同；
• 注意区分 == 和 ===；

Object.is('foo', 'foo');     // true
Object.is(window, window);   // true

Object.is('foo', 'bar');     // false
Object.is([], []);           // false

var foo = { a: 1 };
var bar = { a: 1 };
Object.is(foo, foo);         // true
Object.is(foo, bar);         // false

Object.is(null, null);       // true

// 特例
Object.is(0, -0);            // false
Object.is(0, +0);            // true
Object.is(-0, -0);           // true
Object.is(NaN, 0/0);         // true

Object.getPrototypeOf、Object.setPrototypeOf

Object.getPrototypeOf(obj)
// prototype 必须是对象 或 null，否则忽略
Object.setPrototypeOf(obj, prototype)

var proto = {};
var obj = Object.create(proto);
Object.getPrototypeOf(obj) === proto; // true

var reg = /a/;
Object.getPrototypeOf(reg) === RegExp.prototype; // true

Object.getOwnPropertyDescriptors、Object.getOwnPropertyDescriptor

Object.getOwnPropertyDescriptors(obj)
Object.getOwnPropertyDescriptors(obj, property)

• ES5 中 obj 不是对象报 TpyeError，ES2015 则会转为对象

Object.getOwnPropertyDescriptor('foo', 0);

Object.getOwnPropertySymbols、Object.getOwnPropertyNames

返回对象所有的 Symbol 属性和非 Symbol 属性

Object.getOwnPropertySymbols(obj)
Object.getOwnPropertyNames(obj)

实例方法

对象 isPrototypeOf

protoObj.isPrototypeOf(obj)

• 检查一个对象是否存在于另一个对象的原型链上；
• 注意区分 instanceof

function Foo() {}
function Bar() {}
function Baz() {}

Bar.prototype = Object.create(Foo.prototype);
Baz.prototype = Object.create(Bar.prototype);

var baz = new Baz();

console.log(Baz.prototype.isPrototypeOf(baz)); // true
console.log(Bar.prototype.isPrototypeOf(baz)); // true
console.log(Foo.prototype.isPrototypeOf(baz)); // true
console.log(Object.prototype.isPrototypeOf(baz)); // true

obj.propertyIsEnumerable

判断对象属性是否可枚举

obj.propertyIsEnumerable(prop)

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object

[scarcoco]

instanceof

1. 被误解的 instanceof

也许之前就片面理解 instanceof 的意思，实际使用也没有更深入使用，导致有些误解了instanceof，如果从 JavaScript 原型继承来理解，应该不会有问题。

obj instanceof Constructor

判断 Constructor.prototype 是否在 obj 的原型链上，

多个 frame 时，不同 frame 的全局对象是不同的。

2. 区分 Object.prototype.isPrototypeOf

protoObj.isPropotypeOf(obj)

判断 protoObj 是否在对象 obj 的原型链上。

[scarcoco]

for ... in 和 for ... of

• for ... of 适用于遍历数组、字符串、Set、Map等拥有迭代器的数据，不能遍历对象；
• for ... in 适用于遍历对象（需要注意原型链上属性）

[scarcoco]

Set、WeakSet、Map、WeakMap

Set 的方法

• Constructor
• size 属性（注意不是 length）
• add(value)，返回 Set 本身；
• delete(value)，返回成功或者失败；
• has(value)，返回元素是否存在；
• clear()
• keys、values、entries 返回迭代器，注意 Set 不存在键值，所以 keys 和 values 返回一样，entries 返回数组每个元素两个值都是相同的；
• forEach 同数组的 forEach((v, k, arr) => {})；

Map

• Constructor
• size 属性（注意不是 length）
• set(key, value)，返回 Map 本身；
• get(key)，键值对应的值，找不到返回 undefined；
• delete(key)，返回成功或者失败；
• has(key)，返回键值是否存在；
• clear()
• keys、values、entries 返回迭代器
• forEach 同数组的 forEach((v, k, arr) => {})

Set 和 WeakSet以及Map和WeakMap 区别

• WeakSet 只能存储对象（null 除外），WeakMap 的键值只能是对象（null 除外）；
• WeakSet 内存储的对象不计算引用次数，WeakMap 的键值所指的对象不计算引用次数；
• Weak* 不可遍历，相关方法：keys、values、entries、forEach也没有，也不能 ... 运算；

Map 与 Object 的区别

Object 的键值只能是字符串，Map 的键值可以是任何类型

什么情况下认为是相同元素（Set）或相同的键值（Map）

如果两个值全等（=== ），则认为是相同元素和相同键值，NaN 除外。