JavaScript使用prototype属性实现继承操作示例

本文实例讲述了JavaScript使用prototype属性实现继承操作。分享给大家供大家参考，具体如下：

JS并没有显式的继承语法,在JS中所有的对象都是Object的子类实现, 因而对象之间是平等关系.

尽管如此我们可以通过特殊的方法达到继承的效果.

当然JS也不能直接定义类, 我们通过定义函数可以得到一个同名的类 , 同时这个函数就是这个类的构造器,

在定义函数时以this修饰的变量就是定义的 类的实例中的属性,当这个属性时函数时,  就可以认为这个属性变成了一个实例方法

//定义一个Person类
function Person(name , age)
{
  this.name=name;
  this.age=age;
  //定义一个info函数
  this.info=function()
  {
    document.writeln("年龄"+this.age+"姓名"+this.name);
  }
}
//创建Person类的实例对象
var p1= new Person('xiaoming',20);
//调用p1的info方法
p1.info();
var p2= new Person('wang',22);
p2.info();

这种在类内(函数内)定义函数的方式是有弊端的:

  • 性能低下, 这种方式定义函数在每次创建对象时都会创建一个新的info函数, 有多个对象就会有多个info函数,实际上我们只需要一个info函数,  这样就会造成系统内存泄漏, 引起性能的下降
  • 使info函数中的局部变量产生闭包, 闭包会扩大局部变量的作用域,使局部变量存活到函数外

为了避免这两种情况, 通常不建议在类定义时为类定义方法,而是采用prototype属性:

JS中所有类(函数)都有一个prototype属性, 为该属性增加属性方法可以视为对类的拓展,

也就是增加了prototype属性的类继承了原有的类 , 这也就是JS所提供的伪继承机制

//定义一个Person类
function Person(name , age)
{
  this.name=name;
  this.age=age;
  //定义一个info函数
  this.info=function()
  {
    document.writeln("年龄"+this.age+"姓名"+this.name);
  }
}
//创建Person类的实例对象
var p1= new Person('xiaoming',20);
//调用p1的info方法
p1.info();

//为Person类增加walk方法
Person.prototype.walk=function()
{
  document.writeln(this.name+'正在走<br/>');
}
var p2=new Person('xiaohong',20);
//p2可以调用Person中的方法
p2.info();
//也可以调用prototype属性增加的方法
p2.walk();
//JS允许为类动态增加方法和属性,这里p1也可以调用walk
p1.walk();

上例为prototype属性增加了方法可以认为是为Person类动态地增加了方法,

这种方式增加的方法会让所有实例共享一个walk方法, 可以注意到是Person.prototype类的属性,并非实例

walk方法不在Person函数内,因此不会产生闭包,

这种为类动态地增加属性和方法可以被当作一种伪继承,

但这种伪继承并非产生 了新的子类而是修改了原有的类

别着急,prototype属性还有另一种方式实现继承:

prototype属性代表该类原型对象, 即默认是一个Object对象, 将类prototype设为父类实例可以实现继承

function Person(name,age)
{
  this.name=name;
  this.age=age;
}
Person.prototype.say=function()
{
  console.log(this.name+'说话了');
}
var per = new Person('小明',20);
per.say();
//再定义一个student类,欲意继承Person
function Student (grade)
{
  this.grade=grade;
}
//将student的prototype设为Person对象
Student.prototype =new Person('小红',22);
//为Student添加方法
Student.prototype.intro= function()
{
  console.log(this.name+'是'+this.grade+'年级学生');
}
var stu=new Student(3);
stu.name="小刚";
console.log(stu instanceof Person&& stu instanceof Student);//true
stu.say();//小刚说话了
stu.intro();//小刚是3年级学生

上例定义了Person类,增加了say()方法

又定义了Student类, 并将Student类的prototype属性设为Person对象, 表明Student原型是Person对象,

也就是Student继承了Person, 会得到其方法和属性

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

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

赞 (0)

相关推荐

  • JavaScript类的继承多种实现方法

    类的继承 1 子承父业 extends(继承父类的普通函数)(方法) class Father { constructor() { } money() { console.log(100); } } class Son extends Father { } class sunzi extends Son { } var yxf = new Father; var lbw = new Son; var bb = new sunzi; console.log(yxf.money()); consol

  • JavaScript的继承实现小结

    JavaScript的继承实现小结

    最近在忙前端的工作,因为之前做.net和php的开发比较多,前端开发喜欢把库拿来就用,几次事实证明,不懂原理,连改代码也改不好,所以还是下定决心研究下JavaScript的几个技术难点. 0x1.JavaScript的对象和构造函数 定义一个JavaScript对象可以这么定义 var a = { x : 1, y : 2, add : function () { return this.x + this.y; }, mul : function () { return this.x * thi

  • JS实现面向对象继承的5种方式分析

    本文实例讲述了JS实现面向对象继承的5种方式.分享给大家供大家参考,具体如下: js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承有以下通用的几种方式 1. 使用对象冒充实现继承(该种实现方式可以实现多继承) 实现原理:让父类的构造函数成为子类的方法,然后调用该子类的方法,通过this关键字给所有的属性和方法赋值 function Parent(firstname) { this.fname=firs

  • Javascript中类式继承和原型式继承的实现方法和区别之处

    在所有面向对象的编程中,继承是一个重要的话题.一般说来,在设计类的时候,我们希望能减少重复性的代码,并且尽量弱化对象间的耦合(让一个类继承另一个类可能会导致二者产生强耦合).关于"解耦"是程序设计中另一个重要的话题,本篇重点来看看在javascript如何实现继承. 其它的面向对象程序设计语言都是通过关键字来解决继承的问题(比如extend或inherit等方式).但是javascript中并没有定义这种实现的机制,如果一个类需要继承另一个类,这个继承过程需要程序员自己通过编码来实现.

  • JS实现继承的几种常用方式示例

    JS实现继承的几种常用方式示例

    本文实例讲述了JS实现继承的几种常用方式.分享给大家供大家参考,具体如下: 1,原型链继承 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>原型链继承</title> </head> <body> <script> /** * 优点: * 实例是父类的实例也是子类的实例

  • JS继承实现方法及优缺点详解

    前言 JS作为面向对象的弱类型语言,继承也是其非常强大的特性之一.那么如何在JS中实现继承呢?让我们拭目以待. JS继承的实现方式 既然要实现继承,那么首先我们得有一个父类,代码如下: // 定义一个动物类 function Animal (name) { // 属性 this.name = name || 'Animal'; // 实例方法 this.sleep = function(){ console.log(this.name + '正在睡觉!'); } } // 原型方法 Animal

  • JS继承与闭包及JS实现继承的三种方式

    前  言 在之前的两篇博客中,我们详细探讨了JavaScript OOP中的各种知识点(JS OOP基础与JS 中This指向详解 . 成员属性.静态属性.原型属性与JS原型链).今天我们来继续探讨剩余的内容吧. 我们都知道,面向对象的三大特征--封装.继承.多态. 封装无非就是属性和方法的私有化,所以我们JS中提供了私有属性和私有方法. 而JS中并没有多态,因此我们说JS是一门基于对象的语言,而非面向对象的语言. 那么,面向对象三大特征中,在JS中最重要的就是继承了. 一.继承的基本概念 使用

  • JavaScript原型式继承实现方法

    JavaScript原型式继承实现方法

    这篇文章主要介绍了JavaScript原型式继承实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 在2006年,有个叫道格拉斯·克罗克福德的人写了一篇文章,题目翻译为中文就是JavaScript中的原型式继承.在此文章里,他介绍了一种实现继承的方法.他的想法是借助原型可以基于已有的对象创建新对象,同时还不必因此创建自定义类型.于是,他就写下了如下的函数: function object(o){ function F(){}; F.prot

  • JavaScript使用prototype属性实现继承操作示例

    本文实例讲述了JavaScript使用prototype属性实现继承操作.分享给大家供大家参考,具体如下: JS并没有显式的继承语法,在JS中所有的对象都是Object的子类实现, 因而对象之间是平等关系. 尽管如此我们可以通过特殊的方法达到继承的效果. 当然JS也不能直接定义类, 我们通过定义函数可以得到一个同名的类 , 同时这个函数就是这个类的构造器, 在定义函数时以this修饰的变量就是定义的 类的实例中的属性,当这个属性时函数时,  就可以认为这个属性变成了一个实例方法 //定义一个Pe

  • 详解Javascript中prototype属性(推荐)

    在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不存在类(Class)的概念的,javascript中不是基于'类的',而是通过构造函数(constructor)和原型链(prototype chains)实现的.但是在ES6中提供了更接近传统语言的写法,引入了Class(类)这个概念,作为对象的模板.通过class关键字,可以定义类.基本上,ES6的class可以看作只是一个语法糖,它的绝大部分功能

  • Javascript中prototype属性实现给内置对象添加新的方法

    本文实例讲述了Javascript中prototype属性实现给内置对象添加新的方法.分享给大家供大家参考.具体实现方法如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>prototype

  • JS原型与继承操作示例

    JS原型与继承操作示例

    本文实例讲述了JS原型与继承操作.分享给大家供大家参考,具体如下: <script> var Beverage = function(){}; Beverage.prototype.boilWater = function(){ console.log("把水煮沸"); }; Beverage.prototype.brew = function(){ throw new Error("子类必须重写该方法"); }; Beverage.prototype.

  • JavaScript中的几种继承方法示例

    JavaScript中的几种继承方法示例

    1.原型链继承 原理: 子类原型指向父类实例对象实现原型共享,即Son.prototype = new Father(). 这里先简单介绍下原型 js中每个对象都有一个__proto__属性,这个属性指向的就是该对象的原型.js中每个函数都有一个prototype属性,这个属性指向该函数作为构造函数调用时创建的实例的原型.原型对象上有一个constructor属性,指向创建该对象的构造函数,该属性不可枚举. var obj = {}; obj.__proto__ === Object.proto

  • javascript使用prototype完成单继承

    1.使用prototype完成单继承. 复制代码 代码如下: //定义一个A类 function A(){ } //为A类动态调用属性color,与方法sayColor A.prototype.color = "blue"; A.prototype.sayColor = function(){ alert(this.color); }; //创建了一个B类 function B(){ } //让B继承自A B.prototype=new A(); //new出A的对象赋值给B的原型,B

  • 理解JavaScript的prototype属性

    其实,关于prototype只要几句话就可以总结: 任何原型都是对象,只有对象有原型 只有Function有prototype属性,它是这个Function作为构造器时生成对象所继承的原型.Function的原型和它的prototype属性无关 对象的原型可以通过非标准的属性 __proto__ 或ECMAScript5的方法 Object.getPrototypeOf() 访问. 1其实是错的,Object这个原型链尽头的对象它没有原型.可是为了更简单表述.在看原型链后你就会明白.toStri

  • Django框架下静态模板的继承操作示例

    本文实例讲述了Django框架下静态模板的继承操作.分享给大家供大家参考,具体如下: 前言:第一篇博客,毕业校招在即,抽空把做过的项目都整理一下. 开发环境:python3.4,django1.8 初入python和django做项目,遇到很多前端页面代码冗余的情况,特别是头部和脚部,代码都是一样的.最开始是代码一直复制粘贴,后来发现Django自带的模板继承很好用.本人新手,仅发表个人经验,确实觉得很受用.欢迎大家指导. ①. 定义一个基础模板,该框架之后由子模板继承. 命名为base.htm

  • Python对象属性自动更新操作示例

    Python对象属性自动更新操作示例

    本文实例讲述了Python对象属性自动更新操作.分享给大家供大家参考,具体如下: 在软件设计中会遇到这样的问题:有些属性之间有相互关联.这样,其中的一个属性变化的时候其他的属性也应该跟随变化. 先看一段示例代码: # -*- coding:utf-8 -*- #!python3 class DemoClss: def __init__(self,val1,val2): self.val1= val1 self.val2= val2 self.sum= self.val1 + self.val2

  • JavaScript对JSON数组简单排序操作示例

    JavaScript对JSON数组简单排序操作示例

    本文实例讲述了JavaScript对JSON数组简单排序操作.分享给大家供大家参考,具体如下: 我们经常回使用到数据格式 var arr=[{num:1},{num:3},{num:2}] 如何根据数组里面的JSON数据的某个key进行排序 javascript有一个sort()方法,直接通过 arr.sort()进行排序,默认只对数组的值进行排序,然而以上的数组的值却是个JSON格式的. 我们在看看sort方法的定义: 定义和用法 sort() 方法用于对数组的元素进行排序. 语法 array

随机推荐