网页资讯视频图片知道文库贴吧地图采购
进入贴吧全吧搜索
javascript吧 关注：269,306贴子：906,484
  • 12回复贴，共1页

一个错误引发的诡异的结果

function Dog(){
this.name="dog";
this.age="4";
}
function Cat(){
this.name="cat";
this.age="3";
this.work="nowork"
this.cry=function(){
return "I am cry";
}
}
Dog.prototype=Cat;
var dog=new Dog();
console.log(dog);//结果： Function { age="4"}
怎么会这样呢？


Cat 是構造器，不是原型物件。簡單的原型繼承可以這樣寫，比構造器簡單有效率：
// 貓，將會是狗的原型
var Cat = {
name: "cat",
age: "3",
work: "nowork",
cry: function(){ return "I am cry"; }
};
// IE 11 及其他所有瀏覽器的寫法
var Dog = {
__proto__: Cat,
name: "dog",
age: "4"
};
// IE <= 10 的寫法略冗長些。IE 6/7/8 需要上網複制 "Object.create" 函式。
var Dog = Object.create( Cat, {
name: { value: "dog" },
age: { value: "4" }
} );
// 繼承 Dog
dog = Object.create( Dog );
// "nowork"
console.log( dog.work );


其实我是觉得应该:Dog.prototype=Cat.prototype;
Dog.prototype=Cat;这样的话， prototype本身是对象然后变成了一个函数
你可以试一下
console.log(Dog.prototype);
Dog.prototype = Cat;
console.log(Dog.prototype);


Dog.prototype = Cat;这句之后
var dog = new Dog();然后这句
访问dog属性，会先在自身那里找，之后再从prototype那里找，找到后覆盖前面。所以实现了继承。
console.log(dog.name);楼主试一下这句，输出Cat，注意不是cat。
console.log(Cat.name);上面那句相当于这句。
所以只有age。
为了让楼主更明白我的意思。请按照下面代码修改一下测试:
function Dog() {
this.name = "dog";
this.age = "4";
this.length = "4"; //只加了这句
}
Dog.prototype = Cat;
var dog = new Dog();
console.log(Cat.length); //结果： Function { age="4"} //主要是这句用来测试


我来给你解释一下吧，js中设置的任何对象都会自动获取一个name属性。
这个不清楚是火狐专有还是其他浏览器也有的。
Dog.prototype = Cat;
所以Dog的原型中是有一个name属性的。并且这个那么等于Cat；
至于为什么没有打印出来，我觉得可能是这类属性不可枚举（毕竟不是用户自定义的）。
你试一下下面一段代码。就明白了。
function Dog(){};
console.log(Dog.name);
所以， 最后， 慎用name属性。


扫二维码下载贴吧客户端

下载贴吧APP
看高清直播、视频！
  • 12回复贴，共1页
分享到: