每日五道前端面试题--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;
}
相关推荐
开心工作室_kaic3 分钟前
ssm102“魅力”繁峙宣传网站的设计与实现+vue(论文+源码)_kaic
前端·javascript·vue.js
放逐者-保持本心,方可放逐3 分钟前
vue3 中那些常用 靠copy 的内置函数
前端·javascript·vue.js·前端框架
IT古董4 分钟前
【前端】vue 如何完全销毁一个组件
前端·javascript·vue.js
Henry_Wu0016 分钟前
从swagger直接转 vue的api
前端·javascript·vue.js
奋飞安全7 分钟前
初试js反混淆
开发语言·javascript·ecmascript
SameX16 分钟前
初识 HarmonyOS Next 的分布式管理:设备发现与认证
前端·harmonyos
M_emory_43 分钟前
解决 git clone 出现:Failed to connect to 127.0.0.1 port 1080: Connection refused 错误
前端·vue.js·git
Ciito1 小时前
vue项目使用eslint+prettier管理项目格式化
前端·javascript·vue.js
成都被卷死的程序员1 小时前
响应式网页设计--html
前端·html
fighting ~1 小时前
react17安装html-react-parser运行报错记录
javascript·react.js·html