JS - 对象字面量、对象构造函数

文章缘由:为什么在js里可以这样写{test() {}}?
在 JavaScript 中,传统方式是{test: function() {}},而{ test() {} } 这样的写法是利用了“对象字面量 ” 的简洁方法语法(ES6 及之后),从 ES6 开始,引入了简洁方法语法,允许在对象字面量中更简洁地定义方法。

1. 语法形式

  • 对象字面量

使用花括号 { } 来定义对象,在括号内直接指定对象的属性和方法。属性和方法以键值对(属性名:属性值)的形式列出。例如:

 let myObjectLiteral = {
     property1: 'value1',
     property2: 123,
     method1: function() {
         console.log('This is method1');
     }
 };
  • 对象构造函数

首先需要定义一个函数,这个函数通常以大写字母开头(这是一种命名约定,表示它是一个构造函数)。在函数内部,通过this关键字来设置对象的属性和方法。然后使用new关键字来创建对象实例。例如:

 function MyObjectConstructor() {
     this.property1 = 'value1';
     this.property2 = 123;
     this.method1 = function() {
         console.log('This is method1');
     };
 }
 let myObjectConstructorInstance = new MyObjectConstructor();

2. 创建对象的方式和效率

  • 对象字面量:

更适合创建单个的、简单的对象。它是一种直接的、简洁的方式,代码量相对较少。例如,当你只需要快速创建一个包含特定属性和方法的对象来表示某个数据结构时,对象字面量是很好的选择。在解析代码时,对象字面量的创建过程相对简单直接,效率较高。

  • 对象构造函数:

主要用于创建多个具有相同结构(属性和方法)的对象。当你需要创建大量相同类型的对象时,通过构造函数可以方便地实现代码的复用。不过,每次使用构造函数创建对象时,都会执行函数内部的代码,相对来说可能会有一些额外的开销。特别是当构造函数内部有复杂的逻辑或者频繁创建对象时,这种开销可能会更加明显。

3. 对象的复用性和继承性

  • 对象字面量:

复用性相对较弱。如果要创建多个相似的对象,需要重复编写相似的对象字面量代码。在继承方面,对象字面量本身没有内置的继承机制,但可以通过一些方法(如Object.create())来实现类似继承的效果,不过这样做相对比较复杂。

  • 对象构造函数:

复用性强。可以通过构造函数创建多个具有相同结构的对象,只要调用构造函数并传入不同的参数就可以得到不同的对象实例。在继承方面,JavaScript 中的构造函数可以通过原型链(prototype)来实现继承,这是一种比较自然和强大的继承机制,使得代码的扩展性和维护性更好。例如:

 function ParentConstructor() {
     this.parentProperty = 'parent value';
 }
 ParentConstructor.prototype.parentMethod = function() {
     console.log('This is a parent method');
 };
 function ChildConstructor() {
     ParentConstructor.call(this);
     this.childProperty = 'child value';
 }
 ChildConstructor.prototype = Object.create(ParentConstructor.prototype);
 ChildConstructor.prototype.constructor = ChildConstructor;
 let childObject = new ChildConstructor();

在这个例子中,ChildConstructor通过原型链继承了ParentConstructor的属性和方法。

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值