Javascript创建类的七种方法
/* 第一种定义类的方法 */
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创建类的七种方法的更多相关文章
- javascript创建类的6种方式
javascript创建类的7种方式 一 使用字面量创建 1.1 示例 var obj={}; 1.2 使用场景 比较适用于临时构建一个对象,且不关注该对象的类型,只用于临时封装一次数据,且不适合代码 ...
- [转]Javascript定义类的三种方法
作者: 阮一峰 原文地址:http://www.ruanyifeng.com/blog/2012/07/three_ways_to_define_a_javascript_class.html 将近2 ...
- Javascript使用function创建类的两种方法
1.使用function类 //myFunction.js var CMyFunc=function() { //类的公共方法,供外部调用 this.Func1=function() { var i= ...
- JavaScript创建类的三种方式
//第一种 创建类方法. // 用方法模拟 构造函数. function classobj() { this.name = 'xiaoming'; } classobj.text = 'text'; ...
- [转] 用javascript修改css伪类的几种方法
用javascript修改css伪类的几种方法: Modify pseudo element styles with JavaScript http://pankajparashar.com/post ...
- Javascript创建类和对象
现总结一下Javascript创建类和对象的几种方法: 1.原始的创建方法: <script type="text/javascript"> var person = ...
- MFC控件编程之 按钮编辑框.静态文本的使用,以及访问控件的七种方法.
MFC控件编程之 按钮编辑框.静态文本的使用以及访问控件的七种方法. 一丶按钮.静态文本的通用属性. 他们都有一个属性.就是可以输入标题内容.以及可以自定义控件ID. 创建一个MFC Dlg对话框. ...
- Javascript刷新页面的几种方法:
Javascript刷新页面的几种方法: 1 history.go(0) 2 window.location.reload() window.location.reload(true) ...
- java创建线程的三种方法
这里不会贴代码,只是将创建线程的三种方法做个笼统的介绍,再根据源码添加上自己的分析. 通过三种方法可以创建java线程: 1.继承Thread类. 2.实现Runnable接口. 3.实现Callab ...
随机推荐
- 教你使用SQL数据库复制系列(1-7)
SQL Server 复制系列(文章索引) 一.本文所涉及的内容(Contents) 本文所涉及的内容(Contents) 前言(Introduction) 复制逻辑结构图(Construction) ...
- WebSocket 学习教程(一):理论
一.WebSocket简单介绍 随着互联网的发展,传统的HTTP协议已经很难满足Web应用日益复杂的需求了.近年来,随着HTML5的诞生,WebSocket协议被提出,它实现了浏览器与服务器的全双工通 ...
- Vagrant测试
载新的BOX实现虚拟机恢复.效果如下:(可用linux命令操作,但是很多时候我们还是需要图形化界面,不然不利于开发代码编写) 参考PDF中的记录网址http://www.vagrantbox.es/ ...
- 《全栈性能Jmeter》-1性能方向职业发展
- xshell 禁用铃声 提示音
xshell 的铃声在操作时比较烦,所以通常会关闭. 操作方法: 工具 > 选项 > 高级, 在“终端”选项下的 “禁用铃声” 前面打上勾, 确定即可.
- (转载)Spring定时任务的几种实现
spring框架定时任务 一.分类 从实现的技术上来分类,目前主要有三种技术(或者说有三种产品): Java自带的java.util.Timer类,这个类允许你调度一个java.util.TimerT ...
- JavaScriptSerializer的日期转换方案
1.转换后过滤替换(通用) /// <summary> /// 日期转换 /// </summary> /// <param name="str"&g ...
- response.sendRedirect(url)与request.getRequestDispatcher(url).forward(request,response)的区别
response.sendRedirect(url)跳转到指定的URL地址,产生一个新的request,所以要传递参数只有在url后加参数,如: url?id=1.request.getRequest ...
- unity3d-代码控制游戏角色控制器移动
先上一个gif看看效果.因为图片大小限制.所以录制的比较小.个人认为效果比较牵强.特别是里面的逻辑代码. 不过我还是认为一切是为了先实现,因为我是刚接触的新手. 工程结构图 这次实现的效果是: 1:摄 ...
- JS怎么控制input框的背景颜色
$("input").css("background-color","red"); 参考:https://zhidao.baidu.com/ ...