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 用记忆函数快速计算递归函数
Mar 15 Javascript
深入理解JavaScript定时机制
Oct 29 Javascript
修复bash漏洞的shell脚本分享
Dec 31 Javascript
JavaScript输出当前时间Unix时间戳的方法
Apr 06 Javascript
JS+CSS实现精美的二级导航效果代码
Sep 17 Javascript
jQuery实现简单的点赞效果
May 29 Javascript
详解bootstrap-fileinput文件上传控件的亲身实践
Mar 21 Javascript
Vue项目从webpack3.x升级webpack4不完全指南
Apr 28 Javascript
jQuery轮播图功能制作方法详解
Dec 03 jQuery
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
Aug 05 Javascript
vue radio单选框,获取当前项(每一项)的value值操作
Sep 10 Javascript
Axios取消重复请求的方法实例详解
Jun 15 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
xml在joomla表单中的应用详解分享
2012/07/19 PHP
PHP中使用imagick实现把PDF转成图片
2015/01/26 PHP
Laravel中如何增加自定义全局函数详解
2017/05/09 PHP
Yii 2.0实现联表查询加搜索分页的方法示例
2017/08/02 PHP
JavaScript入门教程(7) History历史对象
2009/01/31 Javascript
[推荐]javascript 面向对象技术基础教程
2009/03/03 Javascript
jquery 3D球状导航的文章分类
2010/07/06 Javascript
js、css、img等浏览器缓存问题的2种解决方案
2013/10/23 Javascript
在js文件中写el表达式取不到值的原因及解决方法
2013/12/23 Javascript
Jquery插件分享之气泡形提示控件grumble.js
2014/05/20 Javascript
html文本框提示效果的示例代码
2014/06/28 Javascript
JavaScript三元运算符的多种使用技巧
2015/04/16 Javascript
JQuery日历插件My97DatePicker日期范围限制
2016/01/20 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
2016/06/14 Javascript
判断数组的最佳方法(推荐)
2016/10/11 Javascript
JSON数据中存在单个转义字符“\”的处理方法
2018/07/11 Javascript
python冒泡排序算法的实现代码
2013/11/21 Python
用python读写excel的方法
2014/11/18 Python
Python爬虫实例_利用百度地图API批量获取城市所有的POI点
2018/01/10 Python
如何利用python制作时间戳转换工具详解
2018/09/12 Python
jenkins配置python脚本定时任务过程图解
2019/10/29 Python
详解Python中string模块除去Str还剩下什么
2020/11/30 Python
Python就将所有的英文单词首字母变成大写
2021/02/12 Python
各大浏览器 CSS3 和 HTML5 兼容速查表 图文
2010/04/01 HTML / CSS
HTML页面中添加Canvas标签示例
2015/01/01 HTML / CSS
美国最顶级的精品店之一:Hampden Clothing
2016/12/22 全球购物
会计电算化专业个人的自我评价
2013/11/24 职场文书
中学教师培训制度
2014/01/31 职场文书
教师自我鉴定范文
2014/03/20 职场文书
临床专业自荐信
2014/06/22 职场文书
安全标兵事迹材料
2014/08/17 职场文书
习总书记三严三实学习心得体会
2014/10/13 职场文书
MySQL官方导出工具mysqlpump的使用
2021/05/21 MySQL
go开发alertmanger实现钉钉报警
2021/07/16 Golang
零基础学java之带参数以及返回值的方法
2022/04/10 Java/Android
《英雄联盟》2022日蚀、月蚀皮肤演示 黑潮亚索曝光
2022/04/13 其他游戏