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 动态生成私有变量访问器
Dec 06 Javascript
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
Jan 09 Javascript
JS简单循环遍历json数组的方法
Apr 22 Javascript
window.close(); 关闭浏览器窗口js代码的总结介绍
Jul 14 Javascript
js 定义对象数组(结合)多维数组方法
Jul 27 Javascript
Javascript中for循环语句的几种写法总结对比
Jan 23 Javascript
vue element-ui table表格滚动加载方法
Mar 02 Javascript
vue-自定义组件传值的实例讲解
Sep 18 Javascript
Vue动态路由缓存不相互影响的解决办法
Feb 19 Javascript
JQuery事件委托原理与用法实例分析
May 13 jQuery
echarts大屏字体自适应的方法步骤
Jul 12 Javascript
javascript执行上下文、变量对象实例分析
Apr 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 存储文本换行实现方法
2010/01/05 PHP
PHP抽象类与接口的区别详解
2019/03/21 PHP
JavaScript加密解密7种方法总结分析
2007/10/07 Javascript
js prototype截取字符串函数
2010/04/01 Javascript
尝试在让script的type属性等于text/html
2013/01/15 Javascript
javascript实现十秒钟后注册按钮可点击的方法
2015/05/13 Javascript
JQuery实现样式设置、追加、移除与切换的方法
2015/06/11 Javascript
通过XMLHttpRequest和jQuery实现ajax的几种方式
2015/08/28 Javascript
JS+CSS实现的经典tab选项卡效果代码
2015/09/16 Javascript
基于JS实现PHP的sprintf函数实例
2015/11/14 Javascript
onmouseover事件和onmouseout事件全面理解
2016/08/15 Javascript
Angularjs 实现一个幻灯片示例代码
2016/09/08 Javascript
javascript实现动态显示颜色块的报表效果
2017/04/10 Javascript
在angular 6中使用 less 的实例代码
2018/05/13 Javascript
vue实现与安卓、IOS交互的方法
2018/11/02 Javascript
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
2019/04/30 Javascript
layui给下拉框、按钮状态、时间赋初始值的方法
2019/09/10 Javascript
layui使用表格渲染获取行数据的例子
2019/09/13 Javascript
vue 检测用户上传图片宽高的方法
2020/02/06 Javascript
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
2020/02/24 Javascript
Python中apply函数的用法实例教程
2014/07/31 Python
Python中文件操作简明介绍
2015/04/13 Python
浅析Python中return和finally共同挖的坑
2017/08/18 Python
python如何通过实例方法名字调用方法
2018/03/21 Python
便捷提取python导入包的属性方法
2018/10/15 Python
Keras-多输入多输出实例(多任务)
2020/06/22 Python
python利用opencv实现颜色检测
2021/02/23 Python
纯CSS3打造动感漂亮时尚的扇形菜单
2014/03/18 HTML / CSS
金宝贝童装官网:Gymboree
2016/08/31 全球购物
船舶专业个人求职信范文
2014/01/02 职场文书
我的中国心演讲稿
2014/09/04 职场文书
中秋节祝酒词
2015/08/12 职场文书
庆祝教师节主题班会
2015/08/17 职场文书
学习杨善洲同志先进事迹心得体会
2016/01/23 职场文书
《好妈妈胜过好老师》:每个孩子的优秀都是有源头的
2020/01/03 职场文书
详解Go语言运用广度优先搜索走迷宫
2021/06/23 Python