JS定义类的六种方式详解


Posted in Javascript onMay 12, 2016

在前端开发中,经常需要定义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定义类的六种方式详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery获取当前屏幕的高度宽度的实现代码
Jul 12 Javascript
js中eval()函数和trim()去掉字符串左右空格应用
Feb 02 Javascript
仿JQuery输写高效JSLite代码的一些技巧
Jan 13 Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
Apr 22 Javascript
Angular CLI 安装和使用教程
Sep 13 Javascript
laravel5.3 vue 实现收藏夹功能实例详解
Jan 21 Javascript
vue安装遇到的5个报错及解决方法
Jun 12 Javascript
Node.js系列之连接DB的方法(3)
Aug 30 Javascript
在layui中select更改后生效的方法
Sep 05 Javascript
使用Vue Composition API写出清晰、可扩展的表单实现
Jun 10 Javascript
实用的 vue tags 创建缓存导航的过程实现
Dec 03 Vue.js
JavaScript中的LHS和RHS分析详情
Apr 06 Javascript
值得分享和收藏的Bootstrap学习教程
May 12 #Javascript
jQuery中$.each()函数的用法引申实例
May 12 #Javascript
判断JS对象是否拥有某属性的方法推荐
May 12 #Javascript
JavaScript的模块化开发框架Sea.js上手指南
May 12 #Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
May 12 #Javascript
jQuery CSS3自定义美化Checkbox实现代码
May 12 #Javascript
深入浅析JavaScript中with语句的理解
May 12 #Javascript
You might like
简单介绍下 PHP5 中引入的 MYSQLI的用途
2007/03/19 PHP
第四章 php数学运算
2011/12/30 PHP
PHP实现对站点内容外部链接的过滤方法
2014/09/10 PHP
php实现中文字符截取防乱码方法汇总
2015/04/29 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
(jQuery,mootools,dojo)使用适合自己的编程别名命名
2010/09/14 Javascript
jQuery 获取URL的GET参数值的小例子
2013/04/18 Javascript
纯文字版返回顶端的js代码
2013/08/01 Javascript
js 跳出页面的frameset框架示例介绍
2013/12/23 Javascript
JavaScript中函数(Function)的apply与call理解
2015/07/08 Javascript
js实现点击切换TAB标签实例
2015/08/21 Javascript
AngularJS基础 ng-hide 指令用法及示例代码
2016/08/01 Javascript
微信小程序 页面跳转传参详解
2016/10/28 Javascript
使用snowfall.jquery.js实现爱心满屏飞的效果
2017/01/05 Javascript
JS去除字符串中空格的方法
2017/02/14 Javascript
JS字符串按逗号和回车分隔的方法
2017/04/25 Javascript
微信小程序实现缓存根据不同的id来进行设置和读取缓存
2017/06/12 Javascript
JS获取数组中出现次数最多及第二多元素的方法
2017/10/27 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
2018/06/04 Javascript
运用js实现图层拖拽的功能
2019/05/24 Javascript
JS面向对象之多选框实现
2020/01/17 Javascript
JavaScript进阶(三)闭包原理与用法详解
2020/05/09 Javascript
angula中使用iframe点击后不执行变更检测的问题
2020/05/10 Javascript
详解JavaScript类型判断的四种方法
2020/10/21 Javascript
[01:02:09]Liquid vs TNC 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21
2020/07/19 DOTA
Python进阶_关于命名空间与作用域(详解)
2017/05/29 Python
VScode编写第一个Python程序HelloWorld步骤
2018/04/06 Python
mac 安装python网络请求包requests方法
2018/06/13 Python
python实现五子棋人机对战游戏
2020/03/25 Python
python抓取多种类型的页面方法实例
2019/11/20 Python
CSS3 透明色 RGBA使用介绍
2013/08/06 HTML / CSS
全球独特生活方式产品和礼品购物网站:AHAlife
2018/09/18 全球购物
俄罗斯茶和咖啡网上商店:Tea.ru
2021/01/26 全球购物
迅雷Cued工作心得体会
2014/01/27 职场文书
文明班级申报材料
2014/12/24 职场文书
请假条应该怎么写?
2019/06/24 职场文书