继承的几种方法及优缺点
1.构造函数继承
function Cat(name,color){ this.name = name; this.color = color; this.type = "猫科动物"; this.eat = function(){alert("吃老鼠");}; } var cat1=new Cat("花花","白色"); console.log(cat1.type);//猫科动物
cat1会自动含有一个construtor属性,指向它们的构造函数:alert(cat1.constructor == Cat); //true
Javascript还提供了一个instantanceof运算符,验证原型对象与实例对象之间的关系:alert(cat1 instanceof Cat); //true
缺点:浪费内存 (type
属性和eat()
方法都是一模一样的内容,每一次生成一个实例,都必须为重复的内容,多占用一些内存)
function Animal(){ this.species = "猫科动物"; } function Cat(name,color){ Animal.apply(this, arguments);//Cat继承Animal this.name = name; this.color = color; } var cat1 = new Cat("花花","白色"); alert(cat1.species); //猫科动物
apply、call 和 bind 方法继承: http://www.cnblogs.com/mina-huojian66/p/6097808.html
2.Prototype模式继承
Javascript规定,每一个构造函数都有一个prototype
属性,指向另一个对象。这个对象的所有属性和方法,都会被构造函数的实例继承。
function Animal(){
this.type="猫科动物";
}
function Cat(name,color){ this.name = name; this.color = color; }
方法一: Cat.prototype.type = "猫科动物"; Cat.prototype.eat = function(){alert("吃老鼠")}; var cat1=new Cat("花花","白色"); console.log(cat1.type);//猫科动物
console.log(cat1.eat());//吃老鼠
方法二:
Cat.prototype = new Animal();//Cat.prototype.constructor指向Anmail,也指向cat
console.log(Cat.prototype.constructor==Animal);//true
console.log(Cat.prototype.constructor==Cat);//true
Cat.prototype.condtructor=Cat;
var cat1=new Cat("花花","白色");
console.log(cat1.type);//猫科动物
方法三:
Cat.prototype=Animal.prototype;
Cat.prototype.constructor=Cat;
var cat1=new Cat("花花","白色");
console.log(cat1.type);//猫科动物
Prototype模式的验证方法
a.alert(Cat.prototype.isPrototypeOf(cat1)); //true
b.alert(cat1.hasOwnProperty("name")); // true
c.alert("name" in cat1); // true
缺点: Cat.prototype和Animal.prototype现在指向了同一个对象,那么任何对Cat.prototype的修改,都会反映到Animal.prototype。
Cat.prototype.constructor = Cat;
alert(Animal.prototype.constructor); // Cat
方法四:利用空对象作为中介 var F = function(){}; F.prototype = Animal.prototype; Cat.prototype = new F(); Cat.prototype.constructor = Cat; alert(Animal.prototype.constructor); // Animal
//封装
function jicheng(Child,Parent){
var F=function(){};
F.prototype=Parent.prototype;
Child.prototype=new F();
Child.prototype.construction=Child;
}
jicheng(Cat,Animal);
var cat1=new Cat("花花","白色");
console.log(cat1.type);//猫科动物
大部分学习于:http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_inheritance.html