javascript 基础学习(一)定义类
2014-01-27 16:58
495 查看
<script type="text/javascript"> function Writeln(text) { $("body").append(text + "<br />"); } </script>
<script type="text/javascript"> /*一、构造函数法 这是经典方法,也是教科书必教的方法。它用构造函数模拟"类",在其内部用this关键字指代实例对象。 生成实例的时候,使用new关键字。 类的属性和方法,还可以定义在构造函数的prototype对象之上。 关于这种方法的详细介绍,请看系列文章《Javascript 面向对象编程》, */ function ClassTest1() { this.UserName = "构造函数法"; this.UserCount = 1; this.IniData = function () { Writeln( this.UserName); }; } ClassTest1.prototype.UserAddress = "构造函数的prototype对象"; ClassTest1.prototype.func2 = function () { Writeln( this.UserAddress); } /*二、Object.create()法 为了解决"构造函数法"的缺点,更方便地生成对象,Javascript的国际标准ECMAScript第五版(目前通行的是第三版), 提出了一个新的方法Object.create()。 用这个方法,"类"就是一个对象,不是函数。 然后,直接用Object.create()生成实例,不需要用到new。 目前,各大浏览器的最新版本(包括IE9)都部署了这个方法。如果遇到老式浏览器,可以用下面的代码自行部署。 if (!Object.create) { Object.create = function (o) { function F() {} F.prototype = o; return new F(); }; } 这种方法比"构造函数法"简单,但是不能实现私有属性和私有方法,实例对象之间也不能共享数据,对"类"的模拟不够全面。 */ var ClassTest2 = { UserName: "Object.create()法", UserCount: 2, IniData: function () { Writeln(this.UserName); } } /*三、极简主义法 荷兰程序员Gabor de Mooij提出了一种比Object.create()更好的新方法, 他称这种方法为"极简主义法"(minimalist approach)。这也是我推荐的方法。 3.1 封装 这种方法不使用this和prototype,代码部署起来非常简单,这大概也是它被叫做"极简主义法"的原因。 首先,它也是用一个对象模拟"类"。在这个类里面,定义一个构造函数createNew(),用来生成实例。 */ var ClassTest3 = { New: function () { var cat = {}; cat.UserName = "极简主义法3.1 封装"; cat.UserCount = 3; cat.IniData = function () { Writeln(this.UserName); }; return cat; } }; /*3.2 继承 让一个类继承另一个类,实现起来很方便。只要在前者的createNew()方法中,调用后者的createNew()方法即可。 先定义一个Animal类。 然后,在Cat的createNew()方法中,调用Animal的createNew()方法。 这样得到的Cat实例,就会同时继承Cat类和Animal类。 */ var BaseClass = { createNew: function () { var baseClass = {}; baseClass.sleep = function () { Writeln("基类"); }; return baseClass; } }; var ClassTest4 = { createNew: function () { var cat = BaseClass.createNew(); cat.name = "大毛"; cat.makeSound = function () { Writeln("继承类"); }; return cat; } }; /*3.3 私有属性和私有方法 在createNew()方法中,只要不是定义在cat对象上的方法和属性,都是私有的。 上例的内部变量sound,外部无法读取,只有通过cat的公有方法makeSound()来读取。*/ var ClassTest5 = { createNew: function () { var classTest5 = {}; var sound = "私有字段"; classTest5.makeSound = function () { return sound; }; return classTest5; } }; /*3.4 数据共享 有时候,我们需要所有实例对象,能够读写同一项内部数据。这个时候,只要把这个内部数据, 封装在类对象的里面、createNew()方法的外面即可。 */ var ClassTest6 = { publicValue: "共享字段", createNew: function () { var classTest6 = {}; classTest6.getValue = function () { return ClassTest6.publicValue; }; classTest6.setValue = function (_value) { ClassTest6.publicValue = _value; }; return classTest6; } }; </script>
<script type="text/javascript"> $(document).ready(function () { var test1 = new ClassTest1(); test1.IniData(); test1.func2(); var test2 = Object.create(ClassTest2); test2.IniData(); var test3 = ClassTest3.New(); test3.IniData(); var test4 = ClassTest4.createNew(); test4.sleep(); // 基类 test4.makeSound(); // 继承类 var test5 = ClassTest5.createNew(); Writeln(test5.makeSound()); var test6 = ClassTest6.createNew(); var test6_2 = ClassTest6.createNew(); test6.setValue("共享字段Test"); Writeln(test6_2.getValue()); }); </script>
相关文章推荐
- 【JavaScript 学习--12】--js 中两种函数定义的区别:函数声明和函数表达式
- javascript学习笔记(一)基础知识
- [学习笔记]JavaScript基础
- Javascript入门学习第一篇 js基础第1/2页
- javascript 基础简介 适合新手学习
- javascript 基础知识学习1
- python学习笔记——基础篇(3):函数的定义
- [置顶] JavaScript基础教程之函数的重新学习
- JavaScript 入门基础知识 想学习js的朋友可以参考下
- JavaScript基础学习笔记(五)——Array类型
- 前端开发学习三——Javascript基础,变量提升(hosting)
- 从零开始学习前端JAVASCRIPT — 4、JavaScript基础Math和Date对象的介绍
- Coursera台大机器学习基础课程学习笔记1 -- 机器学习定义及PLA算法
- [学习笔记]JavaScript之BOM基础
- javascript 设计模式之单体模式 面向对象学习基础
- Block声明,定义, 最基础的用法学习,很好的一篇文章
- JavaScript基础学习2
- 学习JavaScript必备!基础工具清单大全
- JavaScript基础学习
- 【javascript基础】之BigPipe学习研究【转】