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 相关文章推荐
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
May 13 Javascript
基于jQuery的Tab选项框效果代码(插件)
Mar 01 Javascript
JavaScript中的style.display属性操作
Mar 27 Javascript
jquery live()调用不存在的解决方法
Feb 26 Javascript
JavaScript前补零操作实例
Mar 11 Javascript
在JavaScript中使用JSON数据
Feb 15 Javascript
jQuery插件学习教程之SlidesJs轮播+Validation验证
Jul 12 Javascript
Bootstrap优化站点资源、响应式图片、传送带使用详解3
Oct 14 Javascript
ES2015 Symbol 一种绝不重复的值
Dec 25 Javascript
详解网站中图片日常使用以及优化手法
Jan 09 Javascript
vue使用Proxy实现双向绑定的方法示例
Mar 20 Javascript
js+audio实现音乐播放器
Sep 13 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 删除cookie方法详解
2014/12/01 PHP
JS中剪贴板兼容性、判断复制成功或失败
2021/03/09 Javascript
DOM相关内容速查手册
2007/02/07 Javascript
javascript tips提示框组件实现代码
2010/11/19 Javascript
深入理解Javascript闭包 新手版
2010/12/28 Javascript
JavaScript面向对象之Prototypes和继承
2012/07/12 Javascript
jquery 选择器引擎sizzle浅析
2013/02/06 Javascript
js中对象的声明方式以及数组的一些用法示例
2013/12/11 Javascript
php中给js数组赋值方法
2014/03/10 Javascript
javascript实现验证IP地址等相关信息代码
2015/05/10 Javascript
在JavaScript中操作时间之getUTCDate()方法的使用
2015/06/10 Javascript
jquery实现简单的自动播放幻灯片效果
2015/06/13 Javascript
jQuery Easyui实现左右布局
2016/01/26 Javascript
window.onerror()的用法与实例分析
2016/01/27 Javascript
创建一般js对象的几种方式
2017/01/19 Javascript
jquery实时获取时间的简单实例
2017/01/26 Javascript
JavaScript中各数制转换全面总结
2017/08/21 Javascript
极简主义法编写JavaScript类
2017/11/02 Javascript
vue 注册组件的使用详解
2018/05/05 Javascript
Nuxt.js开启SSR渲染的教程详解
2018/11/30 Javascript
微信小程序非跳转式组件授权登录的方法示例
2019/05/22 Javascript
vue elementUI table 自定义表头和行合并的实例代码
2019/05/22 Javascript
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
2020/08/31 Javascript
arcgis.js控制地图地体的显示范围超出区域自动弹回(实现思路)
2021/01/28 Javascript
python使用pandas实现数据分割实例代码
2018/01/25 Python
详解python函数的闭包问题(内部函数与外部函数详述)
2019/05/17 Python
Python秒算24点实现及原理详解
2019/07/29 Python
python 输出列表元素实例(以空格/逗号为分隔符)
2019/12/25 Python
tensorflow 自定义损失函数示例代码
2020/02/05 Python
CSS3中box-shadow的用法介绍
2015/07/15 HTML / CSS
详解H5本地储存Web Storage
2017/07/03 HTML / CSS
Joe Fresh官网:加拿大时尚品牌和零售连锁店
2016/11/30 全球购物
西班牙著名的珠宝首饰品牌:P D PAOLA
2018/09/15 全球购物
酒店实习个人鉴定
2013/12/07 职场文书
2014年卫生保健工作总结
2014/12/08 职场文书
家长高考寄语
2015/02/27 职场文书