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的面向对象(一)
Nov 09 Javascript
JQuery对id中含有特殊字符的转义处理示例
Sep 06 Javascript
用jquery仿做发微博功能示例
Apr 18 Javascript
node.js中Socket.IO的进阶使用技巧
Nov 04 Javascript
微信中一些常用的js方法汇总
Mar 12 Javascript
js实现的简单radio背景颜色选择器代码
Aug 18 Javascript
JavaScript中关联原型链属性特性
Feb 13 Javascript
JavaScript利用正则表达式替换字符串中的内容
Dec 12 Javascript
JavaScript获取键盘按键的键码(参照表)
Jan 10 Javascript
通过npm引用的vue组件使用详解
Mar 02 Javascript
vue 纯js监听滚动条到底部的实例讲解
Sep 03 Javascript
微信小程序HTTP接口请求封装的实现
Feb 21 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
精致的人儿就要挑杯子喝咖啡
2021/03/03 冲泡冲煮
php 模拟 asp.net webFrom 按钮提交事件的思路及代码
2013/12/02 PHP
php实现高效获取图片尺寸的方法
2014/12/12 PHP
javascript 动态调整图片尺寸实现代码
2009/12/28 Javascript
jQuery操作checkbox选择(list/table)
2013/04/07 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
JS随机打乱数组的方法小结
2016/06/22 Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
2016/10/13 Javascript
vue中各组件之间传递数据的方法示例
2017/07/27 Javascript
微信小程序实现自上而下字幕滚动
2018/07/14 Javascript
layer.open回调获取弹出层参数的实现方法
2019/09/10 Javascript
寻找网站后台地址的python脚本
2014/09/01 Python
通过代码实例展示Python中列表生成式的用法
2015/03/31 Python
python用模块zlib压缩与解压字符串和文件的方法
2016/12/16 Python
Python在for循环中更改list值的方法【推荐】
2018/08/17 Python
详解配置Django的Celery异步之路踩坑
2018/11/25 Python
Python数据报表之Excel操作模块用法分析
2019/03/11 Python
使用python serial 获取所有的串口名称的实例
2019/07/02 Python
解决paramiko执行命令超时的问题
2020/04/16 Python
CSS3实战第一波 让我们尽情的圆角吧
2010/08/27 HTML / CSS
新西兰廉价汽车租赁:Snap Rentals
2018/09/14 全球购物
俄罗斯在线服装店:STOLNIK
2021/03/07 全球购物
学生安全教育材料
2014/02/14 职场文书
幼儿园小班评语大全
2014/04/17 职场文书
投资合作协议书范本
2014/04/17 职场文书
《金孔雀轻轻跳》教学反思
2014/04/20 职场文书
创业女性典型材料
2014/05/02 职场文书
财务部绩效考核方案
2014/05/04 职场文书
迎新春趣味活动方案
2014/08/24 职场文书
师德师风自我评价范文
2014/09/11 职场文书
服务员岗位职责
2015/02/03 职场文书
学校实习推荐信
2015/03/27 职场文书
2015年秋季小学开学标语
2015/07/16 职场文书
《月球之谜》教学反思
2016/02/20 职场文书
Redis缓存-序列化对象存储乱码问题的解决
2021/06/21 Redis
SQL Server使用导出向导功能
2022/04/08 SQL Server