对象直接量内方法的写法

对象直接量内方法的写法属于前端实例代码，有关更多实例代码大家可以查看。

随着ES2015版本的发布，很多新的语法结构被解锁。

本文主要介绍一下对象直接量内新增的方法写法。

首先看一段代码实例：

let antzone={
  webName:"前端教程网",
  show:function(){
    console.log(this.webName);
  }
}
antzone.show();

代码运行效果截图如下：

上述代码是ES2015之前对象直接量内方法的书写方法。

下面再来介绍一下ES2015新增的书写方法。

let antzone={
  webName:"前端教程网",
  show(){
    console.log(this.webName);
  }
}
antzone.show();

代码运行效果截图如下：

上面的代码就是ES2015新增的写法，可以看到方法的定义进行了简化。

var webName="JavaScript教程"; 
let antzone={
  webName:"前端教程网",
  show:()=>{
    console.log(this.webName);
  }
}
antzone.show();

代码运行效果截图如下：

ES2015新增箭头函数，对象直接量内的方法采用箭头函数方式。

需要特别注意的是，调用方法的打印结果是"JavaScript教程"，为什么不是"前端教程网呢"。

下面简略介绍一下this的指向问题。

一.普通函数情况：

有一条规则，函数中的this总是指向调用此函数的对象。

代码如下：

let obj={
  address:"青岛市南区",
  func:function(){
    console.log(this.address)
  }
}
obj.func()

代码运行效果截图如下：

obj对象调用func方法，打印结果是"青岛市南区"。

很明显，this指向obj对象，印证了this指向方法调用者这个结论。

如果方法没有显式对象调用，分两种情况：

（1）.非严格模式下，函数中的this指向window对象。

（2）.严格模式下，函数中的this为undefined。

二.箭头函数情况：

箭头函数this与普通函数中的this相比有了巨大改变。

它自身并没有this，但是可以捕获它声明时，所在作用域的this。

下面再来回顾一下前面的代码：

var webName="JavaScript教程"; 
let antzone={
  webName:"前端教程网",
  show:()=>{
    console.log(this.webName);
  }
}
antzone.show();

大家知道上述代码的打印结果是"JavaScript教程"。

由于对象直接量这个大括号并不能生成一个作用域，所以箭头函数中的this不是指向antzone。

于是上溯到全局作用域，所以this指向window对象。

相关阅读：

（1）.箭头函数可以参阅JavaScript 箭头函数一章节。

（2）.this可以参阅JavaScript this详解一章节。