javascript继承机制的实现示例详解

我花了很多时间,学习这个部分,还做了很多笔记。但是都属于强行记忆,无法从根本上理解。

如何创建一个类

假设有给叫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的继承机制,尽管不是非常的严格,但是我的目的达到了: 重复的代码尽量出现一次!

时间: 2024-09-26 04:57:33

javascript继承机制的实现示例详解的相关文章

javascript继承机制实例详解_javascript技巧

本文实例讲述了javascript继承机制.分享给大家供大家参考.具体分析如下: 初学javascript一般很难理解Javascript语言的继承机制它没有"子类"和"父类"的概念,也没有"类"(class)和"实例"(instance)的区分,全靠一种很奇特的"原型链"(prototype chain)模式,来实现继承. 我花了很多时间,学习这个部分,还做了很多笔记.但是都属于强行记忆,无法从根本上理解

JavaScript中的ajax功能的概念和示例详解_javascript技巧

AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML). 个人理解:ajax就是无刷新提交,然后得到返回内容. 对应的不使用ajax时的传统网页如果需要更新内容(或用php做处理时),必须重载整个网页页面. 示例: html代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>

JavaScript作用域示例详解_javascript技巧

作用域是JavaScript最重要的概念之一,想要学好JavaScript就需要理解JavaScript作用域和作用域链的工作原理.今天这篇文章对JavaScript作用域示例详解的介绍,希望能帮助大家更好的学习JavaScript. 任何程序设计语言都有作用域的概念,简单的说,作用域就是变量与函数的可访问范围,即作用域控制着变量与函数的可见性和生命周期.在JavaScript中,变量的作用域有全局作用域和局部作用域两种. 一.JavaScript中无块级作用域 在Java或C#中存在块级作用域

JavaScript中自带的 reduce()方法使用示例详解_javascript技巧

1.方法说明 , Array的reduce()把一个函数作用在这个Array的[x1, x2, x3...]上,这个函数必须接收两个参数,reduce()把结果继续和序列的下一个元素做累积计算,其效果就是: [x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4) 2. 使用示例 'use strict'; function string2int(s){ if(!s){ alert('the params empty'); return; } if

JavaScript中的replace()方法使用详解

  这篇文章主要介绍了JavaScript中的replace()方法使用详解,是JS入门学习中的基础知识,需要的朋友可以参考下 该方法找到一个正则表达式的字符串之间的匹配,并取代了匹配的子带的新的子串. 替换字符串可以包含以下特殊替换模式: 语法 ? 1 string.replace(regexp/substr, newSubStr/function[, flags]); 下面是参数的详细信息: regexp : 一个RegExp对象.匹配被替换参数的返回#2. substr : 一个字符串,由

JavaScript中浅讲ajax图文详解_javascript技巧

1.ajax入门案例 1.1 搭建Web环境 ajax对于各位来说,应该都不陌生,正因为ajax的产生,导致前台页面和服务器之间的数据传输变得非常容易,同时还可以实现页面的局部刷新.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 对于JavaWeb项目而言,ajax主要用于浏览器和服务器之间数据的传输. 如果是单单地堆砌知识点,会显得比较无聊,那么根据惯例,我先不继续介绍ajax,而是来写一个案例吧. 打开

javascript类型系统_正则表达式RegExp类型详解_javascript技巧

前面的话 前面已经介绍过javascript中正则表达式的基础语法.javascript的RegExp类表示正则表达式,String和RegExp都定义了方法,使用正则表达式可以进行强大的模式匹配和文本检索与替换.本文将介绍正则表达式的RegExp对象,以及正则表达式涉及 到的属性和方法 对象 javascript中的正则表达式用RegExp对象表示,有两种写法:一种是字面量写法:另一种是构造函数写法 Perl写法 正则表达式字面量写法,又叫Perl写法,因为javascript的正则表达式特性

JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解_javascript技巧

闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现.很早就接触过闭包这个概念了,但是一直糊里糊涂的,没有能够弄明白JavaScript的闭包到底是什么,有什么用,今天在网上看到了一篇讲JavaScript闭包的文章(原文链接),讲得非常好,这下算是彻底明白了JavaScript的闭包到底是个神马东东以及闭包的用途了,在此写出来和大家分享一下,希望不理解JavaScript闭包的朋友们看了之后能够理解闭包!以下内容大部分是来自原文,我在原文的基础

JavaScript“尽快失败”的原则实例详解_javascript技巧

我第一次听说编码原则中有"尽快失败"这一条时,觉得很奇怪,为什么代码要失败?应该成功才对呀.但事实上,当代码在遇到错误的时候应该尽快的终止.为了检测各种状态,我们需要频繁的创建if语句与条件分支,而这些条件检测的结果不是成功就是失败(true&&false).之所以会有这么多的条件检测语句,是因为如果不在构建过程中植入这些监测点(checkpoint),那么浏览器内核会执行很多无用的代码,并占用许多宝贵的CPU性能和处理时间,拖慢网站加载速度. 根据那些判断结果为fal