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 相关文章推荐
YUI 读码日记之 YAHOO.util.Dom - Part.1
Mar 22 Javascript
jQuery 仿百度输入标签插件附效果图
Jul 04 Javascript
js实现touch移动触屏滑动事件
Apr 17 Javascript
js时钟翻牌效果实现代码分享
Jul 31 Javascript
jQuery实现简易的天天爱消除小游戏
Oct 16 Javascript
jQuery实现的AJAX简单弹出层效果代码
Nov 26 Javascript
javascript入门之数组[新手必看]
Nov 21 Javascript
修改 bootstrap table 默认detailRow样式的实例代码
Jul 21 Javascript
js+html获取系统当前时间
Nov 10 Javascript
React组件中的this的具体使用
Feb 28 Javascript
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
Jul 15 Javascript
Vue中 axios delete请求参数操作
Aug 25 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设计模式 Decorator(装饰模式)
2011/06/26 PHP
php 对输入信息的进行安全过滤的函数代码
2012/06/29 PHP
PHP输出数组中重名的元素的几种处理方法
2012/09/05 PHP
php生成静态页面的简单示例
2014/04/17 PHP
PHP 网站修改默认访问文件的nginx配置
2017/05/27 PHP
PHP图像处理技术实例总结【绘图、水印、验证码、图像压缩】
2018/12/08 PHP
详解关于php的xdebug配置(编辑器vscode)
2019/01/29 PHP
JavaScript 给汉字排序实例代码
2008/06/28 Javascript
微博@符号的用户名提示效果。(想@到谁?)
2010/11/05 Javascript
javascript中String类的subString()方法和slice()方法
2011/05/24 Javascript
js 获取radio按钮值的实例
2013/08/17 Javascript
JS常用正则表达式总结
2013/11/12 Javascript
使用jQuery的attr方法来修改onclick值
2014/07/07 Javascript
jQuery中:checkbox选择器用法实例
2015/01/03 Javascript
JavaScript中的立即执行函数表达式介绍
2015/03/15 Javascript
提升jQuery的性能需要做好七件事
2016/01/11 Javascript
Jquery attr()方法 属性赋值和属性获取详解
2016/04/15 Javascript
jQuery基于$.ajax设置移动端click超时处理方法
2016/05/14 Javascript
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
2016/06/21 Javascript
js Canvas绘制圆形时钟效果
2017/02/17 Javascript
Angular 2父子组件数据传递之@ViewChild获取子组件详解
2017/07/04 Javascript
在Vue中如何使用Cookie操作实例
2017/07/27 Javascript
微信小程序实现列表下拉刷新上拉加载
2020/07/29 Javascript
使用vue-cli导入Element UI组件的方法
2018/05/16 Javascript
如何基于javascript实现贪吃蛇游戏
2020/02/09 Javascript
JavaScript如何使用插值实现图像渐变
2020/06/28 Javascript
vue-cli4使用全局less文件中的变量配置操作
2020/10/21 Javascript
python实现矩阵打印
2019/03/02 Python
PyQt5图形界面播放音乐的实例
2019/06/17 Python
使用Canvas操作像素的方法
2018/06/14 HTML / CSS
应聘教师求职信
2014/07/19 职场文书
未婚证明书模板
2014/10/08 职场文书
2014年电信员工工作总结
2014/12/19 职场文书
单方投资意向书
2015/05/11 职场文书
欢送会主持词
2015/07/01 职场文书
快速学习Oracle触发器和游标
2021/06/30 Oracle