javascript继承机制实例详解
更新时间：2014年11月20日 09:18:40 投稿：shichen2014
这篇文章主要介绍了javascript继承机制,以实例形式详细分析了javascript继承的原理与基于原型链的继承实现方法,具有不错的参考借鉴价值,需要的朋友可以参考下
本文实例讲述了javascript继承机制。分享给大家供大家参考。具体分析如下：
初学javascript一般很难理解Javascript语言的继承机制它没有"子类"和"父类"的概念，也没有"类"（class）和"实例"（instance）的区分，全靠一种很奇特的"原型链"（prototype chain）模式，来实现继承。
我花了很多时间，学习这个部分，还做了很多笔记。但是都属于强行记忆，无法从根本上理解。
一、如何创建一个类
假设有给叫Person的类如下：
复制代码 代码如下:
var Person = function(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.getName = function() {
return this.name;
}
this.name = name;
this.age = age;
}
Person.prototype.getName = function() {
return this.name;
}
如上：Person代表地球上所有的人，每个人都有这两个基本属性：name和age；现在我们要实现一个学生类，然后我们知道了； 学生也是一个人，及学生也有name和age等属性；现在的问题是怎么能把这个关系给搭起来？
先来看看纯面向对象的语言是如何做到的(如：Actionscrpt3)
复制代码 代码如下:
class Students extend Person {}; //很简单，一行代码；更确切的说是一个单词--extend
二、换成js如何能做到
在讲解js的继承机制实现之前，先了解一下js的原型链：
复制代码 代码如下:
var person = new Person('Poised-flw', 21);
person.getName(); // "Poised-flw"
person.getName(); // "Poised-flw"
就上面的getName()方法来说，是如何执行的？首先会在Person这个函数里面找是否有getName（）这个方法，发现没有；然后就转到 Person.prototype中寻找，发现有！然后就调用，若没有呢？继续按照相同的方法一直沿着prototype寻找下去，直到找到方法或者 达到原型链的顶端为止！
举例来说，现在有一个叫做DOG的构造函数，表示狗对象的原型。
复制代码 代码如下:
function DOG(name){
this.name = name;
}
this.name = name;
}
对这个构造函数使用new，就会生成一个狗对象的实例。
复制代码 代码如下:
var dogA = new DOG('大毛');
alert(dogA.name); // 大毛
alert(dogA.name); // 大毛
注意构造函数中的this关键字，它就代表了新创建的实例对象。
三、new运算符的缺点
用构造函数生成实例对象，有一个缺点，那就是无法共享属性和方法。
比如，在DOG对象的构造函数中，设置一个实例对象的共有属性species。
复制代码 代码如下:
function DOG(name){
this.name = name;
this.species = '犬科';
}
this.name = name;
this.species = '犬科';
}
然后，生成两个实例对象：
复制代码 代码如下:
var dogA = new DOG('大毛');
var dogB = new DOG('二毛');
var dogB = new DOG('二毛');
这两个对象的species属性是独立的，修改其中一个，不会影响到另一个。
复制代码 代码如下:
dogA.species = '猫科';
alert(dogB.species); // 显示"犬科"，不受dogA的影响
alert(dogB.species); // 显示"犬科"，不受dogA的影响
每一个实例对象，都有自己的属性和方法的副本。这不仅无法做到数据共享，也是极大的资源浪费。
所以：继承的思想： 通过js特有的原型链来实现继承机制！
四、基于原型链的继承
1.直接继承实现
复制代码 代码如下:
var Students = function(name, age, sid) {
Person.call(this, name, age);
this.sid = sid;
}
Students.prototype = new Person(); //把Person放到Students的原型链上实现继承机制
Students.prototype.constructor = Students;
Students.prototype.getResults = function() {
// 得到学生的成绩
}
Person.call(this, name, age);
this.sid = sid;
}
Students.prototype = new Person(); //把Person放到Students的原型链上实现继承机制
Students.prototype.constructor = Students;
Students.prototype.getResults = function() {
// 得到学生的成绩
}
一定不要少了Students.prototype.constructor = Students这一行！，定义一个构造函数的时候，它默认的prototype是一个Object实例，然后prototype的constructor属性自动被设置成该函数本身 ！！！若手工将prototype设置为另一个对象的时候，则新对象自然不会具有原对象的contructor值，故需要重新设置其constructor属性。如：
复制代码 代码如下:
var Test = function() {
this.time = "now";
}
console.log(Test.prototype); // Object {} 一个空对象
console.log(Test.prototype.constructor); // function() {this.time = "now";},及函数本身
// 若手工改变Test的prototype属性
Test.prototype = {
someFunc: function() {
console.log('hello world!');
}
};
console.log(Test.prototype.constructor); // function Object() { [native code] }
// 然后你会发现完全指错了，故手动更改prototype属性的时候需要更改它的constructor指向;
this.time = "now";
}
console.log(Test.prototype); // Object {} 一个空对象
console.log(Test.prototype.constructor); // function() {this.time = "now";},及函数本身
// 若手工改变Test的prototype属性
Test.prototype = {
someFunc: function() {
console.log('hello world!');
}
};
console.log(Test.prototype.constructor); // function Object() { [native code] }
// 然后你会发现完全指错了，故手动更改prototype属性的时候需要更改它的constructor指向;
经过上面的测试就知道为什么要修改constructor值了。
2.封装继承的函数extend
复制代码 代码如下:
function extend(subClass, superClass) {
var F = function() {};
F.prototype = superClass.prototype;
subClass.prototype = new F();
subClass.prototype.constructor = subClass;
}
var F = function() {};
F.prototype = superClass.prototype;
subClass.prototype = new F();
subClass.prototype.constructor = subClass;
}
其实这个函数的功能只是对上面继承过程的一个封装，不同的有：
只继承了superClass的prototype属性，并没有继承superClass构造函数中的属性;
这样做的优点在于：减少去new一个构造函数的开销！
当然随之的问题是不能单一的通过这个函数就能让subClass继承superClass的所有属性
改进：
复制代码 代码如下:
// 在Students构造函数中继续添加一行代码：
Person.call(this, name, age);
Person.call(this, name, age);
五、小结
利用js的原型链原理，我们可以很容易的实现js的继承机制，尽管不是非常的严格，但是我的目的达到了： 重复的代码尽量出现一次！
希望本文所述对大家的javascript程序设计有所帮助。
相关文章
[蓝色]一个很Cool的JS菜单效果...2006-09-09
XHTML-Strict 内允许出现的标签...2006-12-12
这篇文章主要为大家介绍了js常用的方法示例梳理总结及功能详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
获取客户端的一些信息，如IP和MAC，以结合身份验证，相信很多人都会这样做吧，我们这里用Javascript，这样做的好处是不需要服务器端进行处理，有客户端自行获取，感兴趣的你可以参考下哈2013-03-03
由于国内网站备案比较麻烦，所以笔者便把网站放到了香港。虽然网站免去了备案的困扰，但是从访问速度上来看，一般要比放于国内的网站慢2-3倍，所以便想办法对网站做了一些简单的优化，比如使用缓存系统来提升网站页面访问速度2017-04-04
之前只知道eval可以解析字符串，刚刚网上看了又了解了一点，这里贴出来，不懂的也看看哈2012-07-07
javascript写的简单的加减乘除计算器，里面涉及到一些方法还是很实用的哦，新手不要错过2011-12-12
这篇文章主要介绍了JS实现图片预加载之无序预加载功能代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-05-05
NodeJS 是一门年轻的语言，扩展模块并不太全，经常我们想用某个模块但是却找不到合适的2012-03-03
这篇文章主要介绍了微信小程序提交form操作,结合实例形式分析了微信小程序开发中使用form组件实现数据提交与数据处理相关操作技巧,需要的朋友可以参考下2018-12-12
最新评论