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 相关文章推荐
jquery 框架使用教程 AJAX篇
Oct 11 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
Oct 14 Javascript
Java Mybatis框架入门基础教程
Sep 21 Javascript
Angularjs结合Bootstrap制作的一个TODO List
Aug 18 Javascript
jQuery Validate插件实现表单验证
Aug 19 Javascript
JS表格组件BootstrapTable行内编辑解决方案x-editable
Sep 01 Javascript
jQuery中ajax错误调试分析
Dec 01 Javascript
浅谈js停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)
Feb 08 Javascript
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
Mar 23 jQuery
vue做移动端适配最佳解决方案(亲测有效)
Sep 04 Javascript
Puppeteer 爬取动态生成的网页实战
Nov 14 Javascript
JavaScript常用工具函数汇总(浏览器环境)
Sep 17 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
mysql 查询指定日期时间内sql语句实现原理与代码
2012/12/16 PHP
php中将html中的br换行符转换为文本输入中的换行符
2013/03/26 PHP
详解PHP的Laravel框架中Eloquent对象关系映射使用
2016/02/26 PHP
静态的动态续篇之来点XML
2006/12/23 Javascript
innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别
2007/06/29 Javascript
javascript 遍历验证所有文本框的值
2009/08/27 Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
2016/04/17 Javascript
jQuery插件formValidator实现表单验证
2016/05/23 Javascript
javascript函数的节流[throttle]与防抖[debounce]
2017/11/15 Javascript
微信小程序实现搜索指定景点周边美食、酒店
2019/05/18 Javascript
从零搭一个自用的前端脚手架的方法步骤
2019/09/23 Javascript
使用vscode快速建立vue模板过程详解
2019/10/10 Javascript
python实现多线程暴力破解登陆路由器功能代码分享
2015/01/04 Python
Python控制多进程与多线程并发数总结
2016/10/26 Python
python OpenCV学习笔记实现二维直方图
2018/02/08 Python
numpy.linalg.eig() 计算矩阵特征向量方式
2019/11/29 Python
浅谈Pycharm最有必要改的几个默认设置项
2020/02/14 Python
django 链接多个数据库 并使用原生sql实现
2020/03/28 Python
基于Python第三方插件实现西游记章节标注汉语拼音的方法
2020/05/22 Python
pandas使用函数批量处理数据(map、apply、applymap)
2020/11/27 Python
css3实现可拖动的魔方3d效果
2019/05/07 HTML / CSS
泰国汽车、火车和轮渡票预订网站:Bus Online Ticket
2017/09/09 全球购物
日本航空官方网站:JAL
2019/06/19 全球购物
极简鞋类,赤脚的感觉:Lems Shoes
2019/08/06 全球购物
巴西24小时在线药房:Droga Raia
2020/05/12 全球购物
Java平台和其他软件平台有什么不同
2015/06/05 面试题
家佳咖啡店创业计划书
2013/12/27 职场文书
电气个人求职信范文
2014/02/04 职场文书
安全教育感言
2014/03/04 职场文书
岗位竞聘报告范文
2014/11/06 职场文书
2015年学校教科室工作总结
2015/07/20 职场文书
基于Redis过期事件实现订单超时取消
2021/05/08 Redis
Python中else的三种使用场景
2021/06/16 Python
WINDOWS 64位 下安装配置mysql8.0.25最详细的教程
2022/03/22 MySQL
python中pymysql包操作数据库方法
2022/04/19 Python
Go gorilla/sessions库安装使用
2022/08/14 Golang