Js 类定义举例

最新推荐文章于 2024-04-18 17:46:03 发布
最新推荐文章于 2024-04-18 17:46:03 发布
阅读量340 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MAOZEXIJR/article/details/83141575
版权

 1、工厂模式

（1）工厂模式1

    // 类定义
    function Tom() {
        var tom = new Object;
        tom.name = "";
        tom.age = 0;
        tom.hand = new Array("left", "right");

        tom.rename = function (name) {
            tom.name = name;
        };

        tom.showInfo = function () {
            alert("name=" + this.name + ",age=" + this.age);
        };

        return tom;
    }
    
    // 使用
    $(function () {
        var tom = Tom();

    });

 

（2）工厂模式2

    // 类定义
    function Cat(name, age) {
        var cat = new Object;
        cat.name = name;
        cat.age = age;
        cat.hand = new Array("left", "right");

        cat.rename = function (name) {
            cat.name = name;
        };

        cat.showInfo = function () {
            alert("name=" + this.name + ",age=" + this.age);
        };

        return cat;
    }

    // 使用
    $(function () {
        var cat = Cat("Tom", 1);

    });

 

2、构造函数式

    // 类定义
    function Dog(name, age) {
        this.name = name;
        this.age = age;
        this.hand = new Array("left", "right");

        this.rename = function (name) {
            this.name = name;
        };

        this.showInfo = function () {
            alert("name=" + this.name + ",age=" + this.age);
        };
    }

    // 使用
    $(function () {
        var dog = new Dog("Wu", 2);

    });

 

3、原型模式

（1）原型模式1

    // 类定义
    function Pig() {

    }

    Pig.prototype.name = "";
    Pig.prototype.age = 0;
    Pig.prototype.hand = new Array("left", "right");
    Pig.prototype.rename = function (name) {
        this.name = name;
    };
    Pig.prototype.showInfo = function () {
        alert("name=" + this.name + ",age=" + this.age);
    };
    
    // 使用
    $(function () {
        var pig = new Pig();

    });

（2）原型模式2

    // 类定义
    function Tiger(name, age) {
        this.name = name;
        this.age = age;
        this.hand = new Array("left", "right");
    }

    Tiger.prototype.rename = function (name) {
        this.name = name;
    };
    Tiger.prototype.showInfo = function () {
        alert("name=" + this.name + ",age=" + this.age);
    };

    // 使用
    $(function () {
        var tiger = new Tiger("JJ", 3);

    });

 

4、动态原型模式

    // 类定义
    function Duck(name, age) {
        this.name = name;
        this.age = age;
        this.hand = new Array("left", "right");
        if ("undefined" == typeof(Duck.inited)) {
            Duck.prototype.rename = function (name) {
                this.name = name;
            };
            Duck.prototype.showInfo = function () {
                alert("name=" + this.name + ",age=" + this.age);
            };
            Duck.inited = true;
        }
    }

    // 使用
    $(function () {
        var duck = new Duck("Tang", 4);

    });

 

5、混合模式

    // 类定义
    function Fish() {
        var fish = new Object();
        fish.name = "";
        fish.age = 0;
        fish.hand = new Array("left", "right");

        fish.rename = function (name) {
            this.name = name;
        };

        fish.showInfo = function () {
            alert("name=" + this.name + ",age=" + this.age);
        };

        return fish;
    }
    
    // 使用
    $(function () {
        var fish = new Fish();

    });

 

6、测试用例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CLASS</title>

    <script type="text/javascript" src="jquery.js"></script>
</head>
<body>

</body>
<script>
    $(function () {
        var tom = Tom();
        var cat = Cat("Tom", 1);
        var dog = new Dog("Wu", 2);
        var pig = new Pig();
        var tiger = new Tiger("JJ", 3);
        var duck = new Duck("Tang", 4);
        var fish = new Fish();


    });

    // 工厂模式 1
    function Tom() {
        var tom = new Object;
        tom.name = "";
        tom.age = 0;
        tom.hand = new Array("left", "right");

        tom.rename = function (name) {
            tom.name = name;
        };

        tom.showInfo = function () {
            alert("name=" + this.name + ",age=" + this.age);
        };

        return tom;
    }

    // 工厂模式 2
    function Cat(name, age) {
        var cat = new Object;
        cat.name = name;
        cat.age = age;
        cat.hand = new Array("left", "right");

        cat.rename = function (name) {
            cat.name = name;
        };

        cat.showInfo = function () {
            alert("name=" + this.name + ",age=" + this.age);
        };

        return cat;
    }

    // 构造函数方式
    function Dog(name, age) {
        this.name = name;
        this.age = age;
        this.hand = new Array("left", "right");

        this.rename = function (name) {
            this.name = name;
        };

        this.showInfo = function () {
            alert("name=" + this.name + ",age=" + this.age);
        };
    }

    // 原型模式 1
    function Pig() {

    }

    Pig.prototype.name = "";
    Pig.prototype.age = 0;
    Pig.prototype.hand = new Array("left", "right");
    Pig.prototype.rename = function (name) {
        this.name = name;
    };
    Pig.prototype.showInfo = function () {
        alert("name=" + this.name + ",age=" + this.age);
    };

    // 原型模式 2
    function Tiger(name, age) {
        this.name = name;
        this.age = age;
        this.hand = new Array("left", "right");
    }

    Tiger.prototype.rename = function (name) {
        this.name = name;
    };
    Tiger.prototype.showInfo = function () {
        alert("name=" + this.name + ",age=" + this.age);
    };

    // 动态原型
    function Duck(name, age) {
        this.name = name;
        this.age = age;
        this.hand = new Array("left", "right");
        if ("undefined" == typeof(Duck.inited)) {
            Duck.prototype.rename = function (name) {
                this.name = name;
            };
            Duck.prototype.showInfo = function () {
                alert("name=" + this.name + ",age=" + this.age);
            };
            Duck.inited = true;
        }
    }

    // 混合模式
    function Fish() {
        var fish = new Object();
        fish.name = "";
        fish.age = 0;
        fish.hand = new Array("left", "right");

        fish.rename = function (name) {
            this.name = name;
        };

        fish.showInfo = function () {
            alert("name=" + this.name + ",age=" + this.age);
        };

        return fish;
    }


</script>
</html>

 

参考资料

【1】《JS类定义的6种方式详解》

maozexijr
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS定义一个类
weixin_53126056的博客
12-18 4699
在JS中定义类的方式有两种 第一种 function 类名（形式参数列表）{ this.属性名=参数； this.方法名=function(){ } } 第二种 类名= function(形式参数列表){ this.属性名=参数； this.方法名=function(形式参数列表){ } } <html> <head> <meta charset="utf-8"> <ti
js定义类 对象 构造函数，类的继承
08-08
在提供的`ClassDefineAndExtends.js`文件中，可能包含了关于类定义和继承的示例代码。通过分析这个文件，我们可以看到实际应用中的类定义和继承实践，包括如何定义类，如何使用构造函数初始化对象，以及如何通过`...
JS定义类的六种方式详解以及几种常用的JS类定义方法
Schaffer的博客
02-04 3626
在前端开发中，经常需要定义JS类。那么在JavaScript中，定义类的方式有几种，分别是什么呢？本文就JS定义类的六中方式说明如下（案例说明）： 六种方式详解 1、工厂方式 function Car(){ var ocar = new Object; ocar.color = "blue"; ocar.doors = 4; ocar.showColor = function(){
JS - 基本数据类型的使用和定义
最新发布
好看的皮囊千篇一律，有趣的灵魂万里挑一。
04-18 618
字符串（String）：用于表示文本数据，例如："Hello, World!"。 数字（Number）：用于表示数值，包括整数和浮点数，例如：42, 3.14。 布尔值（Boolean）：用于表示逻辑值，包括true和false。 空（Null）：表示一个空值或不存在的值。 未定义（Undefined）：表示一个未定义的值。 符号（Symbol）：ES6引入的一种数据类型，表示独一无二的值。 大整数（BigInt）：ES11引入的一种数据类型，用于表示任意精度的整数。
【javascript】js中关于Class(类)的介绍和使用
qq_2511276124的博客
01-16 2021
类语法有两个组成部分：类表达式和类声明。类声明和类表达式的主体都执行在严格模式下。比如，构造函数，静态方法，原型方法，getter 和 setter 都在严格模式下执行。一个类的类体是一对花括号/大括号 {} 中的部分。这是你定义类成员的位置，如方法或构造函数。constructor方法是一个特殊的方法，这种方法用于创建和初始化一个由class创建的对象。一个类只能拥有一个名为“constructor”的特殊方法。如果类包含多个constructor的方法，则将抛出 一个SyntaxError。
JS入门必备基础知识（适合新人学习）
qq_57162921的博客
09-21 1988
js基础学习
java方法类的举例说明.doc
09-30
JavaScript是一种不同的、主要用于网页脚本的语言，其语法和概念与Java有很大不同，如类和方法的定义及使用方式等。 总的来说，这个示例展示了如何在Java中创建类、定义方法、实例化对象以及调用方法。每个方法都有...
html css js全套学习笔记＋举例
04-16
JavaScript还有许多库和框架，如jQuery简化DOM操作，React.js和Vue.js用于构建用户界面，Node.js则让JavaScript能在服务器端运行。ES6（ECMAScript 6）版本引入了许多新特性，如let和const变量声明、模板字符串、...
定义自己的dojo组件类
04-12
【定义自己的 Dojo 组件类】 在 Dojo 框架中，开发人员可以通过定义自己的组件类来扩展和定制现有功能，以满足特定需求。本文档将介绍如何定义和使用自定义的 Dojo widget。 ### 1. 模板 模板是 Dojo 组件的基础，...
举例讲解JavaScript substring()的使用方法
11-25
定义和用法 substring() 方法用于提取字符串中介于两个指定下标之间的字符。 语法 stringObject.substring(start,stop)   返回值 一个新的字符串，该字符串值包含 stringObject 的一个子字符串，其内容是从 start ...
js类
ZLHZHJ的专栏
09-11 859
一 1．工厂方式     javaScript中创建自己的类和对象，我们应该是必须掌握的，我们都知道javaScript中对象的属性可以在对象创建后动态定义，比如下面的代码：     //定义     var oCar = new Object();     oCar.color = "red";     oCar.doors = 4;     oCar.showColor
类的定义
Martinous的博客
11-12 8221
C++类和对象
Js的“类” 定义、创建、调用、继承（js知识子文章）
moshengrenhere的博客
12-04 1003
在C#中，关于类的操作， 第一定义类名称，花括号内定义属性和方法， 第二创建实例， 第三调用； ----------------------------------------------------------------------------------------- 在JS中，关于类的操作， 第一定义类名称 ---花括号内定义属性和方法， 第二创建实例----当是匿名类时候...
JS中的类
qq_44666184的博客
09-19 2116
类：（引用类型） 引用类型通常叫做类（class），也就是说，遇到引用值，所处理的就是对象。 js中的类 1、类的声明： function 类名(形参1，形参2……){ this.属性名1=形参1; this.属性名2=形参2; …… this.属性名=fn } 2、类的使用 var 对象名=new 类名(实参1，实参2……); 注意：js中类的内容只是对象的公共部分，每个对象还可以自定义进行扩充...
js 定义类或对象
weixin_30855761的博客
04-25 106
1.工厂方式 定义通用类function createObject(coord,elevation){ var obj = new Object(); obj.coord = coord; obj.elevation = elevation; obj.getCoord = function(){ return this.coord; }; obj...
JavaScript创建对象的9种方式
weixin_33752045的博客
04-03 398
JavaScript创建对象的九种方式 Object构造函数创建对象 不再赘述 对象字面量 不再赘述 工厂模式 用函数来封装以特定接口创建对象的细节 function createPerson(name, age, job) { var o = new Object(); o.name = name; o.age = age; o.job = job; o....
JavaScript中类的概念和this的理解
Lou_Lan的博客
03-26 633
js当然有类的概念，而且它和java一样，被设计成纯粹的面向对象的语言。js是弱类型语言，但这个并不意味着它没有类的概念。很明显地，我们经常能看到new Date()、new Array()之类的调用。这不就是类吗？一、定义类那我们如何在js中自定义一个类呢？其实应该换个说法，我们该怎么获取一个某种自定义类型的对象。// 自定义类Classfunction Class(){} // 实例化Clas...
js中的类
JF15388177454的博客
09-17 661
// es5中的类 // a.最简单的类 // function Person(){ // this.name = 'zhangsan'; // this.age = 18; // } // var p = new Person(); // console.log(p.anme); // b.构造函数...
js使用定义的方法举例
04-07
比如说，我们可以定义一个加法函数，代码如下： ``` function add(num1, num2) { return num1 + num2; } ``` 然后我们可以像这样调用这个函数： ``` var result = add(2, 3); console.log(result); // 输出 5 ``...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值