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 相关文章推荐
onpropertypchange
Jul 01 Javascript
Firefox下无法正常显示年份的解决方法
Sep 04 Javascript
JavaScript的arguments对象应用示例
Sep 15 Javascript
浅谈JS闭包中的循环绑定处理程序
Nov 09 Javascript
javascript实现根据iphone屏幕方向调用不同样式表的方法
Jul 13 Javascript
jquery特效 点击展示与隐藏全文
Dec 09 Javascript
javascript中Number的方法小结
Nov 21 Javascript
微信小程序开发一键登录 获取session_key和openid实例
Nov 23 Javascript
JS实现京东首页之页面顶部、Logo和搜索框功能
Jan 12 Javascript
解决vue axios的封装 请求状态的错误提示问题
Sep 25 Javascript
Vue + Element UI图片上传控件使用详解
Aug 20 Javascript
Vue ​v-model相关知识总结
Jan 28 Vue.js
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 和 MySQL 开发的 8 个技巧
2006/10/09 PHP
PHP解析url并得到url参数方法总结
2018/10/11 PHP
js中的escape及unescape函数的php实现代码
2007/09/04 Javascript
javaScript call 函数的用法说明
2010/04/09 Javascript
文本框获得焦点和失去焦点的判断代码
2012/03/18 Javascript
js给onclick赋值传参数的两种方法
2013/11/25 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
2013/12/24 Javascript
JQuery实现防止退格键返回的方法
2015/02/12 Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
2015/09/14 Javascript
jQuery Easyui 验证两次密码输入是否相等
2016/05/13 Javascript
jQuery Mobile 触摸事件实例
2016/06/04 Javascript
jQuery实现拖动剪裁图片作为头像
2016/12/28 Javascript
uploader秒传图片到服务器完整代码
2017/04/22 Javascript
vue脚手架中配置Sass的方法
2018/01/04 Javascript
Vue组件和Route的生命周期实例详解
2018/02/10 Javascript
vue异步加载高德地图的实现
2018/06/19 Javascript
vue 项目中使用Loading组件的示例代码
2018/08/31 Javascript
微信小程序实现轨迹回放的示例代码
2019/12/13 Javascript
jQuery 判断元素是否存在然后按需加载内容的实现代码
2020/01/16 jQuery
python调用cmd命令行制作刷博器
2014/01/13 Python
Python设置默认编码为utf8的方法
2016/07/01 Python
python验证码识别的示例代码
2017/09/21 Python
python实现趣味图片字符化
2019/04/30 Python
python栈的基本定义与使用方法示例【初始化、赋值、入栈、出栈等】
2019/10/24 Python
Python数据库封装实现代码示例解析
2020/09/05 Python
大学生入党自我鉴定
2013/10/31 职场文书
电子技术专业中专生的自我评价
2013/12/17 职场文书
汽车运用工程专业毕业生推荐信
2013/12/25 职场文书
应届生如何写自荐信
2014/01/05 职场文书
幼儿园教师国培感言
2014/02/02 职场文书
大学生志愿者活动总结
2014/06/27 职场文书
党的群众路线教育实践活动心得体会(乡镇)
2014/11/03 职场文书
2014年打非治违工作总结
2014/11/13 职场文书
公司财务人员岗位职责
2015/04/14 职场文书
2016年全国爱牙日宣传活动总结
2016/04/05 职场文书
python自动化调用百度api解决验证码
2021/04/13 Python