html继承有哪几种方式,JS实现继承的几种常用方式示例

本文实例讲述了JS实现继承的几种常用方式。分享给大家供大家参考，具体如下：

1，原型链继承

原型链继承

/**

* 优点：

* 实例是父类的实例也是子类的实例

* 父类新增原型方法或者原型属性 子类都能访问到

* 简单 易于实现

* 缺点：

* 无法实现多继承

* 来自原型对象的引用属性和实例是所有子类共享的

* 创建子类实例的时候，无法向父构造函数传参

* 可以在Cat构造函数中，为Cat实例增加实例属性。如果要新增原型属性和方法，则必须放在new Animal()这样的语句之后执行。

* **/

function Animal(name) {

this.name=name;//属性

this.sleep=function () {//实例方法

console.log(this.name+'正在睡觉')

}

}

//原型方法

Animal.prototype.eat=function (food) {

console.log(this.name+'正在吃'+food)

};

//原型链继承---核心：将父类的实例作为子类的原型

function Cat() {

}

Cat.prototype=new Animal();

Cat.prototype.name='cat';

var cat=new Cat();

console.log(cat);//cat._proto_====>Animal 可以使用Animal里面的name属性 sleep方法

// 也可以使用 cat._proto_._proto_的eat方法 即animal的原型方法

// cat._proto_._proto_._proto_ 是object

console.log(cat.name);

cat.eat('fish');

cat.sleep();

运行结果：

2，构造继承

构造继承

/**

*构造继承 相当于复制父类的实例给子类 (没有用到原型)

* 只能使用父类的属性和方法 不能继承原型属性和方法 所以cat不能使用eat方法

* **/

function Animal(name) {

this.name=name;//属性

this.sleep=function () {//实例方法

console.log(this.name + '正在睡觉！');

}

}

// 原型方法

Animal.prototype.eat = function(food) {

console.log(this.name + '正在吃：' + food);

};

function Cat(name) {

Animal.call(this,name);//Cat就可以使用Animal的

// this.name=name

}

var cat=new Cat('Tom');

console.log(cat);//只能使用Animal的属性和实例方法 不能使用原型的方法

//cat的_proto_(指向的是一个函数) 是cat 构造器是Cat cat的_proto_._proto_ 是object

console.log(cat.name);

// cat.eat('fish');

cat.sleep()

运行结果：

3，组合继承

组合继承

function Animal(name) {

this.name=name;

this.sleep=function () {

console.log(this.name+"正在睡觉");

};

}

Animal.prototype.eat=function (food) {

console.log(this.name+"正在吃"+food);

}

function Cat(name) {

Animal.call(this,name)

}

Cat.prototype=new Animal();

// 组合继承也是需要修复构造函数指向的。

Cat.prototype.constructor=Cat;//构造器进行修改

Cat.prototype.show=function () {//可以在子类的原型上加方法 不影响父类

console.log("11111")

};

var cat=new Cat('Tom');

console.log(cat);//cat可以直接使用animal的属性和实例方法

//cat.proto是Animal cat.proto_._proto_ 是eat cat.proto_._proto_._proto_是object

console.log(cat.name);

cat.sleep();

cat.eat('fish')

cat.show()

运行结果：

4，寄生组合继承

寄生组合继承

function Animal(name) {

this.name=name;

this.sleep=function () {

console.log(this.name+"正在睡觉");

}

}

// 原型方法

Animal.prototype.eat = function(food) {

console.log(this.name + '正在吃：' + food);

};

function Cat(name) {

Animal.call(this,name);

}

// (function () {

//创建一个没有实例方法的类

var Super=function () {

};

Super.prototype=Animal.prototype;//eat

console.log(Animal.prototype);//构造方法还是Animal 可以使用eat方法 eat的_proto_ 是object

//初始化这个实例 把它作为子类(Cat)的原型

Cat.prototype=new Super();//一般 的话是new Animal()

Cat.prototype.constructor=Cat;//Cat的构造器还是Cat

// })();

var cat=new Cat('Tom');

console.log(cat.name);

cat.sleep();

cat.eat('food')

运行结果：

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。