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 相关文章推荐
引用外部脚本时script标签关闭的写法
Jan 20 Javascript
wap图片滚动特效无css3元素纯js脚本编写
Aug 22 Javascript
JavaScript如何调试有哪些建议和技巧附五款有用的调试工具
Oct 28 Javascript
原生js实现addClass,removeClass,hasClass方法
Apr 27 Javascript
animate 实现滑动切换效果【实例代码】
May 05 Javascript
javascript表单处理具体实现代码(表单、链接、按钮)
May 07 Javascript
详谈jQuery unbind 删除绑定事件 / 移除标签方法
Mar 02 Javascript
canvas绘制爱心的几种方法总结(推荐)
Oct 31 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
Dec 06 Javascript
微信小程序 scroll-view实现锚点滑动的示例
Dec 06 Javascript
Javascript之高级数组API的使用实例
Mar 08 Javascript
原生js实现照片墙效果
Oct 13 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
PHP使用mysqldump命令导出数据库
2015/04/14 PHP
用JavaScript对JSON进行模式匹配(Part 1-设计)
2010/07/17 Javascript
jQuery 1.5最新版本的改进细节分析
2011/01/19 Javascript
原生js和jquery实现图片轮播淡入淡出效果
2015/04/23 Javascript
如何用javascript计算文本框还能输入多少个字符
2015/07/29 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
2016/04/07 Javascript
浅谈javascript:两种注释,声明变量,定义函数
2016/09/29 Javascript
原生JS简单实现ajax的方法示例
2016/11/29 Javascript
JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】
2016/12/12 Javascript
JavaScript初学者必看“new”
2017/06/12 Javascript
vue2实现数据请求显示loading图
2017/11/28 Javascript
Vue 创建组件的两种方法小结(必看)
2018/02/23 Javascript
为什么使用koa2搭建微信第三方公众平台的原因
2018/05/16 Javascript
小程序二次贝塞尔曲线实现购物车商品曲线飞入效果
2019/01/07 Javascript
vue计算属性computed、事件、监听器watch的使用讲解
2019/01/21 Javascript
vue中axios请求的封装实例代码
2019/03/23 Javascript
在vue-cli 3中给stylus、sass样式传入共享的全局变量
2019/08/12 Javascript
Vue中el-form标签中的自定义el-select下拉框标签功能
2020/04/20 Javascript
Node.js API详解之 string_decoder用法实例分析
2020/04/29 Javascript
了不起的11个JavaScript代码重构最佳实践小结
2021/01/11 Javascript
按日期打印Python的Tornado框架中的日志的方法
2015/05/02 Python
Python中random模块生成随机数详解
2016/03/10 Python
Python 类的继承实例详解
2017/03/25 Python
详解python中的文件与目录操作
2017/07/11 Python
python3中numpy函数tile的用法详解
2019/12/04 Python
python中wheel的用法整理
2020/06/15 Python
python3字符串输出常见面试题总结
2020/12/01 Python
HTML5注册表单的自动聚焦与占位文本示例代码
2013/07/19 HTML / CSS
python+selenium小米商城红米K40手机自动抢购的示例代码
2021/03/24 Python
听课评语大全
2014/04/30 职场文书
爱之链教学反思
2014/04/30 职场文书
代办委托书怎么写
2014/08/01 职场文书
2014年文员工作总结
2014/11/18 职场文书
党员承诺书格式范文
2015/04/28 职场文书
SQL 窗口函数实现高效分页查询的案例分析
2021/05/21 SQL Server
Android学习之BottomSheetDialog组件的使用
2022/06/21 Java/Android