最近在学习JavaScript基础,在学习到面向对象编程时,学习到在JavaScript中实现模块化的方法,其中一个重要的点是如何封装私有变量。

实现封装私有变量的方法主要是:

使用构造函数

function StringBuilder() {

var buffer = [];

this.add = function (str) {

  buffer.push(str);

};

this.toString = function () {

   return buffer.join('');

};

}

// 上面这种做法有个缺点,就是每生成一个新的实例,其中的方法就会生成一个新的实例,造成内存浪费,因此做如下改进

function StringBuilder() {

this._buffer = [];

}

StringBuilder.prototype = {

constructor: StringBuilder,

add: function (str) {

this._buffer.push(str);

},

toString: function () {

return this._buffer.join('');

}

};

// 此时所有实例会共享这两个方法,不会重复生成

// 但是问题又来了,我们封装的私有变量变得不私有了,在外部可以直接修改_buffer,如

var sb = new StringBuilder();

sb._buffer = 'hello, sb';

使用立即执行函数

var module = (function() {

function StringBuilder() {

this._buffer = [];

}

StringBuilder.prototype = {

constructor: StringBuilder,

add: function (str) {

this._buffer.push(str);

},

toString: function () {

return this._buffer.join('');

}

};

function createStringBuilder() {

var _sb = new StringBuilder();

return {

add: StringBuilder.prototype.add.bind(_sb),

toString: StringBuilder.prototype.toString.bind(_sb)

};

}

return {

createStringBuilder: createStringBuilder

};

})();

console.log(module); // { createStringBuilder: [Function: createStringBuilder] }

var sb = module.createStringBuilder();

sb.add('hello');

sb.add('爱编程的小菜鸟');

console.log(sb.toString()); // hello爱编程的小菜鸟

在立即执行函数中,重点在于createStringBuilder这个函数,这个函数实现了内外对接的接口,对内保护了StringBuilder的私有成员,对外又能提供需要访问的接口,实现了真正的私有变量封装。下面我们用一个简单的例子对上面的三种方式进行对比:

// 构造函数,var1无法被外界修改,但是每生成一个实例,fn都会被拷贝

function Class1() {

var var1 = 10;

this.fn = function() {

console.log(var1);

var1 += 1;

};

}

var c10 = new Class1();

var c11 = new Class1();

console.log(c10.var1); // undefined,变量不可被访问

console.log(c10 === c11); // false

c10.fn(); // 10

c11.fn(); // 10

c10.fn(); // 11

c11.fn(); // 11

// 改进一下

function Class2() {

this._var1 = 10;

}

Class2.prototype = {

constructor: Class2,

fn: function() {

console.log(this._var1);

this._var1 += 1;

}

};

var c20 = new Class2();

var c21 = new Class2();

c20.fn(); // 10

c20.fn(); // 11

c21.fn(); // 10

c21.fn(); // 11

console.log(c20._var1); // 11,变量可被访问

console.log(c20.fn === c21.fn); // true

// 为了解决上述问题

var m = (function() {

function Class3() {

this.var1 = 10

}

Class3.prototype = {

constructor: Class3,

fn: function() {

console.log(this.var1);

this.var1 += 1;

}

};

function createClass3() {

var c3 = new Class3();

return {

fn: Class3.prototype.fn.bind(c3)

};

}

return {

createClass3: createClass3

}

})();

var c30 = new m.createClass3();

var c31 = new m.createClass3();

c30.fn(); // 10

c30.fn(); // 11

c31.fn(); // 10

c31.fn(); // 11

 

 

转自 https://www.2cto.com/kf/201812/789598.html   来源:学习编程的小菜鸟