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 相关文章推荐
javascript实例分享---具有立体效果的图片特效
Jun 08 Javascript
JavaScript中5种调用函数的方法
Mar 12 Javascript
js实现从右向左缓缓浮出网页浮动层广告的方法
May 09 Javascript
javascript实现支持移动设备画廊
Aug 24 Javascript
图解js图片轮播效果
Dec 20 Javascript
js控制台输出的方法(详解)
Nov 26 Javascript
js简单正则验证汉字英文及下划线的方法
Nov 28 Javascript
JavaScript中正则表达式判断匹配规则及常用方法
Aug 03 Javascript
vue插件实现v-model功能
Sep 10 Javascript
json解析大全 双引号、键值对不在一起的情况
Dec 06 Javascript
js实现弹窗猜数字游戏
Nov 26 Javascript
JS实现刷新网页后之前浏览位置保持不变示例详解
Aug 14 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 shell超强免杀、减少体积工具实现代码
2012/10/16 PHP
用php实现百度网盘图片直链的代码分享
2012/11/01 PHP
PHP多线程类及用法实例
2014/12/03 PHP
php打开本地exe程序,js打开本地exe应用程序,并传递相关参数方法
2018/02/06 PHP
PHP实现登录验证码校验功能
2018/05/17 PHP
jquery获取焦点和失去焦点事件代码
2013/04/21 Javascript
前端开发过程中浏览器版本的两种判定方法
2013/10/30 Javascript
jquery获取一组checkbox的值(实例代码)
2013/11/04 Javascript
js实现图片和链接文字同步切换特效的方法
2015/02/20 Javascript
jQuery Mobile操作HTML5的常用函数总结
2016/05/17 Javascript
JavaScript中的Object对象学习教程
2016/05/20 Javascript
AngularJS基础 ng-cloak 指令简单示例
2016/08/01 Javascript
Javascript中for循环语句的几种写法总结对比
2017/01/23 Javascript
javaScript实现复选框全选反选事件详解
2020/11/20 Javascript
Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解
2017/12/27 Javascript
Vue-cli3项目配置Vue.config.js实战记录
2018/07/29 Javascript
Vue.js 十五分钟入门图文教程
2018/09/12 Javascript
解决vue中el-tab-pane切换的问题
2020/07/19 Javascript
[41:56]Spirit vs Liquid Supermajor小组赛A组 BO3 第一场 6.2
2018/06/03 DOTA
[43:24]VG vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python扫描IP段查看指定端口是否开放的方法
2015/06/09 Python
python将回车作为输入内容的实例
2018/06/23 Python
linux下python中文乱码解决方案详解
2019/08/28 Python
为什么说Python可以实现所有的算法
2019/10/04 Python
Keras中 ImageDataGenerator函数的参数用法
2020/07/03 Python
HTMl5的存储方式sessionStorage和localStorage详解
2014/03/18 HTML / CSS
C#笔试题
2015/07/14 面试题
酒店司机岗位职责
2013/12/14 职场文书
股权投资意向书
2014/04/01 职场文书
中国梦我的梦演讲稿
2014/04/23 职场文书
驾驶员培训方案
2014/05/01 职场文书
2014年销售部工作总结
2014/12/01 职场文书
win10+anaconda安装yolov5的方法及问题解决方案
2021/04/29 Python
python 中[0]*2与0*2的区别说明
2021/05/10 Python
Mysql基础知识点汇总
2021/05/26 MySQL
vue ref如何获取子组件属性值
2022/03/31 Vue.js