JavaScript 私有属性实现教程

JavaScript被很多人认为并不是一种面向对象语言,原因有很多种,比如JavaScript没有类,不能提供传统的类式继承;再比如JavaScript不能实现信息的隐藏,不能实现私有成员。本文并不是为了打破以上误解(实际上笔者自己也有困惑),只是简单介绍几种JavaScript实现私有属性的方式,以及各自的优劣。

1. 基于编码规范约定实现方式

很多编码规范把以下划线_开头的变量约定为私有成员,便于同团队开发人员的协同工作。实现方式如下:

function Person(name){
  this._name = name;
}

var person = new Person('Joe');

这种方式只是一种规范约定,很容易被打破。而且也并没有实现私有属性,上述代码中的实例person可以直接访问到_name属性:

alert(person._name); //'Joe'

2. 基于闭包的实现方式

另外一种比较普遍的方式是利用JavaScript的闭包特性。构造函数内定义局部变量和特权函数,其实例只能通过特权函数访问此变量,如下:

function Person(name){
  var _name = name;
  this.getName = function(){
    return _name;
  }
}
var person = new Person('Joe');

这种方式的优点是实现了私有属性的隐藏,Person 的实例并不能直接访问_name属性,只能通过特权函数getName获取:

alert(person._name); // undefined
alert(person.getName()); //'Joe'

使用闭包和特权函数实现私有属性的定义和访问是很多开发者采用的方式,Douglas Crockford也曾在博客中提到过这种方式。但是这种方式存在一些缺陷:

    私有变量和特权函数只能在构造函数中创建。通常来讲,构造函数的功能只负责创建新对象,方法应该共享于prototype上。特权函数本质上是存在于每个实例中的,而不是prototype上,增加了资源占用。

3. 基于强引用散列表的实现方式

JavaScript不支持Map数据结构,所谓强引用散列表方式其实是Map模式的一种变体。简单来讲,就是给每个实例新增一个唯一的标识符,以此标识符为key,对应的value便是这个实例的私有属性,这对key-value保存在一个Object内。实现方式如下:

var Person = (function() {
    var privateData = {},
        privateId = 0;
    function Person(name) {
        Object.defineProperty(this, "_id", { value: privateId++ });
        privateData[this._id] = {
            name: name
        };
    }
    Person.prototype.getName = function() {
        return privateData[this._id].name;
    };
    return Person;
}());

上述代码的有以下几个特征:

    使用自执行函数创建Person类,变量privateData和privateId被所有实例共享;
    privateData用来储存每个实例的私有属性name的key-value,privateId用来分配每个实例的唯一标识符_id;
    方法getName存在于prototype上,被所有实例共享。

这种方式在目前ES5环境下,基本是最佳方案了。但是仍然有一个致命的缺陷:散列表privateData对每个实例都是强引用,导致实例不能被垃圾回收处理。如果存在大量实例必然会导致memory leak。

造成以上问题的本质是JavaScript的闭包引用,以及只能使用字符串类型最为散列表的key值。针对这两个问题,ES6新增的WeakMap可以良好的解决。

4. 基于WeakMap的实现方式

WeakMap有以下特点:

    支持使用对象类型作为key值;
    弱引用。

根据WeakMap的特点,便不必为每个实例都创建一个唯一标识符,因为实例本身便可以作为WeakMap的key。改进后的代码如下:

var Person = (function() {
    var privateData = new WeakMap();
    function Person(name) {
        privateData.set(this, { name: name });
    }
    Person.prototype.getName = function() {
        return privateData.get(this).name;
    };
    return Person;
}());

改进的代码不仅仅干净了很多,而且WeakMap是一种弱引用散列表, 这意味着,如果没有其他引用和该键引用同一个对象,这个对象将会被当作垃圾回收掉。解决了内存泄露的问题。

不幸的是,目前浏览器对WeakMap的支持率并不理想,投入生产环境仍然需要等待。

javascript实现私有属性私有方法代码实例

function People(name) {
  var _name = name; //私有属性
  function privateMethod() { //私有方法
    alert('private');
  }
  return{
    age: 0, //公有属性
    setName: function(name) { //公有方法
      _name = name;
    },
    getName: function() { //公有方法
      return _name;
    }
  }
}
var p =  People('zhangsan');
//p.privateMethod();
console.log(p.getName());
console.log(p.age);
p.age = 1;
p.setName('lisi');
console.log(p.getName());
console.log(p.age);

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索javascript
, 实例
, 函数
, 变量
, 闭包
属性
javascript 私有属性、javascript私有方法、javascript私有变量、javascript 私有函数、javascript 私有,以便于您获取更多的相关知识。

时间: 2024-08-02 09:41:29

JavaScript 私有属性实现教程的相关文章

javaScript 利用闭包模拟对象的私有属性_javascript技巧

JavaScript缺少块级作用域,没有private修饰符,但它具有函数作用域.作用域的好处是内部函数可以访问它们的外部函数的参数和变量(除了this和argument.内部中的函数中的this指向全局对象,argument指向内部函数的函数参数).我们可以利用这种属性来模拟面向对象中的私有属性. 复制代码 代码如下: var myObject=function(value){ var value=value || 0; return{ increment:function(num){ val

javascript使用闭包模拟对象的私有属性和方法_javascript技巧

最近因为做了一个项目,其中涉及到了js私有方法,这个概念在其语言里面是很常见的,很多语言都有private这个关键字,只要在一个类的前面加上private就表示申明了一个私有方法,但是javascript在面向对象的方面没有那么多的特征,他没有专门的private关键字,.要做到这一点就必须使用js自己的一些特性来变相的完成. 首先javascript里面有一个高级特性叫闭包,简单的说js的闭包可以理解成是一种现象或者特性,一般出现在两个函数嵌套的情况下,看例子: function a(){ v

如何在JavaScript中实现私有属性的写类方式(一)_javascript技巧

之前讨论过JavaScript中的写类方式.但没有讨论私有的实现.这篇看下. 我们知道JS中私有属性的实现本质就是 var + closure.如下 复制代码 代码如下: function Person(n, a){     // public     this.name = n;     // private     var age = a;     this.getName = function(){         return this.name;     }     this.getA

如何在JavaScript中实现私有属性的写类方式(二)_javascript技巧

上一篇写了个工具函数$class,这篇再完善以下.实现以下功能 1,继承 2,子类继承父类时,不继承父类的私有属性 复制代码 代码如下: /**  * @param {String} className  * @param {String/Function} superCls  * @param {Function} classImp  */function $class(className, superCls, classImp){     if(superCls === '') superC

超赞的动手创建JavaScript框架的详细教程

  这篇文章主要介绍了动手创建JavaScript框架的详细教程,包括DOM和各种属性的调试等各个方面,超级推荐!需要的朋友可以参考下 觉得Mootools不可思议?想知道Dojo是如何实现的?对JQuery的技巧感到好奇?在这篇教程里,我们将探寻框架背后的秘密,然后试着自己动手建立一个你所喜爱的框架的简易版本. 我们几乎每天都在使用各种各样的JavaScript框架.当你刚入门的时候,方便的DOM(文档对象模型)操作让你觉得JQuery这样的东西非常棒.这是因为:首先,对于新手来说DOM太难理

JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法_javascript技巧

1.Object类 在JS中,Object是所有类的基类,使用Object类来创建自定义对象时,可以无需定义构造函数(constructor,prototype,hasOwnProperty(property)) var per = new Object(); per.name = 'zhangsan'; per.age = ; alert(per.name + per.age); 我们想在程序中得到一个对象变量,只要能存储大量数据即可,这个时候,我们可以考虑使用Object类.Object类避

java private-java 一个类的对象访问私有属性的问题

问题描述 java 一个类的对象访问私有属性的问题 public class ModifierTest1 { public static void main( String[] args ) { A a = new A(); //System.out.println(a.s); a.f(); } } class A { private int i; private String s; public A() { i = 123; s = "hello"; } public void f(

JavaScript[对象.属性]集锦

javascript|对象 SCRIPT 标记? 用于包含JavaScript代码.? 属性? LANGUAGE 定义脚本语言? SRC 定义一个URL用以指定以.JS结尾的文件? windows对象? 每个HTML文档的顶层对象.? 属性? frames[] 子桢数组.每个子桢数组按源文档中定义的顺序存放.? feames.length 子桢个数.? self 当前窗口.? parent 父窗口(当前窗口是中一个子窗口).? top 顶层窗口(是所有可见窗口的父窗口).? status 浏览器

Javascript私有成员的实现方式

我之前买过一本书<Javascript高级程序设计> Nicholas C.Zakas 著 总体来讲这本书还是可以的,但看完这本书还留了几个问题一直困扰着我,如js中私有变量的实现,prototype等,经过自己一系列测试,现在终于弄明白了. 很多书上都是说,Javascript是不能真正实现Javascript私有成员的,因此在开发的时候,统一约定 __ 两个下划线开头为私有变量. 后来,发现Javascript中闭包的特性,从而彻底解决了Javascript私有成员的问题. functio