JavaScript 面向对象编程：构造函数与原型链详解

JavaScript 面向对象基础

本文通过具体代码示例解析JavaScript面向对象编程的核心概念，旨在为读者提供清晰的参考与学习路径。

JavaScript 面向对象基础

• this关键字：在对象方法中，this代表当前调用该方法的对象实例，其作用类似于Python中的self。
• 对象创建机制：使用`new 函数()`语法来实例化对象。添加`new`关键字并调用构造函数，等价于在内存中创建一个新的对象实例。
• 原型定义：通过`类名.prototype = {方法}`的方式，为类定义共享的原型方法。

构造函数与内存问题

构造函数实现示例：

<script>
function Foo(n){
  this.name = n;
  this.sayName = function(){
    console.log(this.name)
  }
}
var obj1 = new Foo('jb51');
obj1.name
obj1.sayName()
var obj2 = new Foo('本站');
obj2.name
obj2.sayName ()
</script>

运行结果分析：

注意：当使用构造函数直接为每个实例定义方法时（如obj1和obj2），每个对象内存中都会独立调用并存储`this.sayName`，这会导致不必要的内存损耗。此外，创建obj对象时传入参数，使得`obj1.name`的值等于传入的字符串（如'we'）。调用`obj1.sayName()`时，方法内部会访问并输出obj1的name属性值。

原型链与内存优化

原型链实现示例：

<script>
function Foo(n){
  this.name = n;
}
// Foo的原型
Foo.prototype = {
  'sayName': function(){
  console.log(this.name)
  }
}
var obj1 = new Foo('欢迎访问');
obj1.name
obj1.sayName()
var obj2 = new Foo('www.jb51.net');
obj2.name
obj2.sayName()
</script>

运行结果分析：

注意：在原型模式下，每个对象内部只封装了自身的属性（如name）。当调用`obj1.sayName()`时，JavaScript引擎会先在Foo类的实例中查找该方法，若未找到，则沿着原型链在Foo的原型对象中查找sayName方法。这种方式实现了方法的共享，优化了内存使用。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。