本文详解 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);