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

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 关键词相加来应用。

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据