未能正确利用原型继承(js的问题)

考虑下面代码:

html 复制代码
BaseObject = function(name) {
    if (typeof name !== "undefined") {
        this.name = name;
    } else {
        this.name = 'default'
    }
};

上面代码比较简单,就是提供了一个名字,就使用它,否则返回 default:

html 复制代码
var firstObj = new BaseObject();
var secondObj = new BaseObject('unique');

console.log(firstObj.name);  // -> 'default'
console.log(secondObj.name); // -> 'unique'

但是,如果这么做呢:

html 复制代码
delete secondObj.name;

会得到:

html 复制代码
console.log(secondObj.name); // 'undefined'

当使用 delete 删除该属性时,就会返回一个 undefined,那么如果我们也想返回 default 要怎么做呢?利用原型继承,如下所示:

html 复制代码
BaseObject = function (name) {
    if(typeof name !== "undefined") {
        this.name = name;
    }
};

BaseObject.prototype.name = 'default';

BaseObject 从它的原型对象中继承了name 属性,值为 default。因此,如果构造函数在没有 name 的情况下被调用,name 将默认为 default。同样,如果 name 属性从BaseObject的一个实例中被移除,那么会找到原型链的 name,,其值仍然是default。所以'

html 复制代码
var thirdObj = new BaseObject('unique');
console.log(thirdObj.name);  // -> Results in 'unique'

delete thirdObj.name;
console.log(thirdObj.name);  // -> Results in 'default'

作者:王大冶

链接:https://juejin.cn/post/7161959592967012366

相关推荐
0暗影流光014 小时前
十倍效能提升——Web 基础研发体系的建立
前端
前端一课14 小时前
用Agent Skill重构代码:300行缩至30行的实战教程
前端
腻害兔14 小时前
【若依项目-产品经理视角】RuoYi-Vue-Pro 源码拆解:IM 即时通讯模块,一个被低估的「全功能聊天系统」
java·前端·vue.js·产品经理·ai编程
奎叔15 小时前
Flutter 异常处理体系:从捕获、转换到恢复
前端
心念枕惊15 小时前
.NET CORE 授权进阶-角色、策略与动态权限实现
java·前端·.netcore
小徐_233315 小时前
寓言故事一则:狗猛酒酸
前端·ai编程
xiaobaoyu15 小时前
vue2+element开发中问题和解决方式
前端
KaMeidebaby15 小时前
卡梅德生物技术快报 | 核酸适配体文库测序:核酸适配体文库测序的技术原理、实验流程与数据解析
前端·网络·数据库·人工智能·算法
Yeauty15 小时前
渲染成图再 CLI 拼接,还是进程内直推?Rust 帧到视频的两条路
开发语言·rust·音视频
Hilaku16 小时前
为什么在 2026 年,MPA(多页面应用)正在悄悄复辟?
前端·javascript·程序员