JavaScript面向对象成员与共享变量机制详解
本文通过具体代码实验解析JavaScript中对象成员与共享变量的行为。详细阐述this关键字在不同作用域下的指向规则,以及使用prototype定义成员时,简单变量与对象变量在实例间的共享差异。通过断点调试对比,揭示引用类型与值类型在原型继承中的内存表现,帮助开发者正确理解并应用JavaScript的面向对象特性。
JavaScript对象成员与this指向实验
1)JavaScript对象成员实验:
代码如下:
var f = function d() {
this.a = "a"; /*这句运行后不存在f.a也不存在d.a存在一个window.a*/
var b = "b"; /*局部变量*/
};
var o = { ff: function () {
var a = "a"; /*局部变量*/
this.b = "b"; /*这句运行后存在o.b*/
}
};
function Man(){
this.age = 30;
};
Man.prototype.sex = 1;
Man.prototype.name = function () {
};
debugger; /*第一处断点*/
f();
o.ff();
var m = new Man();
debugger; /*第二处断点*/ 第一处断点时对象成员的存在情况:

第二处断点时对象成员的存在情况:

总结关于JS函数的规则:this指向所在函数外最近一层的对象,而嵌套函数内部函数中的this指向window对象。
JavaScript对象共享变量机制解析
总结JS的OO特性:使用this.成员方式定义对象的成员,利用JS特有的动态性,类与对象实例存在差异;而.prototype.成员定义成员是经典的定义方式,类与对象实例是统一的。\n2)JavaScript对象共享性成员变量实验:
代码如下:
function Ghost(_name) {
this.name = _name;
this.age = 1000;
}
Ghost.prototype.setName = function (_name) {
this.name = _name;
}
function Man(_name){
this.age = 30;
this.ghost = new Ghost("实例变量" + _name);
};
Man.prototype.ManGhost = new Ghost("共享变量");
var a = new Man("a");
var b = new Man("b");
var amg = a.ManGhost.setName("我只设置a的共享变量");
debugger; /*第一处断点*/
var ag = a.ghost;
var bg = b.ghost;
var bmg = b.ManGhost;
debugger; /*第二处断点*/ 运行到第一片断点:

简单变量与对象变量的差别
使用.prototype.定义的成员,如果该成员为简单变量,则每个对象实例都有一个各自的副本。(例如:Man.prototype.noObejctVar)
使用.prototype.定义的成员,如果该成员为对象变量,则每个对象实例都共享同一个对象副本。(例如:Man.prototype.ManGhost)
为什么有这样的差别呢?单从ManGhost变量与noObjectVar变量它们都是使用.prototype.定义的成员是没有差别的,只是它们类型不同,表示它们访问和使用用它们的方式是不同的,只是ManGhost变量内存放的是new出来的对象,而noObjectVar变量内存放的是值(或某种值的引用),换句话说ManGhost存放的是对象的引用,通过这个引用可以操作这个对象,noObjectVar变量内存放也可是某种值引用,可是无法使用这个引用来操作它.
从另一个视角看
noObjectVar变量存放的是字串对象的引用.
a.noObjectVar="新字符串a";
这表示noObjectVar从原来的存放字符串对象引用,指向新字符串对象引用.(也可以说新的字符串对象覆盖原字符串对象)
a.ManGhost=new Ghost("a");
b.ManGhost=new Ghost("b");
这样a与b就不存在共享对象的问题了.不过这样就存在另一个问题.prototype.ManGhost时定义新建的对象就浪费了.不过这样使用.prototype.是错误的.
使用.prototype.定义成员函数及定义共享变量才是正确的用法.
使用javascript来正确的定义类请见:[技术备忘录]javascript来定义类的规范
JavaScript异步发送HTTP请求时怎么优雅地处理错误
2026-11-05 17:10:44
5款主流JS在线运行工具对比:CodePen、JSFiddle与StackBlitz怎么选
2026-11-05 17:04:04
JavaScript入门书籍避坑:这些书不适合初学者
2026-11-05 16:31:15
JS使用Math.round实现保留两位小数的原理与代码
2026-11-05 15:35:55
JavaScript 原生 Date 对象怎么实现日期加减
2026-11-05 14:30:00
