对象直接量内方法的写法

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

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

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

首先看一段代码实例:

[JavaScript] 纯文本查看 复制代码运行代码
let antzone={
  webName:"蚂蚁部落",
  show:function(){
    console.log(this.webName);
  }
}
antzone.show();

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201810/11/121134ho4k0mjzfikkboy2.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

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

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

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201810/11/121203w8vvvr1zv6v0qi0c.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

[JavaScript] 纯文本查看 复制代码运行代码
var webName="JavaScript教程"; 
let antzone={
  webName:"蚂蚁部落",
  show:()=>{
    console.log(this.webName);
  }
}
antzone.show();

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201810/11/121231z9l7w9l9lk7ke978.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

需要特别注意的是,调用方法的打印结果是"JavaScript教程",为什么不是"蚂蚁部落呢"。

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

一.普通函数情况:

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

代码如下:

[JavaScript] 纯文本查看 复制代码运行代码
let obj={
  address:"青岛市南区",
  func:function(){
    console.log(this.address)
  }
}
obj.func()

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201810/11/121305dizicu42vdu4dyco.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

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

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

(1).非严格模式下,函数中的this指向window对象。

(2).严格模式下,函数中的this为undefined。

二.箭头函数情况:

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

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

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

[JavaScript] 纯文本查看 复制代码运行代码
var webName="JavaScript教程"; 
let antzone={
  webName:"蚂蚁部落",
  show:()=>{
    console.log(this.webName);
  }
}
antzone.show();

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

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

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

相关阅读:

(1).箭头函数可以参阅JavaScript 箭头函数一章节。

(2).this可以参阅JavaScript this详解一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部