每日五道前端面试题--day11

以下题目来自掘金等其它博客,但是问题的答案都是根据笔者自己的理解做出的。如果你最近想要换工作或者巩固一下自己的前端知识基础,不妨和我一起参与到每日刷题的过程中来,如何?

第11天要刷的面试题如下:

  1. 对于原型和原型链的理解
  2. 如何修改和重写原型对象
  3. 原型链的指向是什么?
  4. 原型链的终点是什么?
  5. 如何获取非原型链上的属性?实现hasOwnProperty方法

附加题: 如果a.b的值为undefined,则可能有几种情况,如何判断?

下面是我自己的理解:

1. 对于原型和原型链的理解

  • 原型:指的是对象的原型,可以通过Object.getProperty(o)或者o.__proto__获得,其值为object类型的;
  • 原型的作用:构成原型链,根据原型设计模式,可以对部分方法和属性进行复用,节省了内存。
  • 原型链:假设Object.getProperty(o)的值为o1, Object.getProperty(o1)的值为o2,以此类推直到Object.getProperty(on)的值为null,那么o1->o2->...->on->null这个对象链条就称之为原型链;
  • 原型链作用:当尝试获取o上的'p'属性的时候,如果o本身没有这个属性,则会继续在o1上尝试,如果找到则将o1.p的值作为o.p的值返回,如果仍然没有找到,则在o2中找,直到null,然后返回undefiend.

2. 如何修改和重写原型对象

  • 对于构造函数P而言,其prototype属性是可写的,所以直接修改此值就可以了
  • 对于P的实例对象p而言,使用Object.setProperty方法修改其原型
  • 对于P而言一般称为原型对象,含义为:【原型】指名为property的属性;【对象】指property属性的值x是一个对象,即typeof x === 'object'
  • 对于p而言一般称为对象原型,含义为:【对象】指p是一个对象,即typeof p === 'object';【原型】指p的__proto__属性
js 复制代码
class P {}
const p = new P();
P.prototype = null;
console.log(Object.getPrototypeOf(p)); // 不是null
P.prototype = Object.getPrototypeOf(p);

3. 原型链的指向是什么?

o的原型链指向下一个原型对象x, x可以通过Object.getProperty(o)或者o.__proto__获得,其中o.__proto__是只读的。

4. 原型链的终点是什么?

虽然可以使用Object.setPrototypeOf指定对象的原型对象,但是指定的新对象必须是typeof x === 'object'类型的;也就是说原型链的终点是null

5. 如何获取非原型链上的属性?实现hasOwnProperty方法

  • 可以使用hasOwnProperty来获取非原型链上的属性;但是这种做法存在风险,因为对象上可能没有hasOwnProperty方法。
js 复制代码
const myHasOwnProperty = (property) => {
    const _stash = Object.getPrototypeOf(this);
    Object.setPrototypeOf(this, null);
    const rst = property in this;
    Object.setPrototypeOf(this, _stash);
    return rst
}

附加题: 如果a.b的值为undefined,则可能有几种情况,如何判断?为什么说使用hasOwnProperty进行判断是不够严谨的

  • 情况1:a上没有b,但是原型链上有b并且值为undefined
  • 情况2:a上有b但是值为undefined
  • 情况3:a上没有b,并且其原型链上也没有b
js 复制代码
function (obj, prop) {
    let _case = 0;
    const _stash = Object.getPrototypeOf(obj);

    const _t1 = prop in obj;
    Object.setPrototypeOf(obj, null);
    const _t2 = prop in obj;
    Object.setPrototypeOf(obj, _stash);

    if (!_t1) {
        _case = 3;
    } else if(_t2){
        _case = 2;
    } else {
        _case = 1;
    }
    return _case;
}
相关推荐
diygwcom2 分钟前
electron-updater实现electron全量版本更新
前端·javascript·electron
volodyan5 分钟前
electron react离线使用monaco-editor
javascript·react.js·electron
^^为欢几何^^14 分钟前
lodash中_.difference如何过滤数组
javascript·数据结构·算法
Hello-Mr.Wang19 分钟前
vue3中开发引导页的方法
开发语言·前端·javascript
WG_1723 分钟前
C++多态
开发语言·c++·面试
鱼跃鹰飞43 分钟前
Leetcode面试经典150题-130.被围绕的区域
java·算法·leetcode·面试·职场和发展·深度优先
程序员凡尘1 小时前
完美解决 Array 方法 (map/filter/reduce) 不按预期工作 的正确解决方法,亲测有效!!!
前端·javascript·vue.js
编程零零七4 小时前
Python数据分析工具(三):pymssql的用法
开发语言·前端·数据库·python·oracle·数据分析·pymssql
北岛寒沫5 小时前
JavaScript(JS)学习笔记 1(简单介绍 注释和输入输出语句 变量 数据类型 运算符 流程控制 数组)
javascript·笔记·学习
everyStudy5 小时前
JavaScript如何判断输入的是空格
开发语言·javascript·ecmascript