JavaScript中的类与实例实现方法
更新时间：2015年01月23日 09:48:46 投稿：shichen2014
这篇文章主要介绍了JavaScript中的类与实例实现方法,非常巧妙的模拟了类与实例的实现过程,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了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
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
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
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
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
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
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
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程序设计有所帮助。
相关文章
返回上一页并刷新在此功能有利于用户的体验,是每一个web开发人员所必备的一项，这篇文章主要介绍了JS本地刷新返回上一页代码，感兴趣的小伙伴们可以参考一下2016-07-07
这篇文章主要为大家详细介绍了微信小程序实现手势滑动卡片效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-08-08
这篇文章主要为大家详细介绍了js实现炫酷的烟花效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
这篇文章主要介绍了KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定的相关资料,需要的朋友可以参考下2016-10-10
这篇文章主要介绍了Javascript 对象（object）合并操作,结合实例形式分析了javascript基于jQuery的extend方法、对象属性、遍历赋值等操作实现对象合并相关操作技巧与使用注意事项,需要的朋友可以参考下2019-07-07
今天看到 司徒一篇blog， javascript深拷贝，其中涉及到一种判断类型的方法，特分析如下2010-03-03
全角：是一种电脑字符，是指一个全角字符占用两个标准字符(或两个半角字符)的位置。全角占两个字节。半角：是指一个字符占用一个标准的字符位置。半角占一个字节。接下来通过本文给大家介绍JS验证全角与半角及相互转化的知识，需要的朋友参考下吧2017-05-05
在淘宝上购物时，总会看到类似放大镜的效果。以下为原生js写的一个放大镜效果，其中肯定有很多不足，请大牛们指正，谢啦2012-08-08
Vim是一个类似于Vi的著名的功能强大、高度可定制的文本编辑器，在Vi的基础上改进和增加了很多特性.这篇文章主要介绍了Vim快速合并行及vim 将文件所有行合并到一行,需要的朋友可以参考下2017-11-11
展开和收起这样的效果想必大家早就眼熟了吧，利用闲暇时间用js写了一个具体功能：当自己处于全部显示的时候，点击自己的收起，自己收起等等感兴趣的你可以参考下哈2013-03-03
最新评论