当前位置: 首页 > 编程笔记 >

JavaScript中的类与实例实现方法

闾丘冠玉
2023-03-14
本文向大家介绍JavaScript中的类与实例实现方法,包括了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

再看另外一个例子:
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另类方法实现htmlencode()与htmldecode()函数实例分析,包括了javascript另类方法实现htmlencode()与htmldecode()函数实例分析的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了javascript另类方法实现htmlencode()与htmldecode()函数。分享给大家供大家参考,具体如下: 最常见的做法

  • 本文向大家介绍Javascript代码实现仿实例化类,包括了Javascript代码实现仿实例化类的使用技巧和注意事项,需要的朋友参考一下 Javascript能做的事情越发的多了起来,随之而来的问题即是Js代码量的增加,面对代码的加多,我选择了仿面向对像类实例化里的构造函数自动启动的方式,把所有的js代码,以注册的形式,类化了起来。 代码 以上所述就是本文给大家分享的全部内容了,希望能够对大家学

  • 本文向大家介绍JavaScript实现基于Cookie的存储类实例,包括了JavaScript实现基于Cookie的存储类实例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了JavaScript实现基于Cookie的存储类。分享给大家供大家参考。具体分析如下: 通过这个JS类,你可以象使用session一样使用cookie,非常简单了! 希望本文所述对大家的javascript程序设计有所

  • 本文向大家介绍Kotlin中Stack与LinkedList的实现方法示例,包括了Kotlin中Stack与LinkedList的实现方法示例的使用技巧和注意事项,需要的朋友参考一下 前言 本文主要介绍的是关于Kotlin 实现基本的数据结构 Stack 和 LinkedList,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。 Stack Java中Stack由List实现,Ko

  • 本文向大家介绍JavaScript中实现继承的三种方式和实例,包括了JavaScript中实现继承的三种方式和实例的使用技巧和注意事项,需要的朋友参考一下 javascript虽然是一门面向对象的语言,但是它的继承机制从一开始设计的时候就不同于传统的其他面向对象语言,是基于原型的继承机制,但是在这种机制下,继承依然有一些不同的实现方式。 方法一:类式继承 所谓的类式继承就是指模仿传统面向对象语言的

  • 本文向大家介绍JS栈stack类的实现与使用方法示例,包括了JS栈stack类的实现与使用方法示例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了JS栈stack类的实现与使用方法。分享给大家供大家参考,具体如下: 栈是一种“先进后出”的数据结构,原理如下图所示: 示例代码: 这里使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/cod