es6 类的私有属性_如何在es6类中声明私有变量和私有方法

in es5 we use constructor function

function Person(name,gender){

var initial =""; // we use var key word to make variable private

function getNameWithInitial(){ // this is the private method to get name with initial

console.log(this);

initial = this.gender ==="male"?"Mr. ":"Mrs. ";

return initial + this.name;

}

this.name = name;

this.gender = gender;

this.getName = function(){

return getNameWithInitial.call(this);

}

}

var manas = new Person("Manas","male");

console.log(manas.getName());

My question is how to declare a private variable and private method in es6 class

解决方案

One way to achieve this is using another ES2015 feature known as modules.

You may already be familiar with AMD modules, or commonJS modules (used by Nodejs). Well ES6 / ES2015 brings a standard for JS - we'll call them ES6 modules but they are part of the JS language now. Once you have modules, you have the ability to do information hiding for both private functions and object variables. Bear in mind, only what you "export" is visible to client calling code.

Lets work through your example code. Here is a first cut:

person.js

const getNameWithInitial = function () {

let initial = this._gender === 'male' ?

'Mr. ' :

'Mrs. ';

return initial + this._name;

}

export class Person {

constructor(name, gender) {

this._name = name;

this._gender = gender;

}

get name() {

return getNameWithInitial.call(this);

}

}

}

client.js

import {Person} from './person';

const manas = new Person('Manas', 'male');

console.log(manas.name); // this calls what was your getName function

Now, the getNameWithInitial function is effectively private, as it is not exported, so client.js cannot see it.

However, we still have a problem for the Person class, since this is exported. At the moment you can just walk up to manas object and do:

manas._name = 'Joe'

With properties like _name, we can combine modules and symbols. This is a powerful yet lightweight information hiding technique available with ES6+/ES2015.

Symbol is a new built-in type. Every new Symbol value is unique. Hence can be used as a key on an object.

If the client calling code doesn't know the symbol used to access that key, they can't get hold of it since the symbol is not exported.

Let's see our modified code to make use of symbols and modules to hide Class attributes.

person.js

const s_name = Symbol();

const s_gender = Symbol();

const getNameWithInitial = function () {

let initial = this[s_gender] === 'male' ?

'Mr. ' :

'Mrs. ';

return initial + this[s_name];

}

export class Person {

constructor(name, gender) {

this[s_name] = name;

this[s_gender] = gender;

}

get name() {

return getNameWithInitial.call(this);

}

}

So, now a client cannot just do:

manas._name = 'Joe'

because _name is not being used as the key for the name value.

However, symbols are exposed via reflection features such as Object.getOwnPropertySymbols so be aware they are not "completely' private using this technique.

import {Person} from './person';

const manas = new Person('Manas', 'male');

const vals = Object.getOwnPropertySymbols(manas);

manas[vals[0]] = 'Joanne';

manas[vals[1]] = 'female';

Takeaway message - Modules in general are a great way to hide something because if not exported then not available for use outside the module, and used with privately stored Symbols to act as the keys, then class attributes too can become hidden (but not strictly private). Using modules today is available with build tools eg. webpack / browserify and babel.

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值