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 相关文章推荐
让iframe自适应高度(支持XHTML,支持FF)
Jul 24 Javascript
js onpropertychange输入框 事件获取属性
Mar 26 Javascript
jQuery动态效果显示人物结构关系图的方法
May 07 Javascript
使用three.js 画渐变的直线
Jun 05 Javascript
用JS实现图片轮播效果代码(一)
Jun 26 Javascript
javascript定时器取消定时器及优化方法
Jul 08 Javascript
JavaScript hasOwnProperty() 函数实例详解
Aug 04 Javascript
JavaScript引用类型RegExp基本用法详解
Aug 09 Javascript
解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题
Aug 25 Javascript
Element-UI中关于table表格的那些骚操作(小结)
Aug 15 Javascript
vue3.0生命周期的示例代码
Sep 24 Javascript
一篇文章让你搞懂JavaScript 原型和原型链
Nov 23 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 静态化实现代码
2009/03/20 PHP
php通过字符串调用函数示例
2014/03/02 PHP
thinkphp使用literal防止模板标签被解析的方法
2014/11/22 PHP
PHP中的流(streams)浅析
2015/07/02 PHP
php随机显示指定文件夹下图片的方法
2015/07/13 PHP
php上传功能集后缀名判断和随机命名(强力推荐)
2015/09/10 PHP
PHP+iframe图片上传实现即时刷新效果
2016/11/18 PHP
详解PHP如何更好的利用PHPstorm的自动提示
2017/08/18 PHP
php与阿里云短信接口接入操作案例分析
2020/05/27 PHP
javascript实现动态增加删除表格行(兼容IE/FF)
2007/04/02 Javascript
jquerydom对象的事件隐藏显示和对象数组示例
2013/12/10 Javascript
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
2015/12/23 Javascript
Javascript缓存API
2016/06/14 Javascript
js css3实现图片拖拽效果
2017/03/04 Javascript
nodejs爬虫遇到的乱码问题汇总
2017/04/07 NodeJs
微信小程序 websocket 实现SpringMVC+Spring+Mybatis
2017/08/04 Javascript
利用JS实现scroll自定义滚动效果详解
2017/10/17 Javascript
JS中的事件委托实例浅析
2018/03/22 Javascript
JavaScript Canvas实现验证码
2020/08/02 Javascript
浅谈让你的代码更简短,更整洁,更易读的ES6小技巧
2018/10/25 Javascript
微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解
2019/03/28 Javascript
Openlayers实现距离面积测量
2020/09/28 Javascript
JavaScript实现简易计算器小功能
2020/10/22 Javascript
[01:39:04]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第二场 2月1日
2021/03/11 DOTA
Python动态生成多维数组的方法示例
2018/08/09 Python
python SVD压缩图像的实现代码
2019/11/05 Python
解决TensorFlow调用Keras库函数存在的问题
2020/07/06 Python
python的数学算法函数及公式用法
2020/11/18 Python
Python 图片处理库exifread详解
2021/02/25 Python
你不知道的葡萄干处理法、橙蜜处理法、二氧化碳酵母法
2021/03/17 冲泡冲煮
Blancsom美国/加拿大:服装和生活用品供应商
2018/07/27 全球购物
我想声明一个指针并为它分配一些空间, 但却不行。这些代码有什么 问题?char *p; *p = malloc(10);
2016/10/06 面试题
新员工试用期自我鉴定
2014/04/17 职场文书
工作表现证明
2015/06/15 职场文书
angular异步验证器防抖实例详解
2022/03/31 Javascript
Mysql 数据库中的 redo log 和 binlog 写入策略
2022/04/26 MySQL