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程序设计有所帮助。

时间: 2025-01-01 09:58:38

JavaScript中的类与实例实现方法_javascript技巧的相关文章

JavaScript中定义类的方式详解_javascript技巧

本文实例讲述了JavaScript中定义类的方式.分享给大家供大家参考,具体如下: Javascript本身并不支持面向对象,它没有访问控制符,它没有定义类的关键字class,它没有支持继承的extend或冒号,它也没有用来支持虚函数的virtual,不过,Javascript是一门灵活的语言,下面我们就看看没有关键字class的Javascript如何实现类定义,并创建对象. 一.定义类并创建类的实例对象 在Javascript中,我们用function来定义类,如下: function Sh

JavaScript中5种调用函数的方法_javascript技巧

这篇文章详细的介绍了Javascript中各种函数调用的方法及其原理,对于理解JavaScript的函数有很大的帮助! JavaScript,调用函数的5种方法 一次又一次的,我发现,那些有bug的Javascript代码是由于没有真正理解Javascript函数是如何工作而导致的(顺便说一下,许多那样的代码是我写的).JavaScript拥有函数式编程的特性, 当我们选择面对它的时候,这将成为我们前进的阻碍. 作为初学者,我们来测试五种函数调用的方法,从表面来看我们会认为那些函数与C#中函数的

JavaScript中push(),join() 函数 实例详解_javascript技巧

定义和用法 push方法 可向数组的末尾添加一个或多个元素,并返回一个新的长度. join方法 用于把数组中所有元素添加到一个指定的字符串,元素是通过指定的分隔符进行分割的. 语法 arrayObject.push(newelement1,newelement2,....,newelementX) arrayObject.join(separator). 参数描述newelement1必需.要添加到数组的第一个元素.newelement2可选.要添加到数组的第二个元素.newelementX可选

详解JavaScript中的4种类型识别方法_javascript技巧

具体内容如下: 1.typeof [输出]首字母小写的字符串形式 [功能] [a]可以识别标准类型(将Null识别为object) [b]不能识别具体的对象类型(Function除外) [实例] console.log(typeof "jerry");//"string" console.log(typeof 12);//"number" console.log(typeof true);//"boolean" console

javascript中函数作为参数调用的方法_javascript技巧

本文实例讲述了javascript中函数作为参数调用的方法.分享给大家供大家参考.具体分析如下: 先来看示例: function Map(){ var obj = {}; this.put = function(key, value){ obj[key] = value; } this.eachMap = function(fn){ for(var attr in obj){ fn(attr, obj[attr]); } } } var m = new Map(); m.put('01', 'a

javascript中的后退和刷新实现方法_javascript技巧

<input type=button value=刷新 onclick="window.location.reload()"> <input type=button value=前进 onclick="window.history.Go(1)"> <input type=button value=后退 onclick="window.history.go(-1)"> <input type=button

javascript中的prototype属性实例分析说明_javascript技巧

在Javascript中,一切都是对象,字符串是对象,数组是对象,变量是对象,函数也是对象,所以才会允许['a','b','c'].push('d');这样的操作存在.类本身也是一个对象,也可以定义属性和方法: 复制代码 代码如下: function Test(){}; Test.str = 'str'; Test.fun = function(){return 'fun';}; var r1 = Test.str; // str var r2 = Test.fun(); // fun var

javascript中对变量类型的判断方法_javascript技巧

在JavaScript中,有5种基本数据类型和1种复杂数据类型,基本数据类型有:Undefined, Null, Boolean, Number和String:复杂数据类型是Object,Object中还细分了很多具体的类型,比如:Array, Function, Date等等.今天我们就来探讨一下,使用什么方法判断一个出一个变量的类型. 在讲解各种方法之前,我们首先定义出几个测试变量,看看后面的方法究竟能把变量的类型解析成什么样子,以下几个变量差不多包含了我们在实际编码中常用的类型. var

JavaScript中window.open用法实例详解_javascript技巧

本文较为详细的分析了JavaScript中window.open用法.分享给大家供大家参考.具体如下: 复制代码 代码如下: <script LANGUAGE="javascript"> window.open ('page.html', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no,resizable=no,location=no, sta