JS定义类的六种方式详解

在前端开发中,经常需要定义JS类。那么在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();

调用此函数时将创建新对象,并赋予它所有的属性和方法。使用此函数可以创建2个属性完全相同的对象。

当然可以通过给它传递参数来改版这种方式。

function Car(color,door){
var ocar = new Object;
ocar.color = color;
ocar.doors = door;
ocar.showColor = function(){
document.write(this.color)
};
return ocar;
}
var car1 = Car(“red”,4);
var car2 = Car(“blue”,4);
car1.showColor() //output:”red”
car2.showColor() //output:”blue”

现在可以通过给函数传递不同的参数来得到具有不同值的对象。

在前面的例子中,每次调用函数Car(),都要创建showcolor(),意味着每个对象都有一个自己的showcolor()方法。

但是事实上,每个对象斗共享了同一个函数。 虽然可以在函数外定义方法,然后通过将函数的属性指向该方法。

function showColor(){

alert(this.color);
}
function Car(){
var ocar = new Object();
ocar.color = color;
ocar.doors = door;
ocar.showColor = showColor;
return ocar;
}

但是这样看起来不像是函数的方法。

2、构造函数方式

构造函数方式同工厂方式一样简单,如下所示:

function Car(color,door){
this.color = color;
this.doors = door;
this.showColor = function(){
alert(this.color)
};
}
var car1 = new Car(“red”,4);
var car2 = new Car(“blue”,4);

可以看到构造函数方式在函数内部没有创建对象,是用this关键字。因为在调用构造函数时已经创建了对象,而在函数内部只能用this来访问对象属性。

现在用new来创建对象,看起来像那么回事了!但是它同工厂方式一样。每次调用都会为对象创建自己的方法。

3、原型方式

该方式利用了对象的prototype属性。首先用空函数创建类名,然后所有的属性和方法都被赋予prototype属性。

function Car(){
}
Car.prototype.color = “red”;
Car.prototype.doors = 4;
Car.prototype.showColor = function(){
alert(this.color);
}
var car1 = new Car();
var car2 = new Car();

在这段代码中,首先定义了一个空函数,然后通过prototype属性来定义对象的属性。调用该函数时,原型的所有属性都会立即赋予要创建的对象,所有该函数的对象存放的都是指向showColor()的指针,语法上看起来都属于同一个对象。

但是这个函数没有参数,不能通过传递参数来初始化属性,必须要在对象创建后才能改变属性的默认值。

原型方式有个很严重的问题就是当属性指向的是对象时,如数组。

function Car(){
}
Car.prototype.color = “red”;
Car.prototype.doors = 4;
Car.prototype.arr = new Array(“a”,”b”);
Car.prototype.showColor = function(){
alert(this.color);
}
var car1 = new Car();
var car2 = new Car();
car1.arr.push(“cc”);
alert(car1.arr); //output:aa,bb,cc
alert(car2.arr); //output:aa,bb,cc

这里由于数组的引用值,Car的两个对象指向的都是同一个数组,所以当在car1添加值后,在car2中也可以看到。

联合是用构造函数/原型方式就可以像其他程序设计语言一样创建对象,是用构造函数定义对象的非函数属性,用原型方式定义对象的方法。

function Car(color,door){
this.color = color;
this.doors = door;
this.arr = new Array(“aa”,”bb”);
}
Car.prototype.showColor(){
alert(this.color);
}
var car1 = new Car(“red”,4);
var car2 = new Car(“blue”,4);
car1.arr.push(“cc”);
alert(car1.arr); //output:aa,bb,cc
alert(car2.arr); //output:aa,bb

5、动态原型方式

动态原型的方式同混合的构造函数/原型方式原理相似。唯一的区别就是赋予对象方法的位置。

function Car(color,door){
this.color = color;
this.doors = door;
this.arr = new Array(“aa”,”bb”);
if(typeof Car._initialized == “undefined”){
Car.prototype.showColor = function(){
alert(this.color);
};
Car._initialized = true;
}
}

动态原型方式是使用一个标志来判断是否已经给原型赋予了方法。这样可以保证该方法只创建一次

6、混合工厂方式

它的目的师创建假构造函数,只返回另一种对象的新实例。

function Car(){
var ocar = new Object();
ocar.color = “red”;
ocar.doors = 4;
ocar.showColor = function(){
alert(this.color)
};
return ocar;
}

与工厂方式所不同的是,这种方式使用new运算符。

以上就是全部的创建对象方法。目前使用最广泛的就是混合构造函数/原型方式,此外,动态原型方式也很流行。在功能上与构造函数/原型方式等价。

以上这篇JS定义类的六种方式详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

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

  • JavaScript中定义类的方式详解

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

  • JavaScript定义类或函数的几种方式小结

    提起面向对象我们就能想到类,对象,封装,继承,多态.在<javaScript高级程序设计>(人民邮电出版社,曹力.张欣译.英文名字是:Professional JavaScript for Web Developers)这本书中描述的还算比较详细.我们看看JavaScript中定义类的各种方法. 1.工厂方式 javaScript中创建自己的类和对象,我们应该是必须掌握的,我们都知道javaScript中对象的属性可以在对象创建后动态定义,比如下面的代码: 复制代码 代码如下: <scr

  • JS定义类的六种方式详解

    在前端开发中,经常需要定义JS类.那么在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

  • Unity查找游戏物体的六种方式详解

    一篇小白也能看懂的查找游戏物体的方式解析 – Unity 之 查找物体的几种方式.本文通过实际测试得出使用结论,大家进行简单记录,在使用时想不起来可以再来看看,多用几次基本就没有问题了. 一,Object.Find() Object.Find():根据名称找到游戏对象并返回它. void ObjectFind() { // 找父级 GameObject parent = GameObject.Find("GameObject"); Debug.Log("找父级物体,是否找到:

  • js继承的6种方式详解

    原型链继承 原型链继承是ECMAScript的主要继承方式.其基本思想就是通过原型继承多个引用类型的属性和方法.什么是原型链?每个构造函数都会有一个原型对象,调用构造函数创建的实例会有一个指针__proto__指向原型对象,这个原型可能是另一个类型的实例,所以内部可能也有一个指针指向另一个原型,然后就这样形成了一条原型链. 代码: function SuperType() { this.property = true; } SuperType.prototype.getSuperValue =

  • js的2种继承方式详解

    js中继承可以分为两种:对象冒充和原型链方式 一.对象冒充包括三种:临时属性方式.call()及apply()方式1.临时属性方式 复制代码 代码如下: function Person(name){     this.name = name;     this.say = function(){          alert('My name is '+this.name);     }}function F2E(name,id){     this.temp = Person;     thi

  • Python函数定义及传参方式详解(4种)

    一.函数初识 1.定义:将一组语句的集合通过一个名字(函数名)封装起来,要想执行这个函数,只需调用其函数名即可. 2.好处:代码重用:保持一致性:可扩展性. 3.示例如下: # -*-coding:utf-8-*- def sayHello(): print('Hello world!') sayHello() 二.函数传参方式 如上面的实例是函数中最基础的一种,是不传参数的,说到这里,我们有必要了解一下何为函数参数: 1.函数参数: 形参变量: 只有在被调用时才分配内存单元,调用结束时,即刻释

  • js的三种继承方式详解

    1.js原型(prototype)实现继承 代码如下 <body> <script type="text/javascript"> function Parent(name,age){ this.name=name; this.age=age; this.sayHi=function(){ alert("Hi, my name is "+this.name+", my age is "+this.age); } } //C

  • classloader类加载器_基于java类的加载方式详解

    基础概念 Classloader 类加载器,用来加载 Java 类到 Java 虚拟机中.与普通程序不同的是.Java程序(class文件)并不是本地的可执行程序.当运行Java程序时,首先运行JVM(Java虚拟机),然后再把Java class加载到JVM里头运行,负责加载Java class的这部分就叫做Class Loader. JVM本身包含了一个ClassLoader称为Bootstrap ClassLoader,和JVM一样,BootstrapClassLoader是用本地代码实现

  • Node.js中参数传递的两种方式详解

    目录 参数传递方式 GET方式 POST方式 动态网页 参数传递方式 在Node.js中,参数传递常见的共两种方式: GET方式:通过地址栏键=值的方式进行传递. POST方式:通过表单的方式传递请求数据. GET方式 GET方式通常是在请求地址中以[?参数1=值1&参数2=值2]的格式进行传递,在Node.js中可以通过获取url然后进行获取参数,如下所示: //1.引入http模块 var http = require('http'); //2.创建服务 var server = http.

  • js es6系列教程 - 新的类语法实战选项卡(详解)

    其实es6的面向对象很多原理和机制还是ES5的,只不过把语法改成类似php和java老牌后端语言中的面向对象语法. 一.用es6封装一个基本的类 class Person{ constructor( uName ){ this.userName = uName; } sayName(){ return this.userName; } } 是不是很向php和java中的类, 其实本质还是原型链,我们往下看就知道了 首先说下语法规则: class Person中的Person就是类名,可以自定义

  • PHP定义字符串的四种方式详解

    1.简介 在PHP中这门语言中,因为是弱类型语言,因此使用变量时不需提前定义即可使用. 我们在使用php进行开发的时候,大多数使用双引号.单引号进行定义字符串.既然有这两种方式,那么他们之间肯定是有区别的. 并且,除了单双引号定义字符串这两种方式外,php还增加了heredoc和nowdoc这两种语法糖进行补充. 2.单引号与双引号 2.1.单引号 在单引号中,任何特殊字符都会按原样输出[除\\.\'将会被转义输出] eg. <?php $var = 'this is a var!'; echo

随机推荐