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 相关文章推荐
更正确的asp冒泡排序
May 24 Javascript
Mootools 1.2教程 排序类和方法简介
Sep 15 Javascript
javascript获取函数名称、函数参数、对象属性名称的代码实例
Apr 12 Javascript
jQuery显示和隐藏 常用的状态判断方法
Jan 29 Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
Aug 11 Javascript
详解JavaScript基于面向对象之创建对象(1)
Dec 10 Javascript
解决js函数闭包内存泄露问题的办法
Jan 25 Javascript
JS控制弹出悬浮窗口(一览画面)的实例代码
May 30 Javascript
原生js实现放大镜
Feb 20 Javascript
layui 阻止图片上传的实例(before方法)
Sep 26 Javascript
简单了解vue中的v-if和v-show的区别
Oct 08 Javascript
JS闭包原理及其使用场景解析
Dec 03 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记录日志的实现代码
2011/08/08 PHP
PHP跨时区(UTC时间)应用解决方案
2013/01/11 PHP
基于MySQL分区性能的详细介绍
2013/05/02 PHP
php数组排序usort、uksort与sort函数用法
2014/11/17 PHP
php求数组全排列,元素所有组合的方法
2016/05/05 PHP
一个js写的日历(代码部分网摘)
2009/09/20 Javascript
JQuery选择器特辑 详细小结
2012/05/14 Javascript
给html超链接设置事件不使用href来完成跳
2014/04/20 Javascript
javascript实现瀑布流加载图片原理
2016/02/02 Javascript
javascript闭包概念简单解析(推荐)
2016/06/03 Javascript
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
2016/08/29 Javascript
使用jQuery的ajax方法向服务器发出get和post请求的方法
2017/01/13 Javascript
jQuery插件zTree实现的多选树效果示例
2017/03/08 Javascript
基于React实现表单数据的添加和删除详解
2017/03/14 Javascript
ES6新特性之Object的变化分析
2017/03/31 Javascript
基于angular实现模拟微信小程序swiper组件
2017/06/11 Javascript
jquery点击回车键实现登录效果并默认焦点的方法
2018/03/09 jQuery
Vue三种常用传值示例(父传子、子传父、非父子)
2018/07/24 Javascript
JavaScript 点击触发复制功能实例详解
2018/11/02 Javascript
JavaScript中的this原理及6种常见使用场景详解
2020/02/14 Javascript
[05:14]辉夜杯主赛事第二日 RECAP精彩回顾
2015/12/27 DOTA
详解Python的Lambda函数与排序
2016/10/25 Python
python如何通过实例方法名字调用方法
2018/03/21 Python
python中dir()与__dict__属性的区别浅析
2018/12/10 Python
在python中使用with打开多个文件的方法
2019/01/07 Python
python使用参数对嵌套字典进行取值的方法
2019/04/26 Python
Django认证系统实现的web页面实现代码
2019/08/12 Python
python爬虫 基于requests模块的get请求实现详解
2019/08/20 Python
python+adb命令实现自动刷视频脚本案例
2020/04/23 Python
python实现逻辑回归的示例
2020/10/09 Python
Omio荷兰:预订火车、巴士和机票
2018/11/04 全球购物
工商学院毕业生自荐信
2013/11/12 职场文书
宝宝满月酒主持词和仪式流程
2014/03/27 职场文书
建筑工地宣传标语
2014/06/18 职场文书
2016习总书记系列重要讲话心得体会
2016/01/15 职场文书
六年级上册《闻官军收河南河北》的教学设计
2019/11/15 职场文书