IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者

Javascript创建对象方式总结

PHP101 2019-04-08 00:55:55 累计浏览 2,086 次
本机暂存

概述

   在JavaScript中, 对象向我们提供了一种存储,操作,并在网络中传输数据的方式。同时,把对象当成键值对的集合,给我们带来了一种最常用的创建JavaScript对象的方法。

使用对象字面值(object literal)创建对象

   在JavaScript中,这是创建对象最简单的方式。语法如下:

var person = {
    firstName: 'san',
    lastName: 'zhang'
}

使用new关键字创建对象

   这种创建对象的方式,类似于在其他面向对象的语言中创建对象,如Java。顺便说一下,从ES6开始,类在JavaScript中是原生存在的,可以通过定义类来创建对象。使用new关键字创建对象,需要一个构造器函数

   使用new关键字创建对象,有如下两种形式:

使用内建的Object构造器函数

   创建对象:

var person = new Object()

   向对象添加属性:

person.firtName = 'san'
person.lastName = 'zhang'

   不推荐使用这种方式创建对象,因为会涉及到作用域解析,JavaScript会去检测构造器函数是用户创建的还是系统内建的。

使用用户定义的构造器函数

   使用Object()构造器函数创建对象的问题是每次创建完对象,都需要手工去为对象添加属性。
为了避免每次都需要手工为对象添加属性,我们可以创建一个自定义函数。首先,我们创建一个构造器函数,然后使用new关键字创建对象。

function Person(firstName, lastName) {
  this.firstName = firstName
  this.lastName = lastName
}
var person = new Person("san", "zhang")
var person1 = new Person("si", "li")

   在这种创建对象的方式中,new关键字执行了以下步骤:

  1. 调用函数

  2. 修改this关键字指向,将该函数的this指向一个新对象

  3. 将新对象的原型(prototype)绑定到函数的原型

   代码说明如下:

// new关键字
function Person(name) {
  this.name = name
}
var person = new Person("tudouya")

// 等价代码
var person1 = Object.create(Person.prototype)

原型(Prototype)方法创建对象

   使用原型方法创建对象,代码如下:

function Person(){};

Person.prototype.name = "tudouya";

原型和函数结合创建对象

   代码如下:

function Person(name){
  this.name = name;
} 
Person.prototype.getName = function(){
  return this.name
}

使用Object.create()方法创建对象

   使用这种方式创建对象,可以很方便的从一个已经存在的对象创建一个新对象,而不用使用new关键字。

   Object.create()方法基于一个已经存在的对象作为新创建对象的原型。

   使用Object.create()方法创建对象,只需要记住它需要传入两个参数。第一个参数可以是任意一个对象,该对象作为新创建对象的原型。第二个参数是可选参数,类型是对象,该对象包含向新创建对象添加的属性。

   假设有一个班级对象Class:  

var classObj = { className: "一班", studentNum: 100 }

   现在想为这个班级创建一个学生,可以使用如下方式:

var studentObj = Object.create(classObj, {
  studentName: {
    value: "小明"
  },
  studentAge: {
    value: 29
  }
})

   注意第二个参数的写法

使用Object.assign()方法创建对象

   假如我们想创建一个拥有一个以上对象的所有属性的新对象,Object.assign()方法可以实现这种目的。

   Object.assign()方法用来将一个或多个源对象的所有可枚举的属性拷贝到一个目标对象中。

   Object.assign()可以接受任意数量的对象作为参数。第一个参数是他即将创建,并且返回的参数。其余传入的对象参数,被用来将属性复制到新对象中。

   假设有如下两个对象:

var orgObj = { company: "Baidu" }
var carObj = { carName: "Kayan" }

   现在需要一个在Baidu公司开着Kayan的员工,可以使用如下方式创建对象:

var employee = Object.assign({}, carObj, orgObj)

singleton(单例)方法创建对象

   代码如下:

var person = new function(){
  this.name = "tudouya"
}

使用ES6 class创建对象

   使用ES6 class创建对象与使用用户定义的函数构造器创建对象方法类似。构造器函数被类替代,因为它遵循ES6规范。

   示例如下:

class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName
    this.lastName = lastName
  }
}
var person = new Person("san", "zhang")

参考

同分类推荐文章

  1. translateZ() (2026-06-25 21:18:56)
  2. translateY() (2026-06-25 21:17:56)
  3. translateX() (2026-06-25 21:16:01)

查看更多 前端 文章 →

建议继续学习

  1. JQuery实现Excel表格呈现 (累计阅读 48,346)
  2. 深入理解Javascript之执行上下文(Execution Context) (累计阅读 18,401)
  3. 从输入 URL 到页面加载完成的过程中都发生了什么事情? (累计阅读 15,931)
  4. 图片动态局部毛玻璃模糊效果的实现 (累计阅读 14,845)
  5. 天朝第二代身份证号码的验证机制 (累计阅读 14,760)
  6. HTML 5 的data-* 自定义属性 (累计阅读 14,348)
  7. 分享一个JQUERY颜色选择插件 (累计阅读 14,222)
  8. 什么是全栈工程师? (累计阅读 14,035)
  9. 快速排序(Quicksort)的Javascript实现 (累计阅读 11,733)
  10. 7 天打造前端性能监控系统 (累计阅读 11,186)