Js创建对象的方式
时间:2022-07-24
本文章向大家介绍Js创建对象的方式,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
Js创建对象的方式
Js
创建对象的方式,这里的对象除了指Js
内置Object
对象之外还有更加广义上的面向对象编程中的对象。
字面量方式
对象字面变量是对象定义的一种简写形式,能够简化创建包含大量属性的对象的过程。
var obj = {
a: 1,
b: function(){
return this.a;
}
}
console.log(obj); // {a: 1, b: ƒ}
在ES6
中使用字面量创建对象时还可以配合Spread
操作符与解构赋值使用。
var o1 = {a: 1, b: 11}
var o2 = {c: 111, d: 1111}
var o3 = {...o1, ...o2}
var {a, b} = {a: 1, b: 2}
console.log(o3); // {a: 1, b: 11, c: 111, d: 1111}
console.log(a, b); // 1 2
Object构造函数
使用Object
构造函数创建对象使用与字面量创建相同,但是需要单独指定内部成员。
var obj = new Object();
obj.a = 1;
obj.b = function(){
return this.a;
}
console.log(obj); // {a: 1, b: ƒ}
Object.create
Object.create()
方法创建一个新对象,使用现有的对象来提供新创建的对象的__proto__
。
var obj = Object.create(null); // 创建一个没有原型链指向的对象
var obj = Object.create(Object.prototype); // 等同于 new Object()
obj.a = 1;
obj.b = function(){
return this.a;
}
console.log(obj); // {a: 1, b: ƒ}
工厂模式
构造创建对象的工厂,调用即产生对象,能够减少重复代码,减小代码冗余。
function factory(){
var o = new Object();
o.a = 1;
o.b = function(){
return this.a;
}
return o;
}
var obj = factory();
console.log(obj); // {a: 1, b: ƒ}
构造函数
使用new
关键字可以简化创建多个属性值相同的对象的操作,并能够显式获取对象类型。
function _object(){
this.a = 1;
this.b = function(){
return this.a;
}
}
var obj = new _object();
console.log(obj); // _object {a: 1, b: ƒ}
console.log(obj instanceof _object); // true
原型模式
使用原型创建对象的方式,可以让所有对象实例共享它所包含的属性和方法。
function _object(){}
_object.prototype.a = 1;
_object.prototype.b = function(){
return this.a;
}
var obj = new _object();
console.log(obj); // _object {}
console.log(obj.a); // 1
console.log(obj.b()); // 1
console.log(obj instanceof _object); // true
构造函数和原型组合
构造函数和原型组合的方式解决可以解决原型模式下不能传递参数的问题,也能解决在构造函数模式下不能共享实例方法的问题。
function _object(){
this.a = 1;
}
_object.prototype.b = function(){
return this.a;
}
var obj = new _object();
console.log(obj); // _object {a: 1}
console.log(obj.a); // 1
console.log(obj.b()); // 1
console.log(obj instanceof _object); // true
每日一题
https://github.com/WindrunnerMax/EveryDay
参考
https://juejin.im/post/5b150fcf518825139b18de11
https://juejin.im/entry/58291447128fe1005cd41c52
https://www.cnblogs.com/shirliey/p/11696412.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 移动直播集成问题
- TRTC功能咨询
- TKE集群pod镜像拉取失败定位思路
- Android内存管理(JVM 、DVM(dalvik) 、ART简单介绍)
- WordPress 站点地址被恶意篡改的防护方案讨论
- 猿实战06——不一样的地址管理
- Redis常用命令详解
- three.js 制作逻辑转体游戏(下)
- ROS机器人TF基础(坐标相关概念和实践)
- (在模仿中精进数据可视化01) 全国38城居住自由指数可视化
- js字符串/数组常用方法总结
- ThinkPHP5+mpdf 实现富文本生成 PDF文件
- nodejs使用readline逐行读取和写入文件
- go语言逐行读取和写入文件
- SpringBoot中Tomcat是如何启动的