JavaScript中易犯的小错误-------常见错误七:原型继承问题

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript中易犯的小错误-------常见错误七:原型继承问题相关的知识,希望对你有一定的参考价值。

javascript中易犯的小错误-------常见错误七:原型继承问题

 

很大一部分的js开发者都不能完全掌握原型的继承问题。下面具一个例子来说明:
BaseObject = function(name) {
if(typeof name !== "undefined")
{

this.name = name;

}
else
{

this.name = ‘default‘

}

};
这段代码看起来很简单。如果你有name值,则使用它。如果没有,则使用 ‘default’:
var firstObj = new BaseObject();
var secondObj = new BaseObject(‘unique‘);
console.log(firstObj.name); // -> 结果是‘default‘
console.log(secondObj.name); // -> 结果是 ‘unique‘
但是如果我们执行delete语句呢:
delete secondObj.name;
我们会得到:
console.log(secondObj.name); // -> 结果是 ‘undefined‘
但是如果能够重新回到 ‘default’状态不是更好么? 其实要想达到这样的效果很简单,如果我们能够使用原型继承的话:
BaseObject = function (name)
{

if(typeof name !== "undefined")
{

this.name = name;

   }

};
BaseObject.prototype.name = ‘default‘;
在这个版本中, BaseObject 继承了原型中的name 属性, 被设置为了 ‘default‘.。这时,如果构造函数被调用时没有参数,则会自动设置为 default。相同地,如果name 属性被从BaseObject移出,系统将会自动寻找原型链,并且获得 ‘default‘值:
var thirdObj = new BaseObject(‘unique‘);
console.log(thirdObj.name);
delete thirdObj.name;
console.log(thirdObj.name); // -> 结果是 ‘default‘

 

以上是关于JavaScript中易犯的小错误-------常见错误七:原型继承问题的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript中易犯的小错误-------常见错误四:比较运算符

JavaScript中易犯的小错误-------常见错误五:低效的DOM操作

JavaScript中易犯的小错误-------常见错误二:传统编程语言的生命周期误区

十个JavaScript中易犯的小错误,你中了几枪?

CSS网页布局中易犯的10个小错误

遍历时常犯的小错误以及属性attr 和 prop