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中Array 对象相关的几个方法
Dec 22 Javascript
使用闭包对setTimeout进行简单封装避免出错
Jul 10 Javascript
js页面跳转的常用方法整理
Oct 18 Javascript
jquery高级编程的最佳实践详解
Mar 23 Javascript
javascript模拟订火车票和退票示例
Apr 24 Javascript
Javascript writable特性介绍
Feb 27 Javascript
利用jquery制作滚动到指定位置触发动画
Mar 26 Javascript
基于wordpress的ajax写法详解
Jan 02 Javascript
vue中v-for加载本地静态图片方法
Mar 03 Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
Sep 27 Javascript
vue实现分页的三种效果
Jun 23 Javascript
JavaScript中reduce()的用法
May 11 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
星际流派综述
2020/03/04 星际争霸
php xml-rpc远程调用
2008/12/19 PHP
PHP file_get_contents 函数超时的几种解决方法
2009/07/30 PHP
Php获取金书网的书名的实现代码
2010/06/11 PHP
PHP+Ajax检测用户名或邮件注册时是否已经存在实例教程
2014/08/23 PHP
php隐藏IP地址后两位显示为星号的方法
2014/11/21 PHP
PHP实现冒泡排序的简单实例
2016/05/26 PHP
PHP实现关键字搜索后描红功能示例
2019/07/03 PHP
JavaScript实现单击下拉框选择直接跳转页面的方法
2015/07/02 Javascript
JavaScript实现打开链接页面的方式汇总
2016/06/02 Javascript
seajs模块之间依赖的加载以及模块的执行
2016/10/21 Javascript
利用Node.js对文件进行重命名
2017/03/12 Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
2018/02/21 Javascript
vue解决使用webpack打包后keep-alive不生效的方法
2018/09/01 Javascript
在vue中多次调用同一个定义全局变量的实例
2018/09/25 Javascript
vuex页面刷新后数据丢失的方法
2019/01/17 Javascript
微信小程序后端(java)开发流程的详细步骤
2019/11/13 Javascript
uni-app实现点赞评论功能
2019/11/25 Javascript
python实现360的字符显示界面
2014/02/21 Python
Python数据结构之顺序表的实现代码示例
2017/11/15 Python
Python的SimpleHTTPServer模块用处及使用方法简介
2018/01/22 Python
Python cookbook(数据结构与算法)实现优先级队列的方法示例
2018/02/18 Python
安装python时MySQLdb报错的问题描述及解决方法
2018/03/20 Python
对Python中内置异常层次结构详解
2018/10/18 Python
python实现二级登陆菜单及安装过程
2019/06/21 Python
pycharm新建一个python工程步骤
2019/07/16 Python
详解Python 中sys.stdin.readline()的用法
2019/09/12 Python
python shutil文件操作工具使用实例分析
2019/12/25 Python
python matplotlib.pyplot.plot()参数用法
2020/04/14 Python
详解用Python爬虫获取百度企业信用中企业基本信息
2020/07/02 Python
python实现PolynomialFeatures多项式的方法
2021/01/06 Python
英国派对礼服和连衣裙购物网站:TFNC London
2018/07/07 全球购物
英国在线药房和在线医生:LloydsPharmacy
2019/10/21 全球购物
以权谋私检举信范文
2015/03/02 职场文书
应届毕业生求职信范文
2015/03/19 职场文书
MySQL创建管理HASH分区
2022/04/13 MySQL