javascript继承机制实例详解


Posted in Javascript onNovember 20, 2014

本文实例讲述了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;

}

如上: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"

就上面的getName()方法来说,是如何执行的?首先会在Person这个函数里面找是否有getName()这个方法,发现没有;然后就转到 Person.prototype中寻找,发现有!然后就调用,若没有呢?继续按照相同的方法一直沿着prototype寻找下去,直到找到方法或者 达到原型链的顶端为止!

举例来说,现在有一个叫做DOG的构造函数,表示狗对象的原型。

function DOG(name){


this.name = name;

}

对这个构造函数使用new,就会生成一个狗对象的实例。
var dogA = new DOG('大毛');

alert(dogA.name); // 大毛

注意构造函数中的this关键字,它就代表了新创建的实例对象。

三、new运算符的缺点

用构造函数生成实例对象,有一个缺点,那就是无法共享属性和方法。
比如,在DOG对象的构造函数中,设置一个实例对象的共有属性species。

function DOG(name){


this.name = name;


this.species = '犬科';

}

然后,生成两个实例对象:
var dogA = new DOG('大毛');

var dogB = new DOG('二毛');

这两个对象的species属性是独立的,修改其中一个,不会影响到另一个。
dogA.species = '猫科';

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() {

    // 得到学生的成绩

}

一定不要少了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指向;

经过上面的测试就知道为什么要修改constructor值了。

2.封装继承的函数extend

function extend(subClass, superClass) {

    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);

五、小结

利用js的原型链原理,我们可以很容易的实现js的继承机制,尽管不是非常的严格,但是我的目的达到了: 重复的代码尽量出现一次!

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

Javascript 相关文章推荐
jquery $.ajax入门应用二
Nov 19 Javascript
jquery获取当前日期的方法
Jan 14 Javascript
jQuery表格行上移下移和置顶的实现方法
Oct 08 Javascript
js实现跨域的多种方法
Dec 25 Javascript
最全面的百度地图JavaScript离线版开发
Sep 10 Javascript
浅谈layer的iframe弹窗给里面的标签赋值的问题
Nov 10 Javascript
JavaScript常用正则函数用法示例
Jan 23 Javascript
ES6学习之变量的解构赋值
Feb 12 Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
Apr 20 Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
Sep 11 Javascript
详解swiper在vue中的应用(以3.0为例)
Sep 20 Javascript
JS 数组基本用法入门示例解析
Jan 16 Javascript
jQuery验证插件 Validate详解
Nov 20 #Javascript
PHP中使用微秒计算脚本执行时间例子
Nov 19 #Javascript
jQuery中$.get、$.post、$.getJSON和$.ajax的用法详解
Nov 19 #Javascript
实现图片预加载的三大方法及优缺点分析
Nov 19 #Javascript
jQuery Ajax()方法使用指南
Nov 19 #Javascript
javascript匿名函数实例分析
Nov 18 #Javascript
Linux下使用jq友好的打印JSON技巧分享
Nov 18 #Javascript
You might like
PHP 远程关机实现代码
2009/11/10 PHP
php中强制下载文件的代码(解决了IE下中文文件名乱码问题)
2011/05/09 PHP
PHP文件读写操作相关函数总结
2014/11/18 PHP
使用Composer安装Yii框架的方法
2016/03/15 PHP
PHP编程之设置apache虚拟目录
2016/07/08 PHP
Laravel中的Blade模板引擎示例详解
2017/10/10 PHP
PHP连接及操作PostgreSQL数据库的方法详解
2019/01/30 PHP
JS中cookie的使用及缺点讲解
2017/05/13 Javascript
Vue.js中extend选项和delimiters选项的比较
2017/07/17 Javascript
使用Vue如何写一个双向数据绑定(面试常见)
2018/04/20 Javascript
浅谈开发eslint规则
2018/10/01 Javascript
详解ES6中的 Set Map 数据结构学习总结
2018/11/06 Javascript
学习RxJS之JavaScript框架Cycle.js
2019/06/17 Javascript
Vue.use()在new Vue() 之前使用的原因浅析
2019/08/26 Javascript
Vue解决移动端弹窗滚动穿透问题
2020/12/15 Vue.js
python中的set实现不重复的排序原理
2018/01/24 Python
python实现批量按比例缩放图片效果
2018/03/30 Python
tensorflow实现加载mnist数据集
2018/09/08 Python
Python学习笔记之函数的参数和返回值的使用
2019/11/20 Python
python实现UDP协议下的文件传输
2020/03/20 Python
Pycharm连接远程服务器过程图解
2020/04/30 Python
Python 测试框架unittest和pytest的优劣
2020/09/26 Python
Python字典取键、值对的方法步骤
2020/09/30 Python
Django视图类型总结
2021/02/17 Python
小程序瀑布流解决左右两边高度差距过大的问题
2019/02/20 HTML / CSS
HTML5语义化元素你真的用对了吗
2019/08/22 HTML / CSS
高中数学教学反思
2014/01/30 职场文书
婚礼主持词
2014/03/13 职场文书
党员查摆剖析材料
2014/10/10 职场文书
2015年药店店长工作总结
2015/04/29 职场文书
《作风建设永远在路上》心得体会
2016/01/21 职场文书
合作意向书怎么写
2019/06/24 职场文书
超级详细实用的pycharm常用快捷键
2021/05/12 Python
mysql升级到5.7时,wordpress导数据报错1067的问题
2021/05/27 MySQL
Python Pandas模块实现数据的统计分析的方法
2021/06/24 Python
Redis Stream类型的使用详解
2021/11/11 Redis