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

posted @   笠航  阅读(1626)  评论(0编辑  收藏  举报
编辑推荐:
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具
点击右上角即可分享
微信分享提示