JavaScript中的类

时间:2022-09-01 12:43:39

                           JavaScript类的相关知识

1.例子

/* 例1 */

// 定义一个构造函数
function Range(from, to){
this.from = from;
this.to = to;
}
// 所有Range类的实例化对象都会继承构造函数Range的prototype属性
Range.prototype = {
  toString: function(){
    return this.from + '....' + this.to;
  },
  includes: function(x){
    return x >= this.from && x <= this.to;
  }
}; // 实例化一个对象
var r = new Range(1, 3);
// 因为r继承了Range.prototype, 所以可以直接调用里面的方法
r.toString()

2.constructor属性

JavaScript中的类

/* 例2 */

// 由上图可知
var F = function(){}; // F表示一个函数对象
var P = F.prototype; // P表示函数的原型对象
var C = P.constructor; // C表示原型对象下面的constructor属性
// 则有
C === F; var O = new F(); // 创建类F的实例化对象
o.constructor === F; /*
  也就是说 F.prototype.constructor 就等于构造函数本身
  而 F 实例化出来的对象 O 继承了 F.prototype 所以就
  有 o.constructor === F
*/
// 在例1中,因为重写了Range预定义的原型对象,所以Range.prototype中便不存在constructor属性了,解决这一问题的方法有两种
// 法一:显示的给原型添加一个构造函数
Range.prototype = {
  constructor: Range, // 显示的设置构造函数的反向引用
  toString: function(){
    return this.from + '....' + this.to;
  },
  includes: function(x){
    return x >= this.from && x <= this.to;
  }
};
// 法二:使用预定义的原型对象,因为预定义的原型对象中已经包含了constructor属性了
Range.prototype.toString = function(){
  return this.from + '....' + this.to;
};
Range.prototype.includes = function(x){
  return x >= this.from && x <= this.to;
};

由例1和例2可以总结出javascript中定义类的步骤:

  第一步:先定义一个构造函数,并设置初始化新对象的实例属性

  第二步:给构造函数的prototype对象定义实例方法

  第三步:给构造函数定义类字段和类属性

3.继承

/* 例3 */
function Parent(name, age){
  this.name = name;
  this.age = age;
};
Parent.prototype.say = function(){
  console.log(this.name, this.age);
}; // 继承Parent类
function Child(name, age, sex){
  Parent.call(this, name, age);
  this.sex = sex;
};
// Child继承了来自父类Parent的方法,可以继续在自己的原型上扩展方法
Child.prototye.ask = function(){
  console.log(this.name + '-----' + this.age + '-----' + this.sex);
}; // child类为继承了Parent类属性及方法的类
var c = new Child('javascript', 18, 'male');
c.say();
c.ask();

4.新语法定义类以及及继承类

/* 例4 */

// 定义一个Parent类
class Parent{
constructor(name, age){    // 相当于Parent.prototype.constructor
    this.name = name;
    this.age = age;
}
  say (){              // 相当于Parent.prototype.say = function(){}
    console.log(this.name, this.age);
  }
}; // 定义一个Child类继承Parent类
class Child extends Parent{
  constructor(name, age, sex){
    super(name, age);
    this.sex = sex;
  }
  ask (){
    super.say();  // 通过super关键字调用父类中的方法
  }
};

JavaScript中的类的更多相关文章

  1. JavaScript中创建类,赋值给ajax中的data参数

    缘由:因为要给根据是否选中checkbox来动态增加ajax中data的属性(ajax的data属性格式的几种方法,参考http://www.jb51.net/article/46676.htm) d ...

  2. Javascript中的类实现

    Javascript本身并不支持面向对象,它没有访问控制符,它没有定义类的关键字class,它没有支持继承的extend或冒号,它也没有用来支持虚函数的virtual,不过,Javascript是一门 ...

  3. JavaScript中定义类的方式详解

    本文实例讲述了JavaScript中定义类的方式.分享给大家供大家参考,具体如下: Javascript本身并不支持面向对象,它没有访问控制符,它没有定义类的关键字class,它没有支持继承的exte ...

  4. 一、javascript中的类

    1.找出对象的构造器----constructor/instanceof constructor是用模版实例化对象的时候附带的一个额外属性,这个属性指向创建该对象时所使用的javascript构造函数 ...

  5. JavaScript中的类继承

    JavaScript是一个无class的面向对象语言,它使用原型继承而非类继承.这会让那些使用传统面向对象语言如C++和Java的程序员们感到困惑.正如我们所看到的,JavaScript的原型继承比类 ...

  6. JavaScript中的类数组对象

    在javascript中,对象与数组都是这门语言的原生规范中的基本数据类型,处于并列的位置. 一般来说,如果我们有一个对象obj和一个数组a: obj["attr1"];    / ...

  7. 深入理解JavaScript中的类继承

    由于写本文时全部是在编辑器中边写代码边写感想的,所以,全部思想都写在代码注释里面了 // 类继承 //todo.1 extends 关键字 class Animal { constructor(nam ...

  8. JavaScript中的类式继承和原型式继承

    最近在看<JavaScript设计模式>这本书,虽然内容比较晦涩,但是细品才发现此书内容的强大.刚看完第四章--继承,来做下笔记. 书中介绍了三种继承方式,类式继承.原型式继承和掺元类继承 ...

  9. JavaScript中的类&lpar;class&rpar;、构造函数&lpar;constructor&rpar;、原型&lpar;prototype&rpar;

    类 Class 类的概念应该是面向对象语言的一个特色,但是JavaScript并不像Java,C++等高级语言那样拥有正式的类,而是多数通过构造器以及原型方式来仿造实现.在讨论构造器和原型方法前,我可 ...

随机推荐

  1. 执行最慢的SQL语句

    ---执行最慢的SQL语句SELECT top 20(total_elapsed_time / execution_count)/1000 N'平均时间ms',total_elapsed_time/1 ...

  2. PHP mcrypt加密扩展使用总结

    在开发中,很多时候我们在前后端交互中需要对一些敏感数据进行一定的加密.PHP中有提供了mcrypt的这样一个加密扩展实现对数据的加密解密. 一.mcrypt扩展的安装 在低版本的PHP中需要在配置文件 ...

  3. BZOJ-1206 虚拟内存 Hash&plus;离散化&plus;Priority&lowbar;Queue

    闻说HNOI每年都有一道Hash. 1206: [HNOI2005]虚拟内存 Time Limit: 50 Sec Memory Limit: 162 MB Submit: 330 Solved: 2 ...

  4. (转)SQL server 容易让人误解的问题之 聚集表的物理顺序问题

    对于MS SQL server 数据库,有几个容易让人产生误解的问题,对于这几个问题,即使很多 SQL server DBA 都有错误认识或者认识不充分,所以我想撰文几篇,把这些容易理解错误的问题前前 ...

  5. 第十篇 PO核心功能及流程详解

    详见链接:http://bbs.erp100.com/thread-272866-1-1.html1. P2P lifecycleP2P是procure to pay的缩写,p2p循环值得就是采购到付 ...

  6. 使用addClass&lpar;&rpar;设置自增类名

    今天在翻阅JQuery API的时候发现,addClass()方法不仅可以添加类,同时可以调用回调函数. 代码如下: <body> <p>item1</p> &lt ...

  7. 手机端轻应用模拟原生的下拉刷新效果(JavaScript)

    方案一:使用iscoll等有下拉功能的框架. 分析:因为项目的结构已经基本完成,再使用框架,会与原来的结构互相影响: 方案二:用JavaScript.Jquery写. 分析:可能没有直接使用框架的效果 ...

  8. Children’s Queue HDU 1297 递推&plus;大数

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1297 题目大意: 有n个同学, 站成一排, 要求 女生最少是两个站在一起, 问有多少种排列方式. 题 ...

  9. Pawn Brotherhood

    Pawn Brotherhood 1 alpha_table = "abcdefgh" 2 3 def safe_pawns(pawns): 4 safe_count = 0 5 ...

  10. ADO&period;Net操作数据库的方式

    1.使用数据提供程序执行sql或者ddl语句操作数据库. 2.使用oledb操作数据库 3.使用odbc操作数据库 4.使用DataSet操作数据库 前面3种方式都无法避免要使用sql语句,对不同种类 ...