未能正确利用原型继承(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

相关推荐
江沉晚呤时4 分钟前
C# 运行时类型创建:深入探索动态类型生成技术
开发语言·c#
XinZong5 分钟前
业余抱团搞副业:基于OpenClaw做了一款AI社交虾聊,产品做完了,求运营思路
javascript
萧曵 丶16 分钟前
Vue3组件通信全方案
前端·javascript·vue.js·typescript·vue3
前端那点事33 分钟前
双Token无感刷新:Vue3 + Axios 企业级完整实现
前端·vue.js
前端那点事34 分钟前
Vue Token鉴权避坑指南|5步完整实现(从生成到失效全解析)
前端·vue.js
Momo__34 分钟前
package.json 配置详解:依赖管理深度指南
前端
漫游的渔夫36 分钟前
前端开发者做 Agent:模型说执行就执行?先加 3 道闸门再碰真实业务
前端·人工智能·typescript
前端那点事36 分钟前
企业级Vue前端鉴权方案全解析|从Token到OAuth2.0,覆盖多端适配+权限管控
前端·vue.js
亲亲小宝宝鸭38 分钟前
从Vben-Admin里面学习hooks
前端·vue.js
Mintopia41 分钟前
MSW Mock Feature-First 方案
前端·架构