/* 第一种定义类的方法 */
var cls = new Object();
cls.name = "wyf";
cls.showName = function(){
console.log(this.name);
}
cls.showName();

/* 第二种定义类的方式 */
function MyCls(){
var instance = new Object();
instance.name = "wyf";
instance.showName = function(){
console.log(this.name);
}
return instance;
}
var cls = new MyCls();
cls.showName();

/* 第三种定义类的方式,构造函数方式 */
function Cls(name){
this.name = name;
this.showName = function(){
console.log(this.name);
}
}
var cls = new Cls("wyf");
cls.showName();
var cls1 = new Cls("zz");
cls1.showName();
//此种方式和前两种方式有共同的缺点就是 每个对象都会生成showName方法,造成了内存的浪费 。

/* 第四种定义类的方法,原型方法 */
function Cls(){}
Cls.prototype.name = "wyf";
Cls.prototype.showName = function(){
console.log(this.name);
}
var cls = new Cls();
cls.showName();
//此种方法的缺点是,每个对象都指向了内存中同一个属性的地址,修改一个对象的属性值,其它对象的同一个属性的属性值都会变化。

/* 第五种创建类的方法:结合构造函数和原型方法 */
function Cls(name){
this.name = name;
}
Cls.prototype.showName = function(){
console.log(this.name);
}

var cls = new Cls("wyf");
cls.showName();
var cls1 = new Cls("zz");
cls1.showName();
cls.name = "dd";
cls.showName();
cls1.showName();

/* 第六种创建类的方法:Object.create() */
var Cls = {
name:"wyf",
showName:function(){
console.log(this.name);
}
};

var cls = Object.create(Cls);
cls.showName();

var cls1 = Object.create(Cls);
cls1.name = "test";
cls1.showName();

cls.name = "aa";
cls.showName();
cls1.showName();
//此种方法不能实现私有属性和私有方法,实例对象之间也不能共享数据,对"类"的模拟不够全面。

/* 第七种创建类的方法:极简主义法 */
var Cls = {
age:20,//共有属性
createInstance:function(){
var cls = {};
var i = 0;//私有方法
cls.name = "wyf";
cls.showName = function(){
console.log(this.name + " " + i);
}
return cls;
}
}

var cls = Cls.createInstance();
cls.showName();
var cls1 = Cls.createInstance();
cls1.showName();
cls.name = "dd";
cls.showName();
cls1.showName();
//此种方式容易理解,结构清晰。其实此种方式和第二种方式一样。在每个对象内部都生成了一个showName方法。

转自:https://www.cnblogs.com/wyf-gis/p/4551719.html

Javascript创建类的七种方法的更多相关文章

  1. javascript创建类的6种方式

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

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

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

  3. Javascript使用function创建类的两种方法

    1.使用function类 //myFunction.js var CMyFunc=function() { //类的公共方法,供外部调用 this.Func1=function() { var i= ...

  4. JavaScript创建类的三种方式

    //第一种 创建类方法. // 用方法模拟 构造函数. function classobj() { this.name = 'xiaoming'; } classobj.text = 'text'; ...

  5. [转] 用javascript修改css伪类的几种方法

    用javascript修改css伪类的几种方法: Modify pseudo element styles with JavaScript http://pankajparashar.com/post ...

  6. Javascript创建类和对象

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

  7. MFC控件编程之 按钮编辑框.静态文本的使用,以及访问控件的七种方法.

    MFC控件编程之 按钮编辑框.静态文本的使用以及访问控件的七种方法. 一丶按钮.静态文本的通用属性. 他们都有一个属性.就是可以输入标题内容.以及可以自定义控件ID. 创建一个MFC Dlg对话框. ...

  8. Javascript刷新页面的几种方法:

    Javascript刷新页面的几种方法: 1    history.go(0) 2    window.location.reload() window.location.reload(true)  ...

  9. java创建线程的三种方法

    这里不会贴代码,只是将创建线程的三种方法做个笼统的介绍,再根据源码添加上自己的分析. 通过三种方法可以创建java线程: 1.继承Thread类. 2.实现Runnable接口. 3.实现Callab ...

随机推荐

  1. env:bash \r解决

    1.brew install dos2unix2.find . -type f -exec dos2unix {} \;

  2. apache在mac下403问题

    症状:在mac下使用xampp环境,httpd.conf权限,但访问网站报403错误. 解决方案:将对应文件目录权限改为755 修改后,Thinkphp访问提示Application不可写,无法创建内 ...

  3. SQL SERVER 2016研究一

    一.安装SQL Server 2016 安装检查提示异常: 安装补丁: 根据系统判断补丁安装顺序,按顺序安装 Windows server 2012 R2 安装SQL补丁如下以及JDK: 安装完成 二 ...

  4. 编辑文件 vi,vim的基本操作

    vim   文件名字进入文件后   按i  进行编辑编辑确认后   按 Esc  停止编辑然后              按:   输入  wq     (是root权限时才行:若是强制修改 需要  ...

  5. 50A

    #include <iostream> using namespace std; int main() { int m, n; cin>>m>>n; cout< ...

  6. 2018-2019-1 20189221《Linux内核原理与分析》第五周作业

    2018-2019-1 20189221<Linux内核原理与分析>第五周作业 实验四 实验过程 当用户态进程调用一个系统调用时,cpu切换到内核态并开始执行一个内核函数. 在Linux中 ...

  7. JS发送短信验证码

    <div> <input type="tel" id="mobile" name="mobile" placeholder ...

  8. eclipse 把鼠标指针放在错误的语句上 提示快速修正 不见了的解决方法

    Window->Preferences->Java->Editor->Hovers 将[Combined Hover]选择即可,如果第一个[Variable Values]已经 ...

  9. 多么痛的领悟---关于RMB数据类型导致的元转分分转元的bug

    关于金额的数据类型,以及元转分分转元之间这种转换,以及元和分的比较,我相信很多人都踩过坑. 反正我是踩过. 而且,昨天和今天又重重的踩了两脚. 代付查询接口,支付中心给溢+响应的报文里,amount的 ...

  10. MyBatis基础入门《十五》ResultMap子元素(collection)

    MyBatis基础入门<十五>ResultMap子元素(collection) 描述: 见<MyBatis基础入门<十四>ResultMap子元素(association ...