JS继承笔记

2019-11-20 23:45:28

字体：大中小

来源：转载

供稿：网友

JS继承
JavaScript中没有类的概念，与类相关的继承的概念更是无从谈起，但是我们可以通过特殊的语法来

模拟面向对象语言中的继承。
在JS中模拟继承有多种方式，其中寄生组合模式是一种比较容易简单的模拟继承模式，下面我们就来

介绍一下用寄生组合模式模拟继承。
JS的继承包括属性的继承和方法的继承，他们分别通过不同的方法来实现。
1属性的继承
属性的继承通过改变函数的执行环境来实现的。而改变函数的执行环境可以使用call()和apply()两种

方法来实现。
我们首先创建一个Animal“类”（因为JS中没有类的概念，这里只是一个模拟，它实际上只是一个

Function函数对象）。

复制代码代码如下:

 
　　 function Animal(name){ 
　　 this.name=name; 
　　} 

再创建一个Lion“类”，“继承”于Animal

复制代码代码如下:

 
　　function Lion(){ 
　　 Animal.apply(this, ["狮子"]); 
　　 } 

这里使用了Animal的apply方法，把Animal的执行环境改成Lion被调用时的执行环境。
这里要解释一下，我们要想使用Lion这个“类”，通常需要new一个Lion。如：
　　　　　　 var l = new Lion();
而new关键字是十分伟大的，在上段代码中，new关键字完成了以下几项工作:
　　 1)开辟堆空间，以准备存储Lion对象
　　2)修改Lion对象本身的执行环境，使得Lion函数的this指向了Lion函数对象本身。
　　3)调用Lion“类”的“构造函数”，创建Lion对象
　　4)将Lion函数对象的堆地址赋值给变量l，这个时候l就指向了这个Lion函数对象
所以经过new关键字以后Animal.apply(this, ["狮子"])中的this已经指向了Lion函数对象本身了，所

以这段代码就将Animal函数的执行环境改变成了Lion函数中，相当于以下代码：

复制代码代码如下:

 
　　function Lion(){ 
　　function Animal(name){ 
　　this.name=name; 
　　 } 
　　} 

而此时的this已经是Lion函数对象了所以上段代码进一步相当于：

复制代码代码如下:

 
　　function Lion(){ 
　　 this.name=name; 
　　} 

这样就给Lion函数对象添加了name属性，也模拟了Lion函数继承于Animal函数的效果。
2方法的继承
在JS中每一个“类”（即函数，注意不是函数对象）都有一个prototype属性，prototype表示该函数

的原型，也表示一个类的成员的集合（通常是方法的集合）。我们可以通过函数的prototype属性来实现方

法的继承。
我们同样首先创建一个Animal“类”：

复制代码代码如下:

 
　　 function Animal(name){ 
　　this.name=name; 
　　} 

给Animal的原型中加入一个eat方法：

复制代码代码如下:

 
　　Animal.prototype.eat=function(){ 
　　　alter("我能吃！~")； 
　　} 

创建一个Lion“类”，同时完成对Animal“类”的属性的继承

复制代码代码如下:

 
　　 function Lion(){ 
Animal.apply(this, ["狮子"]); 
　　} 

注意下面的代码，我们马上要完成方法的继承了
Lion.prototype=new Animal();
这样就把一个Animal函数对象储存在了Lion的原型中了，Lion也就包含了Animal中的方法了（其实也

包含了属性）。这样就模拟了Lion函数对Animal的继承。

上一篇：JS高级笔记

下一篇：$.format,jquery.format 使用说明

学习交流

索泰发布一款GTX 1070 Mini迷你版本:小机

索泰发布一款GTX 1070 Mini迷你版本:小机箱大爱...

热门图片

猜你喜欢的新闻

猜你喜欢的关注

新闻热点

荣耀总裁赵明乌镇演讲：荣耀首款5G手机V30下月发布

2019-10-23 09:17:05

搜狐张朝阳：回归媒体是搜狐重新崛起的关键

2019-10-21 09:20:02

华为轮值董事长郭平：虚拟技术创造现实价值

2019-10-21 09:00:12

滴滴英文服务上线两周年用户已超200万

2019-09-26 08:57:12

华为推出全球至快AI训练集群Atlas900

2019-09-25 08:46:36

马斯克：特斯拉正组建中国技术团队

2019-09-25 08:15:43

疑难解答

图片精选

网友关注

JS继承 笔记

JS继承笔记