JavaScript继承方式

待我称王封你为后i 2022-08-18 11:32 293阅读 0赞

## 1.apply方法 ##

apply方法详情可以参考[JavaScript中的apply和call][JavaScript_apply_call]

apply方法同样也可以实现多继承

示例代码

function School(){
    	this.name = 'HEU';
    	this.showName = function(){
    		console.log(this.name);
    	}
    }
    function Unit(){
    	this.uname = 'meituan.com';
    	this.showUname = function(){
    		console.log(this.uname);
    	}
    }
    
    function Applyer(){
            //apply方法继承School类和Unit类
    	School.apply(this, arguments);
    	Unit.apply(this, arguments);	
    }
    
    var me = new Applyer();
    me.showName();
    me.showUname();

运行结果

![Center][]

apply语句分别用School和Unit替代了Applyer中的this，成功的实现了继承

也可以用call方法来实现

## 2.原型链方法 ##

prototype对象是一个模板，要实例化的对象都以这个模板为基础，简单地说，意思就是prototype对象的任何属性和方法，都被传递给那个类的所有实例，原型链方法使用这种功能来实现继承。

prototype的相关知识可以参考[JavaScript中的对象与类][JavaScript]

示例代码

function Box(){
    	this.size = 2;
    	this.showSize = function(){
    		console.log('the size is ' + this.size);
    	};
    }
    
    function Package(){
    
    }
    
    Package.prototype = new Box();
    
    var pack = new Package();
    pack.showSize();

运行结果

![Center 1][]

在以上的代码中，想要让Package继承Box的所有属性和方法，我们把Package的prototype属性设置为Box的实例

注意：原型链不能实现多重继承！

我们可以利用instanceof方法来确定原型和实例之间的关系

实例代码

function Box(){
    	this.size = 2;
    	this.showSize = function(){
    		console.log('the size is ' + this.size);
    	};
    }
    function Box2(){
    
    }
    function Package(){
    
    }
    
    Package.prototype = new Box();
    
    var pack = new Package();
    pack.showSize();
    console.log(pack instanceof Box);
    console.log(pack instanceof Package);
    console.log(pack instanceof Box2);

运行结果

![Center 2][]

## 3.混合方式 ##

创建类的最好方式是用构造函数定义属性，用原型定义方法，这种方法同样适合于继承机制。

示例代码

function Fruit(season, weight){
    	this.season = season;
    	this.weight = weight;
    }
    Fruit.prototype.showMessage = function(){
    	console.log(this.season);
    	console.log(this.weight);
    };
    
    function Apple(season, weight, size){
    	Fruit.call(this, season, weight);
    	this.size = size;
    }
    
    Apple.prototype = new Fruit();
    Apple.prototype.showMessage2 = function(){
    	console.log(this.season);
    	console.log(this.weight);
    	console.log(this.size);
    };
    
    var apple = new Apple('spring', 3, 2);
    var pear = new Fruit('summer', 4);
    apple.showMessage();
    console.log('\n');
    apple.showMessage2();
    console.log('\n');
    pear.showMessage();
    
    //用instanceof进行测试 观察
    console.log('\n');
    console.log(pear instanceof Fruit);
    console.log(pear instanceof Apple);
    console.log(apple instanceof Apple);
    console.log(apple instanceof Fruit);

运行结果

![Center 3][]

[JavaScript_apply_call]: http://blog.csdn.net/sinat_27350883/article/details/50264041
[Center]: /images/20220731/4d2b1343d5bc47bebb1abf5c9096e437.png
[JavaScript]: http://blog.csdn.net/sinat_27350883/article/details/50240645
[Center 1]: /images/20220731/3438b113b6114093a161d5482236fc86.png
[Center 2]: /images/20220731/e48c69ca13d3479e96d5f2b6c2b06a52.png
[Center 3]: /images/20220731/947dbc9011574632a1a01561c01ea295.png

发表评论取消回复

表情：

评论列表（有 0 条评论，293人围观）

还没有评论，来说两句吧...

相关阅读

相关 javascript的继承方式

面向对象编程，很重要的一点，就是对象的继承，一个对象继承另一个对象的方法。在实际中，对于减少重复代码的使用，了解对象的继承是有用的。下面介绍几种对象的继承方

àì夳堔傛蜴生んèń/ 2022年11月14日 11:54/ 0 赞/ 192 阅读

相关 Javascript中的继承方式

一、原型链 ECMAScript中的继承方式主要通过原型链实现。原型链的基本构想：每个构造函数都有一个原型对象，原型有一个属性指回构造函数本身，实例有一个内部指针指

超、凢脫俗/ 2022年11月10日 04:59/ 0 赞/ 184 阅读

相关 javascript继承方式总结

javascript继承方式总结 1. 原型继承 function supType() { this.colors = ["red", "gre

怼烎@/ 2022年10月19日 14:58/ 0 赞/ 199 阅读

相关 JavaScript继承方式

1.apply方法 apply方法详情可以参考[JavaScript中的apply和call][JavaScript_apply_call] apply方法同

待我称王封你为后i/ 2022年08月18日 11:32/ 0 赞/ 294 阅读

相关 javascript继承的实现方式

随便写写，具体的就不再做过多啰嗦了 1、原型(Prototype)，建议自己研究[原型与闭包][Link 1] var Person = function(){

谁借莪１个温暖的怀抱￠/ 2022年08月06日 07:14/ 0 赞/ 192 阅读

相关 JavaScript继承方式

原型链继承 > 原型链的基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。 var A = { name:'A',

雨点打透心脏的1/2处/ 2022年06月07日 12:35/ 0 赞/ 197 阅读

相关【JavaScript】实现继承的方式

> 引言：面向对象的编程语言都具继承这一机制,而 JavaScript 是基于原型(Prototype)面向对象程序设计,所以它的实现方式也是基于原型(Prototype)实现

心已赠人/ 2022年05月28日 01:19/ 0 赞/ 203 阅读

相关 javascript---对象继承方式

1. 对于初学这来说，掌握对象的继承方式是必修课，今天就在这里给大家总结下对象的几种继承方式。 2. 在学习对象的继承方式之前，需要了解什么是原型及原型链的概念，不知道的话

客官°小女子只卖身不卖艺/ 2022年05月17日 01:46/ 0 赞/ 177 阅读

相关【javascript】javascript继承的多种方式

1, 原型链继承 function Super() { }; function Sub() { }; Sub.prototype = ne

迈不过友情╰/ 2022年04月23日 04:32/ 0 赞/ 196 阅读

相关【JavaScript】三种方式实现JavaScript继承

1，组合继承 function Parent(value) { this.val = value } Parent.prototype

一时失言乱红尘/ 2022年03月10日 08:46/ 0 赞/ 243 阅读