码迷,mamicode.com
首页 > Web开发 > 详细

js 实现继承的几种方式

时间:2018-03-18 13:11:51      阅读:223      评论:0      收藏:0      [点我收藏+]

标签:子类   属性   构造   不能   类的构造函数   type   font   实例   方式   

//js中实现继承的几种方式
//实现继承首先要有一个父类,先创造一个动物的父类

 

function Animal(name){
this.name = name;
this.shoot = function(){
console.log("yelp");
}
}
//动物的原型
Animal.prototype.eat = function(food){
 
console.log(name+"吃"+food);
}

 

//1.实例继承
var dog = new Animal("大黄");
// console.log(dog.name);
// dog.eat("骨头");
//用父类的构造函数实例化出来的实例对象就继承了父类的属性和方法
//缺点:

 

//2.上下文继承,改变this的指向
function Dog(name){
Animal.call(this);
this.name = name;
}
var dog = new Dog("rose");
//dog.shoot();
//console.log(dog.name);
// dog.eat("fish");//报错,不能继承原型方法
//使用上下文的方法,改变this的指向,让Dog拥有Animal的属性
//缺点:只能继承父类的实例属性和方法,不能继承父类的原型属性和方法

 

//3.遍历继承
/* var cat = {};
var a = new Animal("jj");
cat.prototype.lookhome = function(){
console.log("lookhome");
}
for(var key in a){
cat[key]=a[key];
}
cat.lookhome();
console.log(cat.name);
cat.shoot();
cat.eat("fish");*/
//使用循环遍历的方法,把Animal的属性赋给cat,这样cat就拥有了Animal的属性和方法

 

//4.原型链继承
/* function Cat(name){
this.name = name;
}
Cat.prototype = new Animal();
var cat = new Cat("kitty");
cat.shoot();
cat.eat("meat");//吃meat,没有名字,不能给父类的构造函数传参
console.log(cat.name);*/
//把父类的实例赋给子类的原型,这样子类实例化出来的实例就拥有了父类的属性和方法
//缺点:不能向父类的构造函数传参,

 

//5.混合继承
/* function Cat(name){
Animal.call(this);
this.name = name;
}

 

Cat.prototype = new Animal();
Cat.prototype.lookhome=function(){
console.log("lookhome");
}
var cat = new Cat("kitty");
cat.eat("fish");
cat.shoot();
cat.lookhome();
console.log(cat.name);*/
//结合上下文和原型链继承,让子类拥有父类的属性和方法,也拥有原型方法
//缺点:如果要给子类添加自己的原型属性和方法,必须放在继承父类属性的后面,放在继承之前会
//被覆盖
//6.另一种方式实现继承
/* function Cat(){
this.sleep = function(){
console.log("cat sleep");
}
}
Cat.prototype.lookhome = function(){
console.log("lookhome");
}
Cat.prototype.__proto__ = new Animal();
 
var cat = new Cat();
cat.eat("fish");
cat.sleep();
cat.lookhome();*/
//每一个对象都有一个__proto__的属性,通过父类的构造函数的原型的__proto__属性,继承父类的属性和方法,这样不会覆盖自己的原型方法

 

js 实现继承的几种方式

标签:子类   属性   构造   不能   类的构造函数   type   font   实例   方式   

原文地址:https://www.cnblogs.com/steamed-twisted-roll/p/8595012.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!