快捷導(dǎo)航

詳解JavaScript如何設(shè)置私有屬性

更新時(shí)間：2024年03月24日 16:42:57 作者：zbsnzj

這篇文章主要為大家詳細(xì)介紹了在JavaScript中如何設(shè)置私有屬性,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以參考下

ES6之前的私有屬性模擬

1、構(gòu)造函數(shù)形式創(chuàng)建對(duì)象

function Person(name) {
  let _name = name; // 私有屬性
 
  this.getName = function() {
    return _name;
  };
 
  this.setName = function(newName) {
    _name = newName;
  };
}
 
let person = new Person('Alice');
console.log(person.getName()); // Alice
person.setName('Bob');
console.log(person.getName()); // Bob
// console.log(person._name); // 這會(huì)報(bào)錯(cuò)，因?yàn)開(kāi)name是私有的

在這個(gè)例子中，_name是一個(gè)私有屬性，因?yàn)樗窃诤瘮?shù)作用域內(nèi)定義的，外部無(wú)法直接訪問(wèn)。

2、字面量形式創(chuàng)建對(duì)象

let obj = (function() {
  let privateVar = 'I am private';
 
  return {
    publicMethod: function() {
      console.log(privateVar);
    }
  };
})();
 
obj.publicMethod(); // 正確訪問(wèn)私有變量
// console.log(obj.privateVar ); // 這會(huì)報(bào)錯(cuò)，因?yàn)閜rivatVvar是私有的

在這個(gè)例子中，privatVvar是一個(gè)真正的私有變量，因?yàn)樗窃谝粋€(gè)立即執(zhí)行函數(shù)表達(dá)式（IFEe）的作用域內(nèi)定義的，外部代碼無(wú)法直接訪問(wèn)。我們通過(guò)返回的對(duì)象中的publiMmethod方法來(lái)暴露對(duì)privatVvar的訪問(wèn)。

ES6中創(chuàng)建私有屬性

class Person {
  #name; // 私有屬性
 
  constructor(name) {
    this.#name = name;
  }
 
  getName() {
    return this.#name;
  }
 
  setName(newName) {
    this.#name = newName;
  }
}
 
let person = new Person('Alice');
console.log(person.getName()); // Alice
person.setName('Bob');
console.log(person.getName()); // Bob
// console.log(person.#name); // 這會(huì)報(bào)錯(cuò)，因?yàn)?name是私有的