对象直接量内方法的写法

快乐打工仔 分类:实例代码

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

随着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详解一章节。

对象直接量内方法的写法,这样的场景在实际项目中还是用的比较多的,关于对象直接量内方法的写法就介绍到这了。

回复

我来回复
  • 暂无回复内容