导航

创建一个对象的方式有哪几种？

new Object

const obj = new Object()
obj.name = 'Lance'

字面量

const obj = { name: 'Lance' }

工厂模式

function createObj(name) {
  const obj = new Object()
  obj.name = name
  return obj
}
const obj = createObj('Lance')

构造函数

function Person(name) {
  this.name = name
}
const person = new Person('Lance')

⭐ Javascript中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是？

hasOwnProperty

hasOwnProperty返回一个布尔值，指出一个对象是否具有指定名称的属性。此方法不会检查该对象的原型链中是否具有该属性；该属性必须是对象本身的一个成员。

使用方法： object.hasOwnProperty(proName) 其中参数object是必选项。一个对象的实例。 proName是必选项。一个属性名称的字符串值。如果 object 具有指定名称的属性，那么JavaScript中hasOwnProperty函数方法返回 true，反之则返回 false。

⭐ instanceof 实现原理

只要右边变量的 prototype 在左边变量的原型链上即可。

思路

步骤1：先取得当前类的原型，当前实例对象的原型链
步骤2：一直循环（执行原型链的查找机制）
- 取得当前实例对象原型链的原型链（proto = proto.__proto__，沿着原型链一直向上查找）
- 如果当前实例的原型链__proto__上找到了当前类的原型prototype，则返回 true
- 如果一直找到Object.prototype.__proto__ == null，Object的基类(null)上面都没找到，则返回 false

function myInstanceof(obj, Func) {
  let __proto__ = obj.__proto__; // 拿到对象原型
  let prototype = Func.prototype; // 拿到构造函数原型
  while (true) {
    if (__proto__ === null) { // 退出条件: 找到了 Object的基类 Object.prototype.__proto__
      return false;
    }
    if (__proto__ === prototype) { // 在对象的原型链上找到了构造函数
      return true;
    }
    __proto__ = __proto__.__proto__; // 沿着原型链 __proto__ 一层一层向上查找
  }
}

优化版 (处理兼容问题)

Object.getPrototypeOf()：用来获取某个实例对象的原型（内部[[prototype]]属性的值，包含proto属性）

function myInstanceof(obj, Func) {
  let __proto__ = Object.getPrototypeOf(obj);
  let prototype = Func.prototype;

  while (true) {
    if (__proto__ === null) {
      return false;
    }
    if (__proto__ === prototype) {
      return true;
    }
    __proto__ = Object.getPrototypeOf(__proto__);
  }
}

new 操作符为什么能创建一个实例对象？

分析一下 new 的整个过程：

1、创建一个空对象
2、继承构造函数的原型
3、this指向obj，并调用构造函数
4、返回对象

⭐ 实现一个 new

function _new(fn, ...args) {
  const obj = Object.create(fn.prototype)
  const ret = fn.apply(obj, args)
  return ret instanceof Object ? ret : obj
}
// 测试
function Person(name, age) {
  this.name = name
  this.age = age
  this.sayHi = function() {}
}
Person.prototype.run = function() {}
console.log(_new(Person, 'Lance', 19))
console.log(new Person('Jerry', 20))

如何判断当前脚本运行在浏览器还是node环境中？

this === window ? 'browser' : 'node';
通过判断Global对象是否为window，如果不为window，当前脚本没有运行在浏览器中

⭐ 写一下深拷贝

深拷贝：JSON.parse(JSON.stringify())
浅拷贝：Object.assgin

// 不解决循环引用
function deepClone(obj) {
    // 处理 null 或者 undefined
    if (obj === null || typeof obj !== 'object') {
        return obj;
    }

    // 处理数组
    if (Array.isArray(obj)) {
        var arrCopy = [];
        for (var i = 0; i < obj.length; i++) {
            arrCopy[i] = deepClone(obj[i]);
        }
        return arrCopy;
    }

    // 处理普通对象
    var objCopy = {};
    for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
            objCopy[key] = deepClone(obj[key]);
        }
    }
    return objCopy;
}

var test1 = {};
var test2 = {};
test1.test2 = test2;
test2.test1 = test1;

function deepClone(source, hashMap = new WeakMap()) {
  if (source == undefined || typeof source !== 'object') {
  	return source;
  }
  if (source instanceof Date) {
  	return new Date(source);
  }
  if (source instanceof RegExp) {
  	return new RepExp(source);
  }

  const hasItem = hashMap.get(source);
  if (hasItem) return hasItem;

  const target = new source.constructor();
  hashMap.set(source, target);

  for (const key in source) {
  	if (Object.prototype.hasOwnProperty.call(source, key)) {
    	target[key] = deepClone(source[key], hashMap);
    }
  }
  return target;
}

console.log(deepClone(test2));

Object.prototype.toString的实现原理是什么

Object.prototype.toString 是 JavaScript 所有对象的原型方法，可以用于 获取对象的内部类型标签（[[Class]]）。其原理是通过 Symbol.toStringTag 或 Object.prototype 的 内部 [[Class]] 属性来返回对象的类型字符串。

Object.prototype.toString 的基本行为

console.log(Object.prototype.toString.call([]));  // "[object Array]"
console.log(Object.prototype.toString.call({}));  // "[object Object]"
console.log(Object.prototype.toString.call(null));  // "[object Null]"
console.log(Object.prototype.toString.call(undefined));  // "[object Undefined]"
console.log(Object.prototype.toString.call(new Date()));  // "[object Date]"
console.log(Object.prototype.toString.call(/\\d+/));  // "[object RegExp]"

可以看到，Object.prototype.toString.call(value) 返回的字符串格式是：

"[object 类型名]"

其中 类型名 来自对象的 [[Class]] 内部属性。

[[Class]] 内部属性

在 JavaScript 规范中，每个对象都有一个内部 [[Class]] 属性。当 Object.prototype.toString 被调用时，它会返回：

"[object " + value.[[Class]] + "]"

比如：

Array 的 [[Class]] 是 "Array"，所以 Object.prototype.toString.call([]) === "[object Array]"
RegExp 的 [[Class]] 是 "RegExp"，所以 Object.prototype.toString.call(/\d+/) === "[object RegExp]"

[[Class]] 并不是 JavaScript 直接暴露的属性，而是 ECMA 规范 定义的内部字段。

Symbol.toStringTag 覆盖默认 [[Class]]

在 ES6 之后，引入了 Symbol.toStringTag，可以自定义 Object.prototype.toString 的返回值。

示例：修改 toString 返回值

const obj = {
  [Symbol.toStringTag]: "CustomObject"
};

console.log(Object.prototype.toString.call(obj));  // "[object CustomObject]"

在 obj 上定义 Symbol.toStringTag，可以让 Object.prototype.toString 返回自定义的类型名。

浏览器内置对象的 Symbol.toStringTag

很多内置对象的 toString 也依赖 Symbol.toStringTag：

console.log(Object.prototype.toString.call(new Map()));  // "[object Map]"
console.log(Object.prototype.toString.call(new Set()));  // "[object Set]"
console.log(Object.prototype.toString.call(new Promise(() => {})));  // "[object Promise]"

这些对象的 Symbol.toStringTag 被设置成 "Map"、"Set"、"Promise" 等。

为什么要用 Object.prototype.toString.call(value)

console.log(typeof []);  // "object"
console.log(typeof {});  // "object"
console.log(typeof function() {});  // "function"
console.log(typeof null);  // "object"  (历史遗留问题)
console.log(typeof new Date());  // "object"

typeof 没法区分数组、对象这些对象类型，而 Object.prototype.toString.call(value) 可以正确识别类型。

Object.defineProperty(target, key, options)，options可传什么参数？

value：给target[key]设置初始值
get：调用target[key]时触发
set：设置target[key]时触发
writable：默认false，为true时此属性才能被赋值运算符修改
enumerable：默认false，为true时此属性才能被枚举
configurable：默认为false，为true时此属性的描述符才能被修改，才能被删除

⭐ 实现一个单例

// ES5
function People(name, age) {
  this.name = name;
  this.age = age;
}

let Singleton = function(Fn) {
  let _instance = null;
  return function(...args) {
    if (_instance) return _instance;
    return _instance = new Fn(...args);
  }
}

let peopleSingleton = Singleton(People);

let ming = new peopleSingleton('ming', 18);
let fang = new peopleSingleton('fang', 18);
console.log(ming, fang);

// ES6

class People {
  constructor(name, age) {
    if (typeof People._instance === 'object') return People._instance;
    this.name = name;
    this.age = age;
    return People._instance = this;
  }
}

let ming = new People('ming', 20);
let fang = new People('fang', 19);
console.log(ming, fang);

⭐ 判断JS对象是否存在循环引用

思路