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

相关推荐
摸鱼仙人~几秒前
纯前端 Vue 实现共享预览链接方案
前端·javascript·vue.js
happymaker0626几秒前
VueCli标准化工程中的组件通信操作
开发语言·前端·javascript
weixin_443478512 分钟前
Flutter第三方常用组件包学习之状态管理
javascript·学习·flutter
Yiyi_Coding3 分钟前
Proxy详解
java·前端·javascript
ySq0REx014 分钟前
.NET 10 & C# 14 New Features 新增功能介绍-.NET CLI工具改进
开发语言·c#·.net
a1117764 分钟前
PreTeXt 开源推荐(应用demo)
前端·开源·html
Howrun7778 分钟前
C++ 项目测试全指南:从 0 基础到落地实操
开发语言·c++·log4j
小灰灰搞电子8 分钟前
Qt UI 线程详解-阻塞与解决方案
开发语言·qt·ui
追光的蜗牛丿9 分钟前
C++传递参数时什么情况下传递引用
开发语言·javascript·c++
Pocker_Spades_A10 分钟前
Python快速入门专业版(五十六)——爬虫会话管理:Cookie与Session原理及实战(保持登录状态)
开发语言·爬虫·python