本文介绍的几种定义类或对象的方式中,目前使用最广泛的是:混合的构造函数/原型方式、动态原型方式。不要单独使用经典的构造函数或原型方式。

  1. 工厂方式
  2. 构造器函数
  3. 原型方式
  4. 混合的构造函数/原型方式
  5. 动态原型方式

  工厂方式

/**
* 工厂方式
* 使用此函数可以创建2个属性完全相同的对象。
* 每次调用函数Car(),都要创建showcolor(),意味着每个对象都有一个自己的showcolor()方法。
* @returns
*/
function fac_Car(){
var ocar = new Object();
ocar.color = "blue";
ocar.doors = 4;
ocar.showColor = function(){
document.write(this.color);
};
return ocar;
}
var fac_car1 = fac_Car();
var fac_car2 = fac_Car();

  构造器函数

/**
* 构造函数方式
* 在函数内部没有创建对象,是用this关键字。
* 同工厂方式一样。每次调用都会为对象创建自己的方法。
*/
function con_Car(color,door){
this.color = color;
this.doors = door;
this.showColor = function(){
alert(this.color);
};
}
var con_car1 = new con_Car("red",4);
var con_car2 = new con_Car("blue",4);

  原型方式

/**
* 原型方式
* 利用了对象的prototype属性。
* 首先用空函数创建类名,然后prototype属性来定义对象的属性。
* 所有该函数的对象存放的都是指向showColor()的指针,语法上看起来都属于同一个对象。
* 当属性指向的是对象时,如数组。一个对象的值改变时在另一个对象中也可以看到
*/
function pro_Car(){}
pro_Car.prototype.color = "red";
pro_Car.prototype.doors = 4;
pro_Car.prototype.showColor = function(){
alert(this.color);
};
var pro_car1 = new pro_Car();
var pro_car2 = new pro_Car();
pro_car1.arr.push("cc");
alert(pro_car1.arr); //output:aa,bb,cc
alert(pro_car2.arr); //output:aa,bb,cc

  混合的构造函数/原型方式

/**
* 混合的构造函数/原型方式
* 用构造函数定义对象的非函数属性,用原型方式定义对象的方法。
*/
function con_pro_Car(color,door){
this.color = color;
this.doors = door;
this.arr = new Array("aa","bb");
}
con_pro_Car.prototype.showColor(){
alert(this.color);
}
var con_pro_car1 = new con_pro_Car("red",4);
var con_pro_car2 = new con_pro_Car("blue",4);
con_pro_car1.arr.push("cc");
alert(con_pro_car1.arr); //output:aa,bb,cc
alert(con_pro_car2.arr); //output:aa,bb

  动态原型方式 

/**
* 动态原型方式
* 动态原型的方式同混合的构造函数/原型方式原理相似。唯一的区别就是赋予对象方法的位置。
* 动态原型方式是使用一个标志来判断是否已经给原型赋予了方法。这样可以保证该方法只创建一次
*/
function dyn_pro_Car(color,door){
this.color = color;
this.doors = door;
this.arr = new Array("aa","bb");
if(typeof dyn_pro_Car._initialized == "undefined"){
dyn_pro_Car.prototype.showColor = function(){
alert(this.color);
};
dyn_pro_Car._initialized = true;
};
};

  (本文仅供学习交流,欢迎大家共同探讨学习~)

javascript定义类或对象的方式的更多相关文章

  1. 我所了解的关于JavaScript定义类和对象的几种方式

    原文:http://www.cnblogs.com/hongru/archive/2010/11/08/1871359.html 在说这个话题之前,我想先说几句题外话:最近偶然碰到有朋友问我“hois ...

  2. JavaScript定义类与对象的一些方法

    最近偶然碰到有朋友问我"hoisting"的问题.即在js里所有变量的声明都是置顶的,而赋值则是在之后发生的.可以看看这个例子: 1 var a = 'global'; 2 (fu ...

  3. JavaScript定义类的几种方式

    提起面向对象我们就能想到类,对象,封装,继承,多态.在<javaScript高级程序设计>(人民邮电出版社,曹力.张欣译.英文名字是:Professional JavaScript for ...

  4. javascript创建类的6种方式

    javascript创建类的7种方式 一 使用字面量创建 1.1 示例 var obj={}; 1.2 使用场景 比较适用于临时构建一个对象,且不关注该对象的类型,只用于临时封装一次数据,且不适合代码 ...

  5. Javascript创建类和对象

    现总结一下Javascript创建类和对象的几种方法: 1.原始的创建方法: <script type="text/javascript"> var person = ...

  6. JavaScript 定义类的最佳写法——完整支持面向对象(封装、继承、多态),兼容所有浏览器,支持用JSDuck生成文档

    作者: zyl910 [TOC] 一.缘由 由于在ES6之前,JavaScript中没有定义类(class)语法.导致大家用各种五花八门的办法来定义类,代码风格不统一.而且对于模拟面向对象的三大支柱& ...

  7. [原创]Javascript模拟“类”的综合实现方式以及部分细节【截至ES6】

    [原创]Javascript模拟“类”的综合实现方式以及部分细节[截至ES6] 前言   最近几个旧项目里使用的图片编辑插件出现Bug, 经Review 后确定需要在其内外均做些改动,但是头疼的发现部 ...

  8. Javascript定义类(class)的三种方法

    将近20年前,Javascript诞生的时候,只是一种简单的网页脚本语言.如果你忘了填写用户名,它就跳出一个警告. 如今,它变得几乎无所不能,从前端到后端,有着各种匪夷所思的用途.程序员用它完成越来越 ...

  9. [转]Javascript定义类的三种方法

    作者: 阮一峰 原文地址:http://www.ruanyifeng.com/blog/2012/07/three_ways_to_define_a_javascript_class.html 将近2 ...

随机推荐

  1. 查看Oracle数据库表空间大小,是否需要增加表空间的数据文件

    在数据库管理中,磁盘空间不足是DBA都会遇到的问题,问题比较常见. --1查看表空间已经使用的百分比 Sql代码 select a.tablespace_name,a.bytes/1024/1024 ...

  2. 【Oracle】详解ADDM工具

    一.ADDM简介           在Oracle9i及之前,DBA们已经拥有了很多很好用的性能分析工具,比如,tkprof.sql_trace.statspack.set event 10046& ...

  3. Mac下php连接mysql数据库失败解决办法

    通过phpmyadmin连接mysql成功,但是通过php连接数据库失败,执行如下php语句 ? 1 @mysql_connect("localhost","root&q ...

  4. (转)OpenLayers3基础教程——OL3之Popup

    http://blog.csdn.net/gisshixisheng/article/details/46794813 概述: 本节重点讲述OpenLayers3中Popup的调用时实现,OL3改用O ...

  5. jstl与el结合常见用法

    JSTL Functions标签库 在JSP文件中使用Functions标签库,要先通过taglib指令引入该标签库: <%@taglib uri=”http://java.sun.com/js ...

  6. 一个完整的Appium手机自动化测试实例

    实现过程: 1.使用环境 appium .安卓SDK .python 本文重点是自动化实例,环境搭建过程省略. 2.找到被测APP的包名和Activity Name 手机连接上电脑后,在DOS环境先使 ...

  7. 文献阅读 | Benefits and limitations of genome-wide association studies

    参考:今日阅读:GWAS的优劣势 - Omics Liu  Omics 待续~

  8. 莫烦大大keras的Mnist手写识别(5)----自编码

    一.步骤: 导入包和读取数据 数据预处理 编码层和解码层的建立 + 构建模型 编译模型 训练模型 测试模型[只用编码层来画图] 二.代码: 1.导入包和读取数据 #导入相关的包 import nump ...

  9. 15.5.2 【Task实现细节】骨架方法的结构

    尽管骨架方法中的代码非常简单,但它暗示了状态机的职责.代码清单15-11生成的骨架方 法如下所示: [DebuggerStepThrough] [AsyncStateMachine(typeof(De ...

  10. em与当前元素的不解之缘

    em是相对于当前元素的字体大小而言,比如font-size:14px;那么这个元素的1em=14px. 如果当前元素未定义字体大小,则会向上继承父元素的字体大小,如果当前元素的所有祖先元素都没有定义f ...