JavaScript 类与原型继承详解

作者:纸飞机

时间:2026-10-28

浏览:249

本文详解 JavaScript 中基于构造函数的类定义方法,涵盖属性与方法的添加、私有属性的实现机制以及通过原型链进行对象继承的技巧。内容包含实例创建、方法重写及属性访问域分析,帮助开发者掌握传统 JS 面向对象编程的核心概念。

文章目录

JavaScript 类的构造函数定义

首先介绍如何使用构造函数来定义类。

具体实现代码如下:

function className (prop_1, prop_2, prop_3) {
this.prop1 = prop_1;
this.prop2 = prop_2;
this.prop3 = prop_3;}

基于上述类定义,即可为类创建实例。

代码示例如下:

var obj_1 = new className(v1, v2, v3)
var obj_2 = new className(v1, v2, v3)

此外,还可以为类添加方法,本质上这仍然是函数的一种应用。


相关代码示例:

function className (prop_1, prop_2, prop_3) {
this.prop1 = prop_1;
this.prop2 = prop_2;
this.prop3 = prop_3;
this.func = function new_meth (property) {
//coding here
  }
}

关于属性访问域:

属性访问域与私有属性实现

在 JavaScript 中,通过 this 定义的属性默认具有全局访问特性,即对象内部和外部均可直接访问。例如上述代码中的 this.prop1、this.prop2 和 this.prop3 均属于此类全局属性。

若需定义私有属性,可利用 var 关键字。在后续示例中,price 将被定义为私有属性。

代码示例如下:

function Car( listedPrice, color ) {
var price = listedPrice;
this.color = color;
this.honk = function() {
console.log("BEEP BEEP!!");
    };
}

若需访问私有属性,可在对象内部定义一个返回该属性的方法。由于该方法位于对象内部,因此有权访问私有属性。通过外部调用此方法即可获取私有属性值。注意在方法内部访问私有属性时,不应使用 this. 前缀。例如,要访问 price,可在对象内添加如下方法:


代码示例:

this.getPrice = function() {
//return price here!
return price;
--------------------------------------------------------------------------------

关于继承:

原型继承与方法重写机制

采用以下语法实现继承:

代码示例如下:

ElectricCar.prototype = new Car();

可以使用 instanceof 操作符检查对象是否继承了某对象,该操作返回 true 或 false。


代码示例如下:

myElectricCar instanceof Car

接下来为继承后的对象添加新方法:


代码示例如下:

// 使用构造函数定义一个新的对象
function ElectricCar( listedPrice ) {
this.electricity=100;
var price = listedPrice;
}
// 使新对象继承Car
ElectricCar.prototype = new Car();
// 为新对象添加方法
ElectricCar.prototype.refuel = function(numHours) {
 this.electricity =+ 5*numHours;
};

关于原型对象值或方法的重写:


继承原型对象后,新对象将继承原型的值和方法。但在某些情况下,新对象的值或方法可能与父类不同,此时可通过重写原型对象的值和方法来修改新对象的行为。


代码示例如下:

function Car( listedPrice ) {
var price = listedPrice;
this.speed = 0;
this.numWheels = 4;
this.getPrice = function() {
return price;
   };
}
Car.prototype.accelerate = function() {
 this.speed += 10;
};
function ElectricCar( listedPrice ) {
 var price = listedPrice;
 this.electricity = 100;
}
ElectricCar.prototype = new Car();
// 重写accelerate方法
ElectricCar.prototype.accelerate = function() {
 this.speed += 20; 
};
// 添加新方法decelerateElectricCar.prototype.decelerate = function(secondsStepped) {
 this.speed -= 5*secondsStepped;
};
myElectricCar = new ElectricCar(500);
myElectricCar.accelerate();
console.log("myElectricCar has speed " + myElectricCar.speed);
myElectricCar.decelerate(3);
console.log("myElectricCar has speed " + myElectricCar.speed);

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章