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 相关文章推荐
JavaScript Event学习第七章 事件属性
Feb 07 Javascript
JQuery select控件的相关操作实现代码
Sep 14 Javascript
JS打开层/关闭层/移动层动画效果的实例代码
May 11 Javascript
js中传递特殊字符(+,&)的方法
Jan 16 Javascript
sogou地图API用法实例教程
Sep 11 Javascript
jQuery弹出层插件Lightbox_me使用指南
Apr 21 Javascript
使用jQuery5分钟快速搞定双色表格的简单实例
Aug 08 Javascript
javascript使用 concat 方法对数组进行合并的方法
Sep 08 Javascript
打造自己的jQuery插件入门教程
Sep 23 Javascript
浅谈jQuery绑定事件会叠加的解决方法和心得总结
Oct 26 Javascript
微信小程序 弹框和模态框实现代码
Mar 10 Javascript
vue3+typeScript穿梭框的实现示例
Dec 29 Vue.js
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
Get或Post提交值的非法数据处理
2006/10/09 PHP
PHP 事务处理数据实现代码
2010/05/13 PHP
smarty简单应用实例
2015/11/03 PHP
php并发加锁示例
2016/10/17 PHP
Javascript & DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例
2007/06/02 Javascript
JS类的封装及实现代码
2009/12/02 Javascript
jQuery阻止冒泡和HTML默认操作
2010/11/17 Javascript
dojo学习第二天 ajax异步请求之绑定列表
2011/08/29 Javascript
JavaScript实现将xml转换成html table表格的方法
2015/04/17 Javascript
在JavaScript中操作数组之map()方法的使用
2015/06/09 Javascript
js鼠标点击图片切换效果实现代码
2015/11/19 Javascript
快速掌握WordPress中加载JavaScript脚本的方法
2015/12/17 Javascript
jquery判断checkbox是否选中及改变checkbox状态的实现方法
2016/05/26 Javascript
jQuery 实现图片的依次加载图片功能
2017/07/06 jQuery
javascript ES6 新增了let命令使用介绍
2017/07/07 Javascript
JavaScript中一些特殊的字符运算
2017/08/17 Javascript
基于jquery.page.js实现分页效果
2018/01/01 jQuery
vue实现下拉菜单树
2020/10/22 Javascript
[02:59]2014DOTA2西雅图国际邀请赛 圆满落幕中国夺冠
2014/07/23 DOTA
Python  __getattr__与__setattr__使用方法
2008/09/06 Python
使用Python向C语言的链接库传递数组、结构体、指针类型的数据
2019/01/29 Python
python实现获取单向链表倒数第k个结点的值示例
2019/10/24 Python
Python socket模块方法实现详解
2019/11/05 Python
Python SQLAlchemy入门教程(基本用法)
2019/11/11 Python
HTML5适合的情人节礼物有纪念日期功能
2021/01/25 HTML / CSS
最新的小工具和卓越的产品设计:Oh That Tech!
2019/08/07 全球购物
荷兰在线啤酒店:Beerwulf
2019/08/26 全球购物
某公司C#程序员面试题笔试题
2014/05/26 面试题
见习期自我鉴定范文
2014/03/19 职场文书
爱我中华演讲稿
2014/05/20 职场文书
三分钟自我介绍演讲稿
2014/08/21 职场文书
2015年教师党员公开承诺书
2015/01/22 职场文书
2015年青年志愿者协会工作总结
2015/04/27 职场文书
详解PHP设计模式之依赖注入模式
2021/05/25 PHP
Win11开始菜单添加休眠选项
2022/04/19 数码科技
Win10鼠标宏怎么设置?win10系统鼠标宏的设置方法
2022/08/14 数码科技