JavaScript 创建对象的方式

JavaScript 创建对象的方式属于前端实例代码，有关更多实例代码大家可以查看。

创建对象是JavaScript中最为基础的操作之一。

随着ES版本的演化，创建对象的方式也不断增加。

下面将通过代码实例总结一下JavaScript中创建对象的几种方式。

一.对象直接量方式：

此方式最为简单，也最容易被学习者所接受。

代码实例如下：

let obj={
  webName:"前端教程网",
  age:4,
  address:"青岛市南区"
}
console.log(obj.webName);

代码运行效果截图如下：

代码创建一个对象直接量，使用方式非常的简单。

二.构造函数创建对象：

通过构造函数可以创建基于它的对象实例。

代码实例如下：

function Antzone(webName,age){
  this.webName=webName;
  this.age=age;
  this.show=function(){
    console.log(this.webName+"成立"+this.age+"年了");
  }
}
let antzone=new Antzone("前端教程网",6);
antzone.show();

代码运行效果截图如下：

上面代码通过构造函数创建一个对象实例antozne。

构造函数中的this都会指向对象实例，更多内容参阅如下两篇文章：

（1）.JavaScript 构造函数一章节。

（2）.JavaScript new 运算符一章节。

三.Object.create方法创建对象：

此方法使用的频率相对较少，因为它是ES5新增，具有一定的兼容性问题。

或者说不少朋友还没有习惯于使用它，使用它同样可以创建对象。

代码实例如下：

let protObj={
  url:"http://www.pipipi.net"
}
let obj=Object.create(protObj);
console.log(obj.url);

代码运行效果截图如下：

Object.create方法可以创建一个以protObj为圆形的对象。

于是上面的代码可以打印出url属性值。

关于Object.create方法可以参阅Object.create()一章节。

四.通过class类创建对象：

类是ES2015新增，如果有其他面向对象语言基础，将会对它很熟悉。

与Object.create方法类似，当前它的使用频次相对较少。

但是当前ES中的class类依然是基于prototype原型，可以认为是语法糖。

代码实例如下：

class Antzone {
  constructor(webName, age) {
    this.webName = webName;
    this.age = age;
  }
}
let antzone=new Antzone("前端教程网",6);
console.log(antzone.webName);

代码运行效果截图如下：

上面仅是一个简单的代码演示，更多内容参阅JavaScript class 类一章节。