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 相关文章推荐
jquery中的sortable排序之后的保存状态的解决方法
Jan 28 Javascript
13 个JavaScript 性能提升技巧分享
Jul 26 Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
Jan 11 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
Mar 25 Javascript
修改或扩展jQuery原生方法的代码实例
Jan 13 Javascript
js实现创建删除html元素小结
Sep 30 Javascript
jQuery 更改checkbox的状态,无效的解决方法
Jul 22 Javascript
详解前端自动化工具gulp自动添加版本号
Dec 20 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
Mar 21 Javascript
BootStrap表单控件之复选框checkbox和单选择按钮radio
May 23 Javascript
Vue.js学习笔记之修饰符详解
Jul 25 Javascript
微信小程序之蓝牙的链接
Sep 26 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
在smarty模板中使用PHP函数的方法
2011/04/23 PHP
PHPThumb PHP 图片缩略图库
2012/03/11 PHP
web server使用php生成web页面的三种方法总结
2013/10/28 PHP
php实现获取文章内容第一张图片的方法
2014/11/04 PHP
php实现用于删除整个目录的递归函数
2015/03/16 PHP
PHP实现的简单网络硬盘
2015/07/29 PHP
PHP中Http协议post请求参数
2015/11/02 PHP
php redis实现文章发布系统(用户投票系统)
2017/03/04 PHP
ThinkPHP实现生成和校验验证码功能
2017/04/28 PHP
[原创]PHP获取数组表示的路径方法分析【数组转字符串】
2017/09/01 PHP
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
2013/01/24 Javascript
jquery实现excel导出的方法
2013/04/04 Javascript
JavaScript 学习笔记之基础中的基础
2015/01/13 Javascript
在JavaScript中处理时间之setMinutes()方法的使用
2015/06/11 Javascript
微信小程序 实战实例开发流程详细介绍
2017/01/05 Javascript
js实现瀑布流效果(自动生成新的内容)
2017/03/16 Javascript
浅析JS中常用类型转换及运算符表达式
2017/07/23 Javascript
简单的三步vuex入门
2018/05/20 Javascript
浅谈vuex actions和mutation的异曲同工
2018/12/13 Javascript
JS中的防抖与节流及作用详解
2019/04/01 Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
2019/04/03 Javascript
关于vue3默认把所有onSomething当作v-on事件绑定的思考
2020/05/15 Javascript
[02:46]解说DC:感谢430陪伴我们的DOTA2国际邀请赛岁月
2016/06/29 DOTA
使用Python编写一个最基础的代码解释器的要点解析
2016/07/12 Python
python实现内存监控系统
2021/03/07 Python
使用python的pandas为你的股票绘制趋势图
2019/06/26 Python
python实现身份证实名认证的方法实例
2019/11/08 Python
如何基于Python实现自动扫雷
2020/01/06 Python
python GUI库图形界面开发之PyQt5线程类QThread详细使用方法
2020/02/26 Python
小学英语教学反思
2014/01/30 职场文书
小学安全教育材料
2014/02/17 职场文书
幼儿评语大全
2014/04/30 职场文书
爱护公物演讲稿
2014/09/09 职场文书
少先队中队工作总结2015
2015/07/23 职场文书
2016高三毕业赠言寄语
2015/12/04 职场文书
OpenCV实现常见的四种图像几何变换
2022/04/01 Python