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 相关文章推荐
浅谈javascript的数据类型检测
Jul 10 Javascript
js 返回时间戳所对应的具体时间
Jul 20 Javascript
JavaScript arguments 多参传值函数
Oct 24 Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
Jun 12 Javascript
javascript弹出窗口中增加确定取消按钮
Jun 24 Javascript
原生JS实现《别踩白块》游戏(兼容IE)
Feb 20 Javascript
js仿淘宝评价评分功能
Feb 28 Javascript
HTML5+jQuery实现搜索智能匹配功能
Mar 24 jQuery
jquery实现提示语淡入效果
May 05 jQuery
js实现购物车商品数量加减
Sep 21 Javascript
vue router返回到指定的路由的场景分析
Nov 10 Javascript
JavaScript控制台的更多功能
Apr 28 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
php&java(三)
2006/10/09 PHP
PHP实现异步调用方法研究与分享
2011/10/27 PHP
4种PHP异步执行的常用方式
2015/12/24 PHP
thinkPHP导出csv文件及用表格输出excel的方法
2015/12/30 PHP
PHP目录操作实例总结
2016/09/27 PHP
php实现简单的守护进程创建、开启与关闭操作
2019/08/13 PHP
很可爱的输入框
2008/08/03 Javascript
Js event事件在IE、FF兼容性问题
2011/01/01 Javascript
jquery ajax请求实例深入解析
2012/11/26 Javascript
在JavaScript中构建ArrayList示例代码
2014/09/17 Javascript
javascript引用赋值(地址传值)用法实例
2015/01/13 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
2015/01/23 Javascript
jQuery中的pushStack实现原理和应用实例
2015/02/03 Javascript
JS模式之单例模式基本用法
2015/06/30 Javascript
微信小程序 增、删、改、查操作实例详解
2017/01/13 Javascript
vue.js选中动态绑定的radio的指定项
2017/06/02 Javascript
JavaScript之class继承_动力节点Java学院整理
2017/07/03 Javascript
webpack将js打包后的map文件详解
2018/02/22 Javascript
Bootstrap模态对话框用法简单示例
2018/08/31 Javascript
vue router总结 $router和$route及router与 router与route区别
2019/07/05 Javascript
Vue+tracking.js 实现前端人脸检测功能
2020/04/16 Javascript
vue+koa2搭建mock数据环境的详细教程
2020/05/18 Javascript
jquery实现简单每周轮换的日历
2020/09/10 jQuery
用Python中的字典来处理索引统计的方法
2015/05/05 Python
python 获取当前目录下的文件目录和文件名实例代码详解
2020/03/10 Python
python 实现端口扫描工具
2020/12/18 Python
你不知道的葡萄干处理法、橙蜜处理法、二氧化碳酵母法
2021/03/17 冲泡冲煮
CSS3 圆角效果
2009/07/15 HTML / CSS
什么是Deployment descriptors;都有什么类型的部署描述符
2015/07/28 面试题
倡议书格式
2014/04/14 职场文书
新员工入职欢迎词
2015/01/23 职场文书
苏州园林导游词
2015/02/03 职场文书
教你怎么用Python selenium操作浏览器对象的基础API
2021/06/23 Python
vue使用element-ui按需引入
2022/05/20 Vue.js
Redis特殊数据类型HyperLogLog基数统计算法讲解
2022/06/01 Redis