美文网首页让前端飞Web前端之路
探秘隐藏在对象中的get和set方法

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

作者: 前端_java爱好者 | 来源:发表于2020-07-02 14:17 被阅读0次

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

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

 var a = {};
  console.log(a);
img

我们可以清晰的看到他有很多的内置方法。当然,也可以看到最下面有两个比较怪的方法 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.

代码提示一个只允许使用一个参数,也是说他只支持一个参数。当然,如果我们想传很多的话,似乎也只能通过 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'

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

比如,function show(){set Leo(){}} // 报错。虽然 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 内置函数,就不奇怪了。

总结

对了,小编为大家准备了一套2020最新的web前端资料,需要点击下方链接获取方式

学习前端,你掌握这些。二线也能轻松拿8K以上

相关文章

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

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

  • 简析iOS程序中set和get的区别

    在面向对象的语言中,总会有set和get方法的存在。set方法和get方法到底有什么不同是我们在使用中需要注意的事...

  • JDBC的DAO设计模式

    在javaEE中,java类的属性通过getter和setter来定义,get(或set)方法去除get(set)...

  • Groovy:方法和运算符重载

    方法调用 定义的类的变量会自动生成get和set方法 赋值和取值会自动调用set和get方法 在构造函数中可以给对...

  • python3 常用方法

    对象 get set方法生成 自定义对象打印所有属性 使用方法 在自定义对象中 添加 下列方法 之后 直接pri...

  • computed深入

    计算属性set/get 计算属性 (单向)在computed属性对象中定义计算属性的方法,在页面使用{{方法名}}...

  • swift 中 set 和 get 方法

    相比 Objective-C 中的 set 和 get 方法 ,swift 中的set 和 get 要复杂一点。 ...

  • 获得参数的方式(三种)

    属性驱动 在action中成员位置,为每个属性设置get,set方法。并且get,set方法后面的名称和前台页面的...

  • cookie和seesion使用

    一、cookie在koa2中的ctx对象直接提供了cookie的set和get方法写入cookie:ctx.coo...

  • JavaScript中的getter与setter方法

    概述 get和set为对象创造了一个伪属性的定义 get方法返回一个值,set方法为一个属性赋值 get语法 例子...

网友评论

    本文标题:探秘隐藏在对象中的get和set方法

    本文链接:https://www.haomeiwen.com/subject/ckqrqktx.html