JavaScript中的类与实例实现方法


Posted in Javascript onJanuary 23, 2015

本文实例讲述了JavaScript中的类与实例实现方法。分享给大家供大家参考。具体如下:

JavaScript 中没有父类, 子类的概念, 也没有class 和 instance 的概念, 全靠 prototype chain来实现继承. 当查找一个对象的属性时, JavaScript 会向上遍历 prototype chain, 直到找到对应的属性为止. 有几种方法, 可以使得 JavaScript 模拟出 class 和 instance 的概念.

1. 直接使用构造函数来创建对象, 在构造函数内部使用 this指代对象实例.

function Animal() {  

 this.name = "animal";  

 }  

 Animal.prototype.makeSound = function() {  

 console.log("animal sound");  

 }  

[Function]  

 var animal1 = new Animal();  

 animal1.name;  

'animal'  

 animal1.makeSound();  

animal sound

再看另外一个例子:
function Point(x, y) {  

 this.x = x;  

 this.y = y;  

 }  

 Point.prototype = {  

 method1: function() { console.log("method1"); },  

 method2: function() { console.log("method2"); },  

 }  

{ method1: [Function], method2: [Function] }  

 var point1 = new Point(10, 20);  

 point1.method1();  

method1  

 point1.method2();  

method2

以上, 先指定好一个构造函数对象的 prototype 属性. 然后 new 一个该对象实例, 即可调用 prototype 中指定的方法.

2. 使用 Object.create()方法来创建对象

var Animal = {  

 name: "animal",  

 makeSound: function() { console.log("animal sound"); },  

 }  

 var animal2 = Object.create(Animal);  

 animal2.name;  

'animal'  

 console.log(animal2.name);  

animal  

 animal2.makeSound();  

animal sound

该方法, 比构造函数的方法更简便, 但不能实现私有属性和私有方法, 且实例对象之间不能共享数据, 对 class 的模拟仍不够全面.

3. 荷兰程序员 Gabor de Mooij 提出的极简主义法(minimalist approach). 推荐用法.

var Animal = {  

 init: function() {  

 var animal = {};  

 animal.name = "animal";  

 animal.makeSound = function() { console.log("animal sound"); };  

 return animal;  

 }  

 };  

 var animal3 = Animal.init();  

 animal3.name;  

'animal'  

 animal3.makeSound();  

animal sound

不使用 prototype 和 this, 仅需要自定义一个构造函数init. 继承的实现也很简单.
var Cat = {  

 init: function() {  

 var cat = Animal.init();  

 cat.name2 = "cat";  

 cat.makeSound = function() { console.log("cat sound"); };  

 cat.sleep = function() { console.log("cat sleep"); };  

 return cat;  

 }  

 }  

 var cat = Cat.init();  

 cat.name; // 'animal'  

 cat.name2; // 'cat'  

 cat.makeSound(); // 类似于方法的重载  

cat sound  

 cat.sleep();  

cat sleep

私有属性和私有方法的使用:
var Animal = {  

 init: function() {  

 var animal = {};  

 var sound = "private animal sound"; // 私有属性  

 animal.makeSound = function() { console.log(sound); };  

 return animal;  

 }  

 };  

 var animal4 = Animal.init();  

 Animal.sound; // undefined 私有属性只能通过对象自身的方法来读取.  

 animal.sound; // undefined 私有属性只能通过对象自身的方法来读取  

 animal4.makeSound();  

private animal sound

只要不是定义在animal对象上的属性和方法都是私有的, 外界不能访问.
类与实例之间, 可以做到数据共享.
var Animal = {  

 sound: "common animal sound",  

 init: function() {  

 var animal = {};  

 animal.commonSound = function() { console.log(Animal.sound); };  

 animal.changeSound = function() { Animal.sound = "common animal sound changed"; };  

 return animal;  

 }  

 }  

 var animal5 = Animal.init();  

 var animal6 = Animal.init();  

 Animal.sound; // 可以视为类属性  

'common animal sound'  

 animal5.sound; // 实例对象不能访问类属性  

undefined  

 animal6.sound;  

undefined  

 animal5.commonSound();  

common animal sound  

 animal6.commonSound();  

common animal sound  

 animal5.changeSound(); // 修改类属性  

undefined  

 Animal.sound;  

'common animal sound'  

 animal5.commonSound();  

common animal sound  

 animal6.commonSound();  

common animal sound

如 Animal.sound 就是类与实例的共有属性, 可以视为类属性和类方法.
若一个实例修改了该共有属性, 则该类和其他实例的共有属性也对应修改了.
综上, 就是 JavaScript 中模拟的 class 和 instance 的概念和用法.

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

Javascript 相关文章推荐
CheckBoxList多选样式jquery、C#获取选择项
Sep 06 Javascript
js生成随机数之random函数随机示例
Dec 20 Javascript
程序员必知35个jQuery 代码片段
Nov 05 Javascript
javascript中tostring()和valueof()的用法及两者的区别
Nov 16 Javascript
Winform客户端向web地址传参接收参数的方法
May 17 Javascript
jQuery绑定自定义事件的魔法升级版
Jun 30 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
Dec 22 Javascript
使用vue.js实现联动效果的示例代码
Jan 10 Javascript
在angularJs中进行数据遍历的2种方法
Oct 08 Javascript
更强大的vue ssr实现预取数据的方式
Jul 19 Javascript
VUE实现Studio管理后台之鼠标拖放改变窗口大小
Mar 04 Javascript
如何在JavaScript中正确处理变量
Dec 25 Javascript
PHP中CURL的几个经典应用实例
Jan 23 #Javascript
Javascript闭包用法实例分析
Jan 23 #Javascript
JavaScript学习笔记之Function对象
Jan 22 #Javascript
JavaScript学习笔记之Cookie对象
Jan 22 #Javascript
javascript二维数组转置实例
Jan 22 #Javascript
JavaScript学习笔记之内置对象
Jan 22 #Javascript
JavaScript学习笔记之JS事件对象
Jan 22 #Javascript
You might like
我的论坛源代码(三)
2006/10/09 PHP
我的论坛源代码(八)
2006/10/09 PHP
PHP中strpos、strstr和stripos、stristr函数分析
2016/06/11 PHP
Laravel框架源码解析之入口文件原理分析
2020/05/14 PHP
javascript下string.format函数补充
2010/08/24 Javascript
非常强大的 jQuery.AsyncBox 弹出对话框插件
2011/08/29 Javascript
js修改地址栏URL参数解决url参数问题
2012/12/15 Javascript
引用外部脚本时script标签关闭的写法
2014/01/20 Javascript
js限制checkbox选中个数以限制六个为例
2014/07/15 Javascript
angularjs的一些优化小技巧
2014/12/06 Javascript
JavaScript分秒倒计时器实现方法
2015/02/02 Javascript
JavaScript实现打字效果的方法
2015/07/10 Javascript
JavaScript学习笔记(三):JavaScript也有入口Main函数
2015/09/12 Javascript
js分页之前端代码实现和请求处理
2017/08/04 Javascript
jQuery实现弹窗下底部页面禁止滑动效果
2017/12/19 jQuery
详解基于 Node.js 的轻量级云函数功能实现
2019/07/08 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
2021/01/11 Javascript
浅析Python中signal包的使用
2015/11/13 Python
解决Python3中的中文字符编码的问题
2018/07/18 Python
Python实现处理逆波兰表达式示例
2018/07/30 Python
python网络爬虫 CrawlSpider使用详解
2019/09/27 Python
python hash每次调用结果不同的原因
2019/11/21 Python
Python 获取numpy.array索引值的实例
2019/12/06 Python
用Python 爬取猫眼电影数据分析《无名之辈》
2020/07/24 Python
sklearn中的交叉验证的实现(Cross-Validation)
2021/02/22 Python
浅析python连接数据库的重要事项
2021/02/22 Python
美国大码时尚女装购物网站:ELOQUII
2017/12/28 全球购物
美国高品质个性化珠宝销售网站:Jewlr
2018/05/03 全球购物
La Senza官网:北美顶尖性感内衣品牌
2018/08/03 全球购物
活动策划邀请函
2014/02/06 职场文书
企业办公室主任岗位职责
2014/02/19 职场文书
阳光体育活动实施方案
2014/05/25 职场文书
大学生标准自荐书
2014/06/15 职场文书
庆元旦演讲稿
2014/09/15 职场文书
浅谈Redis的keys命令到底有多慢
2021/10/05 Redis
MySQL时区造成时差问题
2022/04/13 MySQL