Javascript创建对象方式总结
栏目: JavaScript · 发布时间: 6年前
内容简介:在JavaScript中, 对象向我们提供了一种存储,操作,并在网络中传输数据的方式。同时,把对象当成键值对的集合,给我们带来了一种最常用的创建JavaScript对象的方法。在JavaScript中,这是创建对象最简单的方式。语法如下:这种创建对象的方式,类似于在其他面向对象的语言中创建对象,如Java。顺便说一下,从ES6开始,类在JavaScript中是原生存在的,可以通过定义类来创建对象。使用
在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关键字执行了以下步骤:
- 调用函数
-
修改
this关键字指向,将该函数的this指向一个新对象 - 将新对象的原型(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")
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- JavaScript对象与创建对象的方式
- 【9】JavaScript 面向对象高级——对象创建模式
- JS学习笔记(第六章)(面向对象之创建对象)
- JavaScript基础学习——面向对象(对象创建之工厂模式)
- 创建对象、原型、原型链
- 从创建对象到 ConcurrentHashMap
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
现代前端技术解析
张成文 / 电子工业出版社 / 2017-4-1 / 79.00元
这是一本以现代前端技术思想与理论为主要内容的书。前端技术发展迅速,涉及的技术点很多,我们往往需要阅读很多书籍才能理解前端技术的知识体系。《现代前端技术解析》在前端知识体系上做了很好的总结和梳理,涵盖了现代前端技术绝大部分的知识内容,起到一个启蒙作用,能帮助读者快速把握前端技术的整个脉络,培养更完善的体系化思维,掌握更多灵活的前端代码架构方法,使读者获得成为高级前端工程师或架构师所必须具备的思维和能......一起来看看 《现代前端技术解析》 这本书的介绍吧!