博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
关于js(es5)如何优雅地创建对象
阅读量:6348 次
发布时间:2019-06-22

本文共 2667 字,大约阅读时间需要 8 分钟。

一、前颜(yan)

对象(Object Oriented,OO)对于基于类的语言来说是再普通不过的一个概念 了,比如C++,Java等等。 而在es5(以下js指es5)中,由于没有类的概念,因此它的对象与其他基于类的语言的对象是不同的。 因此在js中,关于对象的创建方法也有所不一样。 本文介绍各种创建js对象的方法,以及优缺点。

二、通过Object创建对象

var cat = new Object();cat.name = 'kiki1';cat.age = 1;cat.speak = function () {  console.log('Hello I am ', this.name);}复制代码

缺点:当需要创建多个相似对象时,会产生大量的重复代码,比如这时候我想再创建一个cat2,这时就得重复一遍以上代码。

var cat2 = new Object();cat2.name = 'kiki2';cat2.age = 2;cat2.speak = function () {  console.log('Hello I am ', this.name);}复制代码

三、通过对象字面量语法对象

var cat = {  name: 'kiki1',  age: 1,  speak: function () {    console.log('Hello I am ', this.name);  }}复制代码

特点:通过此方法来创建对象相比Object创建对象代码简洁了很多 缺点:与通过Object创建对象的缺点一致

为了解决以上问题,以下模式来了。

四、通过工厂模式创建对象

function createCat(name, age) {  var o = new Object();  o.name = name;  o.age = age;  o.speak = function () {    console.log('Hello I am ', this.name);  }  return o;}var cat1=createCat('kiki1',1);var cat2=createCat('kiki2',2);cat1.speak(); //Hello I am  kiki1cat2.speak(); //Hello I am  kiki2复制代码

特点:通过工厂模式创建对象,可以解决创建多个相似对象的问题。 缺点:无法识别对象,即无法知道一个对象的类型。

五、通过构造函数模式创建对象

通过构造函数模式创建对象,能够很好的解决工厂模式创建对象的问题。

function Cat(name, age) {  this.name = name;  this.age = age;  this.speak = function () {    console.log('Hello I am ', this.name);  }}let cat1 = new Cat('kiki1', 1);let cat2 = new Cat('kiki2', 2);cat1.speak(); //Hello I am  kiki1cat2.speak(); //Hello I am  kiki2// 检测对象类型console.log(cat1 instanceof Cat); // trueconsole.log(cat2 instanceof Cat); // true// 不同实例上的同名函数是不相等console.log(cat1.speak == cat2.speak); // false复制代码

特点: 1、通过new Cat来创建实例 2、可以通过instanceof来检测对象类型 缺点: 使用构造函数的缺点在于,每个方法都会在实例上重新创建一遍,所以不同实例上的同名函数是不相等的,即无法共享方法。比如上面的例子中的cat1.speak和cat2.speak是不相等的。

为了解决此缺点,请看原型模式。

六、原型模式

function Cat() { }Cat.prototype.name = 'kiki1';Cat.prototype.age = 1;Cat.prototype.speak = function () {  console.log('Hello I am ', this.name);}Cat.prototype.data = [1, 2];let cat1 = new Cat();let cat2 = new Cat();console.log(cat1.speak == cat2.speak); // true// 引用类型属性,不同实例之间互相影响console.log(cat2.data); // [1,2]cat1.data.push(3);console.log(cat1.data); // [1,2,3]console.log(cat2.data); // [1,2,3]复制代码

特点:共享方法,比如上面的例子中,cat1.speak和cat2.speak是相等的。 缺点:由于引用类型的属性也是共享的,因此不同实例之间会互相影响

六、组合模式

组合模式:即构造函数模式+原型模式。 采用组合模式可以解决构造函数模式和原型模式的问题,又拥有构造函数和原型模式的特点,集两种模式之长。 通过构造函数模式定义实例属性,通过原型模式定义共享方法和共享属性。

function Cat(name, age, data) {  this.name = name;  this.age = age;  this.data = data;}Cat.prototype.speak = function () {  console.log('Hello I am ', this.name);}let cat1 = new Cat('kiki1', 1, [1, 2, 3]);let cat2 = new Cat('kiki2', 2, [3, 4, 5]);console.log(cat1.speak == cat2.speak); // trueconsole.log(cat1.data); // [1,2,3]console.log(cat2.data); // [3,4,5]复制代码

综上对比,组合模式是最优雅的创建对象的方式。

转载地址:http://zwxla.baihongyu.com/

你可能感兴趣的文章
代码审查 Code Review
查看>>
fastjson如何指定字段不序列化
查看>>
[日常] Go语言圣经--示例: 并发的Echo服务
查看>>
BZOJ1969: [Ahoi2005]LANE 航线规划(LCT)
查看>>
linux内存管理之malloc、vmalloc、kmalloc的区别
查看>>
GreenDao 数据库升级 连接多个DB文件 或者指定不同的model&dao目录
查看>>
M1卡破解(自从学校升级系统之后,还准备在研究下)【转】
查看>>
vue 访问子组件示例 或者子元素
查看>>
linux内核--自旋锁的理解
查看>>
银行卡的三个磁道
查看>>
OpenSSL 提取 pfx 数字证书公钥与私钥
查看>>
Keepalived详解(四):通过vrrp_script实现对集群资源的监控【转】
查看>>
CollapsingToolbarLayoutDemo【可折叠式标题栏,顺便带有CardView卡片式布局】
查看>>
CentOS7.4安装配置mysql5.7 TAR免安装版
查看>>
解决IE二级链接无法打开故障
查看>>
Windows phone应用开发[16]-数据加密
查看>>
SQL Server 迁移数据到MySQL
查看>>
通用数据压缩算法简介
查看>>
The next Industry Standard in IT Monitoring, a python implementation Nagios like tool --- Shinken
查看>>
(笔记)找工作,该怎么进补
查看>>