JavaScript 创建对象的方式

2018-11-7 10:54| 作者: admin| 查看: 115| 评论: 0|来自: 蚂蚁部落

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

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

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

一.对象直接量方式:

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

代码实例如下:

[JavaScript] 纯文本查看 复制代码运行代码
let obj={
  webName:"蚂蚁部落",
  age:4,
  address:"青岛市南区"
}
console.log(obj.webName);

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/07/105622rficmnzp4tpbmm1f.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

二.构造函数创建对象:

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

代码实例如下:

[JavaScript] 纯文本查看 复制代码运行代码
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();

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/07/105705zw2649rjyzwzzrw4.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

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

(1).JavaScript 构造函数一章节。

(2).JavaScript new 运算符一章节。

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

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

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

代码实例如下:

[JavaScript] 纯文本查看 复制代码运行代码
let protObj={
  url:"http://www.softwhy.com"
}
let obj=Object.create(protObj);
console.log(obj.url);

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/07/105816baeb22bby1o2ceb0.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

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

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

四.通过class类创建对象:

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

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

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

代码实例如下:

[JavaScript] 纯文本查看 复制代码运行代码
class Antzone {
  constructor(webName, age) {
    this.webName = webName;
    this.age = age;
  }
}
let antzone=new Antzone("蚂蚁部落",6);
console.log(antzone.webName);

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/07/105913z3diue3m87zm0msg.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部