JavaScript中的类与实例实现方法

所属分类: 网络编程 / JavaScript 阅读数: 722
收藏 0 赞 0 分享

本文实例讲述了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程序设计有所帮助。

更多精彩内容其他人还在看

JS组件Bootstrap Table使用方法详解

这篇文章主要为大家详细介绍了JS组件Bootstrap Table使用方法,具有一定的实用性,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

javascript禁止超链接跳转的方法

这篇文章主要介绍了javascript禁止超链接跳转的方法,结合实例分析了JavaScript事件机制与鼠标事件的响应操作技巧,需要的朋友可以参考下
收藏 0 赞 0 分享

JavaScript实现的MD5算法完整实例

这篇文章主要介绍了JavaScript实现的MD5算法,以完整实例形式分析了基于JavaScript实现MD5算法的具体步骤与相关技巧,需要的朋友可以参考下
收藏 0 赞 0 分享

Hammer.js+轮播原理实现简洁的滑屏功能

这篇文章主要介绍了Hammer.js+轮播原理实现简洁的滑屏功能的相关资料,需要的朋友可以参考下
收藏 0 赞 0 分享

基于JQuery实现图片轮播效果(焦点图)

这篇文章主要为大家详细介绍了基于JQuery实现图片轮播效果,利用Jquery制作焦点图左右轮播特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

javascript实现瀑布流加载图片原理

这篇文章主要为大家介绍了javascript实现瀑布流加载图片效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

JavaScript实现的SHA-1加密算法完整实例

这篇文章主要介绍了JavaScript实现的SHA-1加密算法,以完整实例形式分析了SHA-1加密算法的具体实现技巧,需要的朋友可以参考下
收藏 0 赞 0 分享

Javascript实现的SHA-256加密算法完整实例

这篇文章主要介绍了Javascript实现的SHA-256加密算法,以完整实例形式分析了JavaScript实现SHA-256加密的具体步骤与相关技巧,需要的朋友可以参考下
收藏 0 赞 0 分享

原生js实现图片层叠轮播切换效果

这篇文章主要为大家详细介绍了原生js实现图片层叠轮播切换效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

javascript自动切换焦点控制效果完整实例

这篇文章主要介绍了javascript自动切换焦点控制效果的方法,结合完整实例形式分析了JavaScript响应键盘按键控制表单输入框的焦点切换功能,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多