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也能包含文件
Oct 26 Javascript
JavaScript脚本性能的优化方法
Feb 02 Javascript
用最通俗易懂的代码帮助新手理解javascript闭包 推荐
Mar 01 Javascript
验证码在IE中不刷新而谷歌等浏览器正常的解决方案
Mar 18 Javascript
javascript实现鼠标拖动改变层大小的方法
Apr 30 Javascript
javascript中基本类型和引用类型的区别分析
May 12 Javascript
AngularJS入门教程之Scope(作用域)
Jul 27 Javascript
使用mint-ui开发项目的一些心得(分享)
Sep 07 Javascript
vue生成token并保存到本地存储中
Jul 17 Javascript
Vue+axios实现统一接口管理的方法
Jul 23 Javascript
JavaScript之解构赋值的理解
Jan 30 Javascript
微信小程序访问豆瓣电影api的实现方法
Mar 31 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 file_get_contents 函数超时的几种解决方法
2009/07/30 PHP
php SQL Injection with MySQL
2011/02/27 PHP
php生成图片验证码-附五种验证码
2015/08/19 PHP
PHP面向对象中new self()与 new static()的区别浅析
2017/08/17 PHP
ThinkPHP5.1框架页面跳转及修改跳转页面模版示例
2019/05/06 PHP
js跟随滚动条滚动浮动代码
2009/12/31 Javascript
jQuery EasyUI 中文API Button使用实例
2010/04/14 Javascript
JavaSacript中charCodeAt()方法的使用详解
2015/06/05 Javascript
深入浅析Extjs中store分组功能的使用方法
2016/04/20 Javascript
json对象与数组以及转换成js对象的简单实现方法
2016/06/24 Javascript
jQuery的Read()方法代替原生JS详解
2016/11/08 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
2016/12/06 Javascript
使用原生js写ajax实例(推荐)
2017/05/31 Javascript
jquery加载单文件vue组件的方法
2017/06/20 jQuery
微信小程序 获取二维码实例详解
2017/06/23 Javascript
Bootstrap Table 搜索框和查询功能
2017/11/30 Javascript
Angular实现的内置过滤器orderBy排序与模糊查询功能示例
2017/12/29 Javascript
详解微信小程序input标签正则初体验
2018/08/18 Javascript
深入理解Antd-Select组件的用法
2020/02/25 Javascript
使用konva和vue-konva库实现拖拽滑块验证功能
2020/04/27 Javascript
element-ui 弹窗组件封装的步骤
2021/01/22 Javascript
python使用xlrd模块读写Excel文件的方法
2015/05/06 Python
python游戏开发之视频转彩色字符动画
2019/04/26 Python
如何使用Python实现斐波那契数列
2019/07/02 Python
python函数修饰符@的使用方法解析
2019/09/02 Python
让Django的BooleanField支持字符串形式的输入方式
2020/05/20 Python
python如何查看安装了的模块
2020/06/23 Python
PyQt5的相对布局管理的实现
2020/08/07 Python
纯CSS3单页切换导航菜单界面设计的简单实现
2016/08/16 HTML / CSS
垃圾回收的优点和原理
2014/05/16 面试题
高校生生产实习自我鉴定
2013/09/21 职场文书
个人承诺书怎么写
2014/05/24 职场文书
2014年安全生产目标责任书
2014/07/23 职场文书
公安局副政委班子个人对照检查材料
2014/10/04 职场文书
干部个人考察材料
2014/12/24 职场文书
万能检讨书
2015/01/27 职场文书