导航

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

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.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对象是否存在循环引用

思路
- 循环引用的判断我们可以通过map来进行暂存，当值是对象的情况下，我们将对象存在map中，循环判断是否存在，如果存在就是存在环了，同时进行递归调用。具体解答可以参考下面的代码。

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

obj.c = obj

// isHasCircle函数， 存在环输出true，不存在的话输出false
isHasCircle(obj)

function isHasCircle(obj) {
    let hasCircle = false; // 是否循环
    const map = new Map(); // map存对象

    function loop(obj) {
        const keys = Object.keys(obj)

        keys.forEach(key => {
            const value = obj[key]
            if (typeof value == 'object' && value !== null) {
                if (map.has(value)) { // 如果有，判定有循环，return退出迭代
                    hasCircle = true
                    return
                } else { // 如果没有，添加元素进map，继续递归元素
                    map.set(value, value)
                    loop(value)
                }
            }
        })

    }

    loop(obj)

    return hasCircle
}

⭐ JSON 序列化的缺点

JSON.stringify()将值转换为相应的JSON格式：

布尔值、数字、字符串的包装对象在序列化过程中会自动转换成对应的原始值。
属性值为 undefined、任意的函数以及 symbol，在序列化过程中会被忽略（出现在非数组对象的属性值中时）或者被转换成 null（出现在数组中时）。函数、undefined 被单独转换时，会返回 undefined，如JSON.stringify(function(){}) or JSON.stringify(undefined).
对包含循环引用的对象（对象之间相互引用，形成无限循环）执行此方法，会抛出错误。
所有以 symbol 为属性键的属性都会被完全忽略掉，即便 replacer 参数中强制指定包含了它们。
Date 日期调用了 toJSON() 将其转换为了 string 字符串（同Date.toISOString()），因此会被当做字符串处理。
NaN 和 Infinity 格式的数值及 null 都会被当做 null。
其他类型的对象，包括 Map/Set/WeakMap/WeakSet，仅会序列化可枚举的属性。

JavaScript 继承方式有哪些？

实例化对象继承
- 特点
  - 继承了原型链上的所有属性
- 缺点
  - 继承了一些没必要的属性（重复的属性在子类实例对象上和原型上都有）

Professor.prototype = {
	name: 'Mr.Zhang',
  tSkill: 'Java'
}
function Professor() {}
var professor = new Professor(); // 让子类 prototype 等于 父类的实例化对象

Teacher.prototype = professor;
function Teacher() {
	this.name = 'Mr.Wang';
  this.mSkill = 'JS';
}
var teacher = new Teacher();

Student.prototype = teacher;
function Student() {
	this.name = 'Mr.Li';
  this.pSkill = 'HTML';
}
var student = new Student();
console.log(student);

借用构造函数继承
- 缺点
  - 不能继承父类原型上的方法属性
- 本质
  - call/apply 是通过改变 this 指向，来借用构造函数的属性和方法

Teacher.prototype.wife = 'Ms.Liu';
function Teacher(name, mSkill) {
	this.name = name;
  this.mSkill = mSkill;
}
function Student(name, mSkill, age, major) {
	Teacher.apply(this, [name, mSkill]);
  this.age = age;
  this.major = major;
}
var student = new Student('Mr.B', 'JS', 18, 'Computer');
console.log(student);

共用原型
- 缺点
  - 修改了子类原型，会影响父类原型

function Teacher() {
	this.name = 'Mr.Wang';
  this.mSkill = 'JS';
}
Teacher.prototype = {
	pSkill: 'JQ'
}
var teacher = new Teacher();

Student.prototype = Teacher.prototype;
function Student() {
	this.name = 'Mr.Li';
}

var student = new Student();
Student.prototype.name = 'student';
console.log(student);
console.log(Teacher.prototype);

寄生组合继承
- 特点
  - 创建一个函数当原型继承的中间桥梁 + 借用构造函数

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.sayHi = function() {
        console.log("sayHi");
    }
}

Person.prototype.eat = function() {
    console.log("eat");
}

function Student(name, age, score) {
    Person.call(this, name, age);
    this.score = score;
    this.study = function() {
        console.log("study");
    }
}

var inherit = (function () {
	function Buffer() {}
	return function (Target, Origin) {
    Buffer.prototype = Origin.prototype;
    Target.prototype = new Buffer();
    // 还原构造器
    Target.prototype.constructor = Target;
    // 指定继承源
    Target.prototype.super_class = Origin;
  }
})();

inherit(Student, Person);
var stu1 = new Student("Lance", 19, 100);
console.dir(stu1);

预测对象原型

var obj1 = Object.create(null);
obj1.a = 1;

var obj2 = Object.create(obj1);
obj2.b = 2;

console.log(obj2.__proto__); // ?

原型存在在原型链上，但现在链不存在了（就是最终到达 Object.prototype 的这个链儿在 obj1 这断掉了）

所以只要原型链断掉，往回倒得所有对象就都无法通过 自己.__proto__ 找到原型，为 undefined（也就是指针不指向任何原型了，就是 undefined 了）
__proto__ 是原型链的指针，原型链都被破坏了，这个指针也断了
__proto__ 是 Object 的属性

⭐ (a == 1 && a == 2 && a == 3) 有可能是 true 吗？

// 第一种
const a = {
  i: 0,
  toString() {
    return ++this.i
  }
}
console.log(a == 1 && a == 2 && a == 3) // true

// 第二种
const a = [1, 2, 3]
a.join = a.shift
console.log(a == 1 && a == 2 && a == 3) // true

// 第三种
let i = 0
Object.defineProperty(global, 'a', {
  get() {
    return ++i
  }
})
console.log(a == 1 && a == 2 && a == 3) // true

⭐ _ + _ + _ + ...

_ + _ 为 'ab'
_ + _ + _ 为 'abc'
...
一直到 'a...z' 26个字母为止

Object.defineProperty(window, '_', {
  get() {
    this.curCharCode = this.curCharCode || 'a'.charCodeAt(0); // 找到起始ascii位
    this.curChar = String.fromCharCode(this.curCharCode); // 赋值给要返回的值
    if (this.curCharCode >= 'a'.charCodeAt(0) + 26) return ''; // 一旦大于等于26 就返回空字符串
    this.curCharCode++; // 起始位自增
    return this.curChar;
  }
})

console.log(_ + _ + _ + _ + _ + _ + _ + _ + _ + _ + _ + _ + _ + _ + _ + _ + _ + _ + _ + _ + _ + _ + _ + _ + _ + _ + _ + _ + _ + _ + _);

⭐ 要求设计 LazyMan 类，实现以下功能

LazyMan('Tony');
// Hi I am Tony
LazyMan('Tony').sleep(10).eat('lunch');
// Hi I am Tony
// 等待了10秒...
// I am eating lunch
LazyMan('Tony').eat('lunch').sleep(10).eat('dinner');
// Hi I am Tony
// I am eating lunch
// 等待了10秒...
// I am eating diner
LazyMan('Tony').eat('lunch').eat('dinner').sleepFirst(5).sleep(10).eat('junk food');
// Hi I am Tony
// 等待了5秒...
// I am eating lunch
// I am eating dinner
// 等待了10秒...
// I am eating junk food

答案：

class LazyManClass {
    constructor (name) {
        this.name = name
        this.task = []
        console.log('Hi I am', name)
        **setTimeout(() => {
            this.next()
        }, 0)**
    }
    eat (str) {
        this.task.push(() => {
            console.log('I am eating', str)
            this.next()
        })
        return this
    }
    sleep (n) {
        this.task.push(() => {
            setTimeout(() => {
                console.log('等待了' + n + 's')
                this.next()
            }, n * 1000)
        })
        return this
    }
    sleepFirst (n) {
        this.task.unshift(() => {
            setTimeout(() => {
                console.log('等待了' + n + 's')
                this.next()
            }, n * 1000)
        })
        return this
    }
    next () {
        let fn = this.task.shift()
        fn && fn()
    }
};
let LazyMan = function (name) {
    return new LazyManClass(name)
};

解析：

这道题的关键点有如下几个：

链式调用，通过返回 this 实现
内部需要维护一个 taskList ，根据不同逻辑，向 taskList 中push 、shift、unshift 执行函数
每执行一个task，需要继续执行后续 task，这通过 next 函数实现。

题目来源：Daily-Interview-Question 第56题

⭐ 对象扁平化

const obj = {
    a: {
        b: 1,
        c: 2,
        d: { e: 5 },
    },
    b: [1, 3, { a: 2, b: 3 }],
    c: 3,
    d: []
}
/*
    {
        'a.b': 1,
        'a.c': 2,
        'a.d.e': 5,
        'b[0]': 1,
        'b[1]': 3,
        'b[2].a': 2,
        'b[2].b': 3
         c: 3,
         d: []
    }
*/

function flatObj(obj) {
  let ret = {};
  function walk(key, value) {
    if (typeof value === 'object' && value !== null) { // 是对象时
      if (Array.isArray(value)) { // 是数组时
        value.forEach((item, idx) => {
          walk(`${key}[${idx}]`, item);
        });
        if (value.length === 0) ret[key] = [];
      } else { // 是对象时
        Object.entries(value).forEach(([k, value]) => {
          walk(`${key}.${k}`, value);
        });
        if (Object.entries(value).length === 0) ret[key] = {};
      }
    } else { // 不是对象时
      ret[key] = value;
    }
  }
  // 第一次遍历 walk
  Object.entries(obj).forEach(([key, value]) => walk(key, value));
  return ret;
}

console.log(flatObj(obj));