当前位置: 首页 >文章 > 探秘隐藏在对象中的get和set方法
收藏
分享

探秘隐藏在对象中的get和set方法

举报李游Leo李游Leo发布于 2020-05-081670阅读3点赞
应该如何使用get和set方法...

不知道大家有没有注意过对象中的一些通用方法,例如所有所有的对象都有 toString、constructor 等等一些方法。

当然如果要仔细看的话,大家可以:

var a = {};

console.log(a);

我们可以清晰的看到他有很多的内置方法。当然,也可以看到最下面有两个比较怪的方法 get 和 set ,只要是对象就可以找到这两个方法,但是究竟怎么使用这两个方法呢?

我自己研究了半天,发现可以这样使用,就拿最简单的对象 json 来举例。

var Json = {

      set Leo(value){

            console.log(value)

      }

};

Json.Leo = 'liyou' //'liyou'

使用起来你会发现非常的怪异, 这个东西看起来像个函数,但是又必需赋值才能用。我们理解起来大概就是,只要一赋值,这个属性就被从新赋予新的东西,而「这个」则是执行了这个函数。

那么,到底他是不是函数呢?我们来继续探索一下这个 set 。

typeof Json.Leo //undefined

Json.Leo() //Error:Json.Leo is not a function

也就是说,「这个」东西不是作为他的私有属性存在,而「这个」也不是函数。

继续实验的话,会发现「这个」东西只可以传一个参数。

var Json = {

         set Leo(value,nextValue){ //Uncaught SyntaxError: Setter must have exactly one formal parameter.

         console.log(argument[0])

        }

};

Json.Leo = 'liyou'

代码提示一个只允许使用一个参数,也是说他只支持一个参数。当然,如果我们想传很多的话,似乎也只能通过 json 。

var Json = {

       set Leo(...val){ //Uncaught SyntaxError: Setter function argument must not be a rest parameter

       console.log(val)

       }

};

Json.Leo = 'liyou'

不支持 ES6 的不定数组参,但是支持 arguments 。

var Json = {

      set Leo(val){

            console.log(arguments[0])

       }

};

Json.Leo = 'liyou' //'liyou';

而 get 方法和他很接近,使用起来就像一个私有的属性用起来一样。

例如:

var Json = {

      set Leo(val){

           console.log(arguments[0])

      },

      get Leo(){

           console.log('liyou')

       }

};

Json.Leo //'liyou';

当然我们可以看出来,如果赋值就会走 set ,如果没有赋值就会走 get 。

值得一提的是, get 方法是不允许有参数的,一旦里面放入一个参数,就会直接报错。

虽然可以顺利使 get 方法,但是如果我们想要找到「这个」东西到底,结果是我们依然找不到他。

Json.Leo //'liyou'

typeof Json.Leo // undefined

简而言之,一个内置的函数体可以使用,但是不能当作正常的一个私有属性来判断其数据类型。

那么,如果这个函数体碰上了真正的私有属性会变称什么样呢?

例如:

var Json = {

      get Leo(){

            return 10;

      },

      Leo:20

};

console.log(Json.Leo)?

答案是 undefined 。其实也不难怪,因为似乎 js 也不知道你拿的是内置函数体还是私有属性,而且似乎本来性质也不一样,所以到头来也只能给你一个 undefined 。

当然这里面的 this 还是指向对象本身的。

例如:

var Json = {

      get Leo(){

            return this

      }

};

Json.b = Json.Leo//

这个时候 json 下面就有无穷无尽的 b ,就像 window 下面有无穷的 window 一样。

值得一提的是,「这个」东西只能手动的在写对象的时候写到里面,而不能通过赋值去给予。

例如:

var a = {};

a['set Leo'] = function(){}//

这里面的 set 和上文的 set 不是一个东西。

当然 json 中的 get/set 也可以循环使用。

例如:

var Json = {

      get Leo(){

           return {

                  get isTeacher(){

           console.log('liyou')  

           }  

       }

      }

}

Json.Leo.isTeacher //'liyou'

「这个」东西不能在一般的函数中使用。

比如, unction show()} // 报错。虽然 new show() 里面有这个内置函数,但是还是不能使用。

但是却可以在 ES6 中的 class 对象中使用。

例如:

class Leo {

constructor() {

}

get show() {

return 'liyou';

}

set show(value) {

console.log('liyou: '+value);

}

}

let inst = new Leo();

inst.show = 123;

// liyou: 123

inst.show

// 'liyou'

因为class 类本身也属于函数对象,所以函数对象中有这个 get/set 内置函数,就不奇怪了。

0条评论
别默默看啦~登录/注册一起参与讨论吧~

暂无评论

请选择举报理由

违反法律法规

侵犯个人权益

有害网站环境

更多训练营>>

为你推荐 · 训练营(全勤打卡报名费全额返累计全额返用户133,637人)

电商海报设计训练营
距离开班仅剩9天66人已报名
【5月】零基础手绘插画训练营
距离开班仅剩9天54人已报名
【5月】零基础动态表情包创作训练营
距离开班仅剩26天15人已报名
特惠
充值
7折购
今日还在继续学习的你,太棒了!
7
折扣券可用于
年费无限VIP
立 即
使 用
此活动优惠不可与其他活动叠加使用
有效期:000000
消息
登录即可查看消息记录
建议
意见
官方
客服
在线咨询客服热线

您可以与在线客服进行沟通获得帮助

工作日:9:00~22:00节假日:9:00~18:00

联系在线客服

您可以电话联系客服进行沟通获得帮助

工作日:9:30~18:30

400-862-9191
虎课
积分
免费学习89000+个教程!
配套素材、源文件一键下载!
昨日学员已学习了27,078
并提交了210份作业!
登录后立即学习!
loading
微信扫码关注即可登录
您需要同意协议才可以进行登录
登录虎课网,每天免费学课程全站 89000+ 视频会员教程 | 每日可免费学 1
为确保账户信息安全
请先进行真实姓名验证后进行充值付款
立即验证