JavaScript 封装问题 -- JavaScript -- IT技术博客大学习 -- 共学习共进步！

您现在的位置：首页 --> JavaScript --> JavaScript 封装问题

JavaScript 封装问题

浏览:2258次出处信息

为什么会用这样一个题目呢，这是要说封装的什么问题，本文并不讲高深的封装理论，只是解决一个小问题。

问题来源

今天在百度知道上闲逛，遇到一个网友的问题，问题如下，问题的地址见这里：

百度知道问题截图

下面先不看看其他网友给的答案：

百度知道网友回答截图

网友大部分回答不能一起定义，那么我们来分析下为什么这样做是错的，然后给出相应的解决办法。

重现问题

先来说说为什么调用出错，我在自己的浏览器里重现了问题，处于实验并未全部复原代码，并且用到了全局变量哦:

function Dialog(){

Dialog.prototype = {

init:function(){

console.log("ok");

}

var a = new Dialog();

a.init();

下面是火狐提示的错误：

火狐下提示错误

分析问题

init不是一个方法，这是为什么呢，我们将调用代码修改下，出于演示，并未遵循JsLint代码规范：

var a = new Dialog();

typeof a.init;

代码执行结果

结果显示为undefined，也就是init没有被定义，或者说在求值过程中未找到init标识符的值，这是因为在调用函数时函数里面的内容才会被解析执行，所以在调用new Dialog()，时其内部的代码尚未执行，所以设置Dialog的原型的语句尚未执行，通过这个例子可以看出绑定this的prototype的过程是在执行构造函数内部代码之前，可以用下面的代码来解释下：

function Dialog(){

var that = Object.create(Object.getPrototypeOf(this));

Dialog.prototype = {}

}

“巧妙解决”

很明显获取原型时尚未设置原型，但当我们再次调用new 时情况将发生改变:

var a = new Dialog();

var b = new Dialog();

typeof b.init;

代码执行结果

在此调用时奇迹发生了，我们看到第二次调用时成功获取了值，只有第一次时值是未获去，那我们是不是可以改造下我们的dialog函数呢：

function Dialog(){

Dialog.prototype = {

init:function(){

console.log("ok");

}

new Dialog();

var a = new Dialog();

typeof a.init;

我们只需先调用下构造函数便解决了问题，如果你觉得上面的代码还是有悖于封装我们可以再做改变：

var Dialog = (function(){

function Dialog(){

Dialog.prototype = {

init:function(){

console.log("ok");

}

new Dialog();

return Dialog;

}());

问题中的问题

上面真的解决问题了吗，你难道没有疑问呢，如果你已经看出问题所在在了，那你也一定能想出解决办法，而且你应该是一个高手，那么让我们看看这样巧妙的解决办法有什么问题，为此我们来构造下面的代码：

var a = new Dialog();

typeof a instanceof Dialog;

也许你会问为什么会这样写，也许下面的结果更让你吃惊：

代码执行结果

结果为false，为什么我的a不是Dialog的实例呢，我的a明明是Dialog创建的，要想搞清这个问题我们先得说清楚 instanceof关键字的工作原理，当我们调用类似a instanceof Dialog 这样的语句时，解释器是怎么判断a是Dialog创建的对象的呢，原来解释器是判断a的原型是否为Dialog的prototype属性所指向的对象也就是说如果a的原型和Dialog的prorotype属性指向同一个对象就认为a是Dialog的对象，当然在判断时并不是至判断a的的原型，而是判断原型链中的每个对象，例如：

var a = [];

a instanceof Array;

a instanceof Object;

上面的两条语句都会返回true，因为a的原型链中包含这两个对象。

而上面我们的代码为什么结果为false呢，那是因为当我们每次调用Dialog构造函数时都会在内部重写Dialog的原型，而已经创建的对象的原型会指向原来的原型对象，解释器在判断两个对象是否相等时，要判断两个对象是否引用同一块地址，而不是两个对象是否有相同的属性和方法，所以上面出现false的原因就很清楚了，所以上面的解决办法就出现问题了，而且是很大的问题。显然这种方法行不通。