每日五道前端面试题--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;
}
相关推荐
玩电脑的辣条哥2 小时前
Python如何播放本地音乐并在web页面播放
开发语言·前端·python
ew452183 小时前
ElementUI表格表头自定义添加checkbox,点击选中样式不生效
前端·javascript·elementui
suibian52353 小时前
AI时代:前端开发的职业发展路径拓宽
前端·人工智能
画月的亮3 小时前
element-ui 使用过程中遇到的一些问题及解决方法
javascript·vue.js·ui
Moon.93 小时前
el-table的hasChildren不生效?子级没数据还显示箭头号?树形数据无法展开和收缩
前端·vue.js·html
m0_526119403 小时前
点击el-dialog弹框跳到其他页面浏览器的滚动条消失了多了 el-popup-parent--hidden
javascript·vue.js·elementui
垚垚 Securify 前沿站3 小时前
深入了解 AppScan 工具的使用:筑牢 Web 应用安全防线
运维·前端·网络·安全·web安全·系统安全
工业甲酰苯胺5 小时前
Vue3 基础概念与环境搭建
前端·javascript·vue.js
lyj1689976 小时前
el-tree选中数据重组成树
javascript·vue.js·elementui
mosquito_lover17 小时前
怎么把pyqt界面做的像web一样漂亮
前端·python·pyqt