`
lvwenwen
  • 浏览: 953753 次
  • 性别: Icon_minigender_1
  • 来自: 魔都
社区版块
存档分类
最新评论

js自己定义类

阅读更多
JavaScript本身并不是设计成面向对象的,所以没有class之类的关键字用来定义类,但JavaScript本身相当灵活,可以利用function关键字来定义类并创建对象。JavaScript定义类是有多种方式的,这里只详细介绍最常用的一种。
一、定义类并创建实例
     function MyClass() {
        this.id = 5;
        this.name = 'myclass...';
     }
这样,我们就定义了一个MyClass类,里面有两个公共属性 id 和 name。其中this关键字表示当前对象,类似于C#等强类型语言。
注意:列出属性的同时必须对属性进行赋初值,这样JS才会将其解释为对象的属性。
接下来我们可以这样定义类的实例(其中 new 不可省略):
var my = new MyClass();
并以下列形式访问类属性:
my.id
二、定义公有属性和私有字段
在function中,用var定义的变量为私有变量,可以理解为类的私有字段。
用this定义的变量为公有属性。
     function MyClass() {
        this.id = 5;
        var name = 'myclass...';
     }

     my = new MyClass();
     alert(my.id);
     alert(my.name);
     //结果
     // 5
     // undefined
三、定义公有方法和私有方法
同样的,用var定义的方法为私有方法,用this定义的方法为公有方法。
     function myClass() {
        this.id = 5;
        this.alert = function(msg) {
           window.alert(msg);
        }
     }

     my = new myClass();
     my.alert('the function alert is called...');
     //结果
     // the function alert is called...
如果将上述代码的 this.alert = function(msg) 改成var alert = function(msg),那么就不能用my.alert来调用这个方法了。私有方法只能供类内部的其他方法调用。
定义公有方法(实例方法)还有另一种形式,就是利用 prototype 属性,
其实prototype 属性还可以用来扩展内置类的实例方法的,比如去掉字符串两边空格的 trim 方法:String.prototype.trim = function() { return ... }
     function myClass() {
         this.id = 5;
     }
     myClass.prototype.alert = function(msg) {
         window.alert(msg);
     }
     var my = new myClass();
     my.alert('the function alert is called...');
将和上面显示同样的结果。
四、构造函数
新建对象(my = new myClass();)和调用函数(myClass())是相似的,所以我们自然想到为函数添加一些参数,在调用此函数时输入一些参数。新建对象也是一样的。看下面的示例:
     function myClass(id, name) {
        this.id = id;
        this.name = name;
     }

     var my = new myClass(5, 'test name ...');
     alert(my.id);
     alert(my.name);
     //结果
     // 5
     // test name ...
这样定义的构造函数有个局限性,实例化对象的时候如果没有传参数,或少传参数,那么没有实参的参数值将会是undefined,比如将上面代码的对象实例化改为:var my = new myClass(5);
输出结果将会变成:
     // 5
     // undefined
为了让属性具有默认值,比如 int 默认是 0 ,可以采用以下方法,虽然比较麻烦。
     function myClass(id, name) {
        this.id = 0;    //整型默认为0
        this.name = ''; //字符串默认为空字符串
        if (id != null) { //当 id=undefined 时 id==null 依然为true
           this.id = id;
        }
        if (name != null) {
           this.name = name;
        }
     }

     var my = new myClass();
     alert(my.id);
     alert(my.name);
     //结果
     // 0
     // (空字符串)
这样的情况下,延伸出另一个问题,就是你无法在构造函数中初始化 id 为 null 。
总之,一切看个人需要,灵活应用便是。
五、静态属性和静态方法
静态的属性和方法是在定义了类之后定义的。如下例:
     function myClass() {
        this.id = 5;
     }
     myClass.count = 0; //静态属性
     myClass.staticFun = function() { //静态方法
        alert(++myClass.count);
     }
     var my = new myClass();
     alert(my.id); //用实例访问实例属性
     alert(myClass.count); //用类名访问静态属性
     myClass.staticFun();  //用类名访问静态方法
     //结果
     // 5
     // 0
     // 1
六、类的继承
在JS中实现类的继承,实际上是用到了类的另一种创建方式,先创建基类的一个对象,再为这个对象添加新的属性和方法,然后再返回这个对象。
在这里先不讨论这种创建对象的方法。
        function baseClass() {
            this.id = 5;
        }
        function myClass() {
            var my = new baseClass();
            my.name = 'className';
            my.testFun = function() {
                alert(my.name); //this.name 也可以
            }
            return my;
        }
        var my = new myClass();
        alert(my.id);
        alert(my.name);
        my.testFun();
        // 结果
        // 5
        // className
        // className
复制代码
分享到:
评论

相关推荐

    JS定义类或对象

    ### JS定义类或对象 #### 一、JavaScript与对象概念 JavaScript是一种基于对象的脚本语言,这意味着在JavaScript中,对象扮演着非常重要的角色。在实际项目开发中,开发者经常通过`function fnname{…}`的方式直接...

    JS定义静态类

    ### JS定义静态类 在JavaScript中,静态类的概念与传统面向对象编程语言中的类有所区别。JavaScript本身是一种基于原型的动态语言,直到ES6(ECMAScript 2015)引入了类语法,才使得类的概念更加清晰。不过,这里的...

    js定义类 对象 构造函数,类的继承

    通过分析这个文件,我们可以看到实际应用中的类定义和继承实践,包括如何定义类,如何使用构造函数初始化对象,以及如何通过`extends`关键字实现类的继承和覆盖或扩展父类的方法。 总结一下,JavaScript的类、对象...

    JavaScript定义类的几种方式总结

    JavaScript定义类的几种方式包括工厂方式、构造函数和原型方式,每种方法都有其特点和适用场景,接下来我们将详细探讨。 工厂方式是最早期的面向对象编程在JavaScript中的实践之一。使用工厂方式定义类,本质上就是...

    requirejs实现的简单的类定义

    总结起来,RequireJS为我们提供了一种优雅的方式来组织和加载JavaScript代码,而结合类的定义和继承,我们可以构建复杂的面向对象应用程序。在实际项目中,我们还可以利用RequireJS的优化工具进行代码压缩和合并,...

    Javascirpt定义类详细介绍

    - **静态方法**:使用`static`关键字可以定义类的静态方法,这些方法不依赖于类的实例,而是直接在类本身上调用。 ```javascript class Person { static getClassName() { return this.name; } } console.log...

    Javascript定义类(class)的三种方法详解

    本文将详细解释三种在JavaScript中定义类的方法:构造函数法、Object.create()法以及极简主义法。 1. 构造函数法 构造函数法是最常见的模拟类的方式,通过使用函数作为类的模板。构造函数通常以大写字母开头,表示...

    JavaScript定义类和对象的方法

    在JavaScript中定义类和对象的方法大致可以分为两类,一种是使用函数方式定义,另一种是先实例化Object类的方式定义。下面详细介绍这两种方法的实现和使用。 首先,函数方式定义类是最直观和常用的方法,它基于函数...

    javascript开发的web流程定义工具

    工作流程定义通常涉及到复杂的逻辑和数据结构,JavaScript库如D3.js、Fabric.js或Snap.svg可以用来绘制和操作图形元素。这些库提供了丰富的API,帮助开发者创建自定义的图形界面,包括线条、形状、文本等,使用户...

    javascript中定义类的方法汇总

    在JavaScript中,定义类是构建面向对象程序的基本方式之一。本文主要汇总了在JavaScript中定义类的多种方法,并对每种方法进行了详细讲解和代码示例。 首先,我们介绍了工厂方式。工厂方式是最简单的创建对象的方法...

    js定义类的方法示例【ES5与ES6】

    JavaScript中定义类的方法主要分为ES5和ES6两个版本。ES5版本通常通过构造函数和原型的结合使用来模拟类的行为,而ES6则引入了class关键字来更直观和简洁地定义类。 在ES5中,定义一个类通常需要创建一个构造函数,...

    javascript 原生态js类继承实现的方式

    类定义了一类事物公共的行为和方法;而实例则是类的一个具体实现。 我们还知道,面向对象编程有三个重要的概念 - 封装、继承和多态。 但是在JavaScript的世界中,所有的这一切特性似乎都不存在。 因为JavaScript...

    JS编写学生类

    用JS编写学生类里面有方法。大家互相参考

    javascript 类定义的4种方法

    以下是四种常用的 JavaScript 类定义方法: 1. **工厂函数方式**: 工厂函数是一种创建对象的方法,它通过函数返回一个具有特定属性和方法的对象。在提供的示例中,`createCar` 就是一个工厂函数,它接收参数,...

    javascript中的类理解

    在 JavaScript 中,类的定义使用 `class` 关键字。然而,由于 JavaScript 的历史,早期的类是通过函数来模拟的。例如: ```javascript function WuYouUser() { this.Name; } ``` 在上面的例子中,`WuYouUser`...

    Javascript面向对象扩展库(lang.js)

    在JavaScript中,类的定义通常是通过构造函数和原型链来实现的,而`lang.js`提供了一种更加简洁和规范的方式来定义类。例如,我们可以使用`lang.Class`来创建一个新类,它支持类的继承、封装和多态等特性,使得代码...

    JS 拖拽布局+定义风格+定义模块+定义分列超酷

    这通常涉及到JavaScript对象的创建和管理,每个模块都有自己的行为和样式。通过定义模块,你可以构建出复杂但有序的布局,例如,一个模块可能是一个侧边栏,另一个可能是一个主要内容区域,用户可以自由调整它们的...

Global site tag (gtag.js) - Google Analytics