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 类一章节。

JavaScript 创建对象的方式,这样的场景在实际项目中还是用的比较多的,关于JavaScript 创建对象的方式就介绍到这了。

回复

我来回复
  • 暂无回复内容