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

赞 (0)

相关推荐

  • javascript中定义类的方法汇总

    JS中定义类的方式有很多种: 1.工厂方式 复制代码 代码如下: function Car(){    var ocar = new Object;    ocar.color = "blue";    ocar.doors = 4;    ocar.showColor = function(){     document.write(this.color)    };    return ocar;   }   var car1 = Car();   var car2 = Car()

  • 分享一个常用的javascript静态类

    废话不多说,直接奉上代码,知道干啥用的小伙伴直接带走吧. 复制代码 代码如下: util=function(){     return {         $:function(id){             return document.getElementById(id);         },         trim:function(str){             return str.replace(/(^\s+)|(\s+$)/g, "");         },

  • JavaScript中的类(Class)详细介绍

    在JavaScript中,可以使用类(Class)来实现面向对象编程(Object Oriented Programming).不过,JavaScript中的类与Java中的有所不同,其相应的定义和使用也不一样. JavaScript中类的定义 在JavaScript中,所有从同一个原型对象(prototype)处衍生出来的对象组成了一个类:也就是说,JavaScript中的类是一个对象集合的概念,如果两个对象它们的prototype相同,那么它们就属于同一个类:JavaScript中的类甚至都

  • Javascript中的五种数据类型详解

    Undefined 未定义.只有一个值undefined Null 只有一个值,null Boolean 在javascript中,只要逻辑表达式不返回undefined不返回null,就都是真的. 复制代码 代码如下: if(3) true if(null) false if(undefined) false Number String javascript中不存在char类型. 字符串定义可以用单引号,也可以用双引号. 复制代码 代码如下: <html> <head> <

  • JavaScript定义类和对象的方法

    本文实例讲述了JavaScript定义类和对象的方法.分享给大家供大家参考.具体方法如下: 在JS中,类和对象有多种不同的写法,因为本人对JS也不怎么熟,所以就本人的理解来写,如果哪位朋友发现有不对,请告之,共同学习． JS定义一个类有两种定法(我只知道这两种): 1. 定义函数的方式: 定义: 复制代码 代码如下: function classA(a) {      this.aaa=a;  //添加一个属性      this.methodA=function(ppp)  //添加一个方法

  • 如何用JavaScript定义一个类

    我原来的写法都是这样: function Dog(){ this.name = 'hachi'; } Dog.prototype = { makeNoise:function(){ alert('wangwangwang'); } }; 后来又看到另外一种复杂一点而且看起来好像没有必要的写法: function Dog(){ var privateVariable = 'secret'; var fn = function(){ //... } fn.prototype = { makeNois

  • 浅谈JavaScript实现面向对象中的类

    对象,是人们要进行研究的任何事物,从最简单的整数到复杂的飞机等均可看作对象,它不仅能表示具体的事物,还能表示抽象的规则.计划或事件.--引自百度百科 面向对象编程,是当前最流行的编程模式.但令人沮丧的是,作为前端应用最为广泛的javascript,并不支持面向对象. javascript没有访问控制符,它没有定义类的关键字class,它没有支持继承的extend或冒号,它也没有用 来支持虚函数的virtual,不过,Javascript是一门灵活的语言,下面我们就看看没有关键字class的Jav

  • JavaScript中的类与实例实现方法

    本文实例讲述了JavaScript中的类与实例实现方法.分享给大家供大家参考.具体如下: JavaScript 中没有父类, 子类的概念, 也没有class 和 instance 的概念, 全靠 prototype chain来实现继承. 当查找一个对象的属性时, JavaScript 会向上遍历 prototype chain, 直到找到对应的属性为止. 有几种方法, 可以使得 JavaScript 模拟出 class 和 instance 的概念. 1. 直接使用构造函数来创建对象, 在构造

  • ES6 javascript中Class类继承用法实例详解

    本文实例讲述了ES6 javascript中Class类继承用法.分享给大家供大家参考,具体如下: 1. 基本用法 Class 之间可以通过extends关键字实现继承, 这比 ES5 的通过修改原型链实现继承, 要清晰和方便很多. class ColorPoint extends Point {} 上面代码定义了一个ColorPoint类, 该类通过extends关键字, 继承了Point类的所有属性和方法. 但是由于没有部署任何代码, 所以这两个类完全一样, 等于复制了一个Point类. 下

  • ES6 javascript中class类的get与set用法实例分析

    本文实例讲述了ES6 javascript中class类的get与set用法.分享给大家供大家参考,具体如下: 与 ES5 一样, 在 Class 内部可以使用get和set关键字, 对某个属性设置存值函数和取值函数, 拦截该属性的存取行为. class MyClass { constructor() { // ... } get prop() { return 'getter'; } set prop(value) { console.log('setter: ' + value); } }

  • JavaScript中的类继承

    JavaScript Inheritance DouglasCrockfordwww.crockford.com And you think you're so clever and classless and free--John Lennon JavaScript一种没有类的,面向对象的语言,它使用原型继承来代替类继承.这个可能对受过传统的面向对象语言(如C++和Java)训练的程序员来说有点迷惑.JavaScript的原型继承比类继承有更强大的表现力,现在就让我们来看看. Java Jav

  • JavaScript中定义类的方式详解

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

  • javaScript中定义类或对象的五种方式总结

    第一种方式: 工厂方法 能创建并返回特定类型的对象的工厂函数(factory function). function createCar(sColor){ var oTempCar = new Object; oTempCar.color = sColor; oTempCar.showColor = function (){ alert(this.color); }; return oTempCar; } var oCar1 = createCar(); var oCar2 = createCa

  • 在JavaScript中实现类的方式探讨

    在 javascript 中有很多方式来创建对象,所以创建对象的方式使用起来非常灵活.那么,到底哪一种方式是最恰当的对象创建方式呢?构造模式,原型模式还是对象原意模式(Object literal)呢? 但这些模式具体是怎么回事呢? 在开始讲解之前,让我们先清楚地介绍一下关于 javascript 基本知识. 有没有可能在 javascript 中实现面向对象编程的方式呢? 答案是可能的,javascript 是可以创建对象的!这种对象可以包含数据及能够操作数据的方法,甚至可以包含其他对象.它没

  • ES6中定义类和对象的方法示例

    本文实例讲述了ES6中定义类和对象的方法.分享给大家供大家参考,具体如下: 类的基本定义和生成实例: // 类的基本定义和生成实例 class Parent{ //定义一个类 constructor(name='xiaxaioxian'){ this.name= name; } } // 生成一个实例 let g_parent = new Parent(); console.log(g_parent); //{name: "xiaxaioxian"} let v_parent = ne

  • JavaScript中检测数据类型的四种方法

    JavaScript中检测数据类型的四种方法

    目录 1. typeof 2. instanceof 3. constructor(构造函数) 4. Object.prototype.toString.call() 前言:在介绍检测数据类型的方法之前,先说说JavaScript中数据类型有哪些吧~ JS数据类型主要分为两大类:基本数据类型和引用数据类型 基本数据类型:number.string.boolean.null.undefined.symbol(es6)引用数据类型:object(array.function.date...) 数据类

  • Javascript 中的类和闭包

    有人说javascript也是面向对象的,只是它是prototype based,当然这只是概念上的区别,我不想讨论js是不是面向对象的,关键是想说明虽然javascript的类表现得很像其他语言中的类,但是内部的实现机理确不太一致,如果一味的把javascript中的类类比作其他语言中的类,有时候脑子会犯混. 先看一段简单的代码,一般教材上介绍如何新建一个类的时候都是这样的(当然还有更复杂的方法,不过本质上是一样的): 复制代码 代码如下: function MyClass(x) { this

随机推荐