乐趣区

关于前端:day8-深入理解对象的私有和静态属性

jiezi

JavaScript 的对象构建和面向对象的编程模式
一个对象对外分享的，他人能够获取到的 公开属性
不对外裸露的，他人不能轻易获取的 公有属性
动态属性，属于类，而不是独自属于对象的。
蕴含公开属性和公有属性。
如何创立公有属性？
与 Java 不一样，当用 JavaScript 创立的一个对象，无论是应用 class、字面量、还是函数结构式，个别状况下，在定义了属性和办法后就能够公开调用，并没有限度。
用 # 符号创立公有属性，来定义一个公有的属性。

class WidgetD {
  #appName;
  constructor(){this.#appName = "天气利用";}
  getName(){return this.#appName;} 
}

var widget4 = new WidgetD();
console.log(widget4.appName); // 返回 undefined
console.log(widget4.getName()); // 返回“天气利用”

在 # 问世之前，工程师们是怎么实现公有属性的。次要有闭包、WeakMap 和 Symbol 这三种形式。
用闭包和 IIFE 创立公有属性
首先，咱们申明一个 WidgetE 的变量，而后再来创立一个立刻被调用的函数式表白（IIFE），在这个表白外面，咱们先给外部的 appName 变量赋值为“天气利用”。之后，在函数中咱们再给 WidgetE 赋值，这里赋值的是一个对象，外面咱们定义了 getName 的办法，它返回的就是内部函数的 appName。

// 对象字面量
var WidgetE;
(function(){
  var appName = "天气利用";
  WidgetE = {getName: function(){return appName;}
  };
}());
WidgetE.appName; // 返回 undefined
WidgetE.getName(); // 返回“天气利用”

先定义一个函数，在外面申明一个变量 appName，而后创立一个 getName 的表达式函数，返回 appName。

// 构造函数
function WidgetF() {
  var appName = "天气利用";
  this.getName = function(){return appName;}
}
var widget6 = new WidgetF();
console.log(widget6.appName); // 返回 undefined
console.log(widget6.getName()); // 返回“天气利用”

这个例子中还有一个问题，就是咱们每次在创立一个新对象的时候，公有属性都会被从新创立一次，这样就会造成反复工作和冗余内存。解决这个问题的方法就是把通用的属性和性能赋值给 prototype，这样通过同一个构建者创立的对象，能够共享这些暗藏的属性。

function WidgetG() {
  var appName = "天气利用";
  this.getName = function(){return appName;}
}
WidgetG.prototype = (function(){
  var model = "反对安卓";
  return {getModel: function(){return model;}   
  }
}());
var widget7 = new WidgetG();
console.log(widget7.getName()); // 返回“天气利用”console.log(widget7.getModel()); // 返回“反对安卓”

用 WeakMap 创立公有属性
Set 用的是汇合的数据结构，Map 用的是字典的数据结构。
咱们首先申明了一个 WidgetG 变量。接下来，建设一个块级作用域，在这个作用域里，咱们再申明一个 privateProps 的 WeakMap 变量。而后咱们给 WidgetG 赋值一个函数申明，在外面给 WeakMap 的键名设置为 this，键值外面的 appName 为“天气利用”。下一步，咱们基于 WidgetF 的 prototype 来创立一个 getName 办法，外面返回了 appName 的值。

var WidgetH;
{let privateProps = new WeakMap();
  
  WidgetH = function(){privateProps.set(this,{appName : "天气利用"});
  }
  
  WidgetH.prototype.getName = function(){return privateProps.get(this).appName;
  }
}
  
var widget8 = new WidgetH();
console.log(widget8.appName); // 返回 undefined
console.log(widget8.getName()); // 返回“天气利用”

用 Symbol 创立公有属性
和上个例子类似，这里咱们建设了一个块级作用域，但区别是咱们把 privateProps 从 WeakMap 换成了 Symbol 来实现公有属性。

var WidgetI;
{let privateProps = Symbol();
  
  WidgetI = function(){this[privateProps] = {appName : "天气利用"};
  }
  
  WidgetI.prototype.getName = function(){return this[privateProps].appName;
  }
}
  
var widget9 = new WidgetI();
console.log(widget9.getName()); // 返回“天气利用”

如何创立公开属性？
创立公开动态属性
static: 动态属性只能作用于 class 自身。
创立公有动态属性
其实就是把 # 符号和 static 关键词相加来应用。

退出移动版