1 function Super(){ 2 this.name=‘super‘; 3 } 4 Super.prototype.getName=function(){ 5 console.log(this.name); 6 } 7 function Sub(){ 8 this.name=‘sub‘; 9 } 10 11 Sub.prototype=new Super();//重写原型,实现继承 12 var instance=new Sub(); 13 instance.getName();//sub继承了getName方法
重写原型会让Sub的原型获得Super构造函数上和Super原型上的所有属性和方法; 但是这样单纯使用原型来继承也有问题,比如将上面的代码修改一下,在原型上添加一个引用类型的属性:
1 2 function Super() { 3 this.name=‘super‘; 4 } 5 Super.prototype.getName=function() { 6 console.log(this.name); 7 }; 8 Super.prototype.color = ["red", "black"]; 9 10 function Sub() { 11 } 12 13 Sub.prototype=new Super();//实现继承 14 15 var instance=new Sub(); 16 instance.color.push(‘white‘);//改变instance的color属性,push一个新的项 17 var ins = new Sub(); 18 console.log(ins.color); //["red", "black", "white"] 可以看到ins的color属性也被改变了
1 function Arr(){ 2 } 3 Arr.prototype.array=[‘red‘,‘black‘]; 4 arr01=new Arr(); 5 arr02=new Arr(); 6 arr01.array.push(‘white‘); 7 console.log(arr02.array);//["red", "black", "white"]
1 function superType(){ 2 this.color=[‘red‘,‘blue‘,‘yellow‘]; 3 } 4 function subType(){ 5 //继承了superType 6 superType.call(this); 7 } 8 9 var instance01=new subType(); 10 instance01.color.push(‘black‘); 11 console.log(instance01.color);//[‘red‘,‘blue‘,‘yellow‘,‘black‘] 12 13 var instance02=new subType(); 14 console.log(instance02.color);//[‘red‘,‘blue‘,‘yellow‘]
借用构造函数这种方法主要就是:利用parent . call(this)来继承父级构造函数上公有的属性,且在一个实例上进行修改不会对其他实例造成影响;[ 注意:使用call这种不能继承原型上属性和方法的哦 ]
1 function superType(name){ 2 this.name=name; 3 this.color=[‘red‘,‘blue‘,‘yellow‘]; 4 } 5 superType.prototype.sayName=function(){ 6 console.log(this.name); 7 } 8 9 function subType(name,age){ 10 //继承superType的属性 11 superType.call(this,name); 12 this.age=age; 13 } 14 //继承superType的方法 15 subType.prototype=new superType(); 16 subType.prototype.constructor=subType; 17 subType.prototype.sayAge=function(){ 18 console.log(this.age); 19 }; 20 21 var instance01=new subType(‘lazy‘,20); 22 instance01.color.push(‘black‘); 23 console.log(instance01.color);//[‘red‘,‘blue‘,‘yellow‘,‘black‘] 24 instance01.sayAge();//20 25 instance01.sayName();//lazy 26 27 var instance02=new subType(‘chen‘,21); 28 console.log(instance02.color);//[‘red‘,‘blue‘,‘yellow‘] 29 instance02.sayAge();//21 30 instance02.sayName();//chen
1 function superType(name){ 2 this.name=name; 3 this.color=[‘red‘,‘blue‘,‘yellow‘]; 4 } 5 superType.prototype.sayName=function(){ 6 console.log(this.name); 7 } 8 9 function subType(name,age){ 10 //继承superType 11 superType.call(this,name); 12 this.age=age; 13 } 14 15 function inheritPrototype(sub,sup){ 16 //创建超类型构造函数的原型副本 17 var prototype=Object(sup.prototype); 18 //为其指定构造函数,增强对象 19 prototype.constructor=sub; 20 //重写sub的原型对象 21 sub.prototype=prototype; 22 } 23 24 //copy一份超类型构造函数的原型对象给子类型构造函数 25 inheritPrototype(subType,superType); 26 27 subType.prototype.sayAge=function(){ 28 console.log(this.age); 29 }; 30 31 var instance01=new subType(‘lazy‘,20); 32 instance01.color.push(‘black‘); 33 console.log(instance01.color);//[‘red‘,‘blue‘,‘yellow‘,‘black‘] 34 instance01.sayAge();//20 35 instance01.sayName();//lazy 36 37 var instance02=new subType(‘chen‘,21); 38 console.log(instance02.color);//[‘red‘,‘blue‘,‘yellow‘] 39 instance02.sayAge();//21 40 instance02.sayName();//chen
这种方法主要依然是利用 借用构造函数的方法来继承构造函数的属性,利用原型链的混合方法来继承方法;基本思路是:不必为了重写subType的原型而去调用一次superType,因为我们需要的也只是superType的原型对象的一个副本而已,所以有了inheritPrototype函数:
1 function inheritPrototype ( sub ,super) { 2 var prototype = Object( super.prototype ); //创建副本 3 sub.prototype = prototype ; 4 prototype . constructor = sub ; 5 }
1 function createAnother(original) { 2 var clone = Object(original); 3 clone.sayHi = function () { 4 console.log(‘hi‘); 5 }; 6 return clone; 7 } 8 9 var person = { 10 name: ‘lazy‘, 11 friends:[1,2,3] 12 }; 13 14 var anotherPerson = createAnother(person); 15 anotherPerson.sayHi(); 16 console.log(anotherPerson.name);
这个例子中,基于person对象创建了一个新的对象anotherPerson,这个新的对象不仅具有person的所有属性和方法,而且还有自己的sayHi方法;
菜鸟小白一枚,可能上述有错误或理解不对的地方,恳请指出~~谢谢!
原文:http://www.cnblogs.com/lazychen/p/5458044.html