JavaScript 面向对象编程（一）：封装

生成对象的原始模式

在 JavaScript 中，所有对象都是基于原型模型的。要实现封装，意味着将属性和方法集中到一个对象中，通常是一个原型对象。以下是一个简单例子：

var Cat = {
    name: '',
    color: ''
};

通过直接赋值，可以创建多个实例：

var cat1 = { name: "大毛", color: "黄色" };
var cat2 = { name: "二毛", color: "黑色" };

然而，这种方式存在以下问题：

代码冗余，难以管理多个实例

实例与原型之间缺乏直接联系

构造函数模式

为了解决上述问题，JavaScript 提供了构造函数模式。构造函数允许我们通过 new 运算符创建实例，并将 this 绑定到实例对象上。

function Cat(name, color) {
    this.name = name;
    this.color = color;
}

创建实例：

var cat1 = new Cat("大毛", "黄色");
var cat2 = new Cat("二毛", "黑色");

实例对象会继承构造函数的属性，例如：

cat1.constructor === Cat; // true
cat2.constructor === Cat; // true

此外，instanceof 运算符可以验证实例与原型对象的关系：

cat1 instanceof Cat; // true
cat2 instanceof Cat; // true

构造函数模式的优化

为了提高效率，可以将不变的属性和方法定义在构造函数的原型对象上。

function Cat(name, color) {
    this.name = name;
    this.color = color;
}
Cat.prototype.type = "猫科动物";
Cat.prototype.eat = function() {
    alert("吃老鼠");
};

创建实例：

var cat1 = new Cat("大毛", "黄色");
var cat2 = new Cat("二毛", "黑色");

由于 type 和 eat 方法共享同一个原型对象，内存占用得到了优化。

验证方法：

cat1.eat === cat2.eat; // true
cat1.hasOwnProperty("type"); // false

Prototype 模式

JavaScript规定，构造函数的 prototype 属性指向原型对象。通过定义原型对象的属性和方法，可以实现属性和方法的共享。

function Cat(name, color) {
    this.name = name;
    this.color = color;
}
Cat.prototype.type = "猫科动物";
Cat.prototype.eat = function() {
    alert("吃老鼠");
};

实例对象通过原型链访问这些属性和方法：

var cat1 = new Cat("大毛", "黄色");
var cat2 = new Cat("二毛", "黑色");

验证原型关系：

Cat.prototype.isPrototypeOf(cat1); // true
cat1.hasOwnProperty("type"); // false

Prototype 模式的验证方法

isPrototypeOf()：判断原型对象与实例的关系。

Cat.prototype.isPrototypeOf(cat1); // true

hasOwnProperty()：判断实例属性的归属。

cat1.hasOwnProperty("name"); // true
cat1.hasOwnProperty("type"); // false

in 运算符：判断属性存在于实例中。

"name" in cat1; // true
"type" in cat1; // true

遍历属性：

for (var prop in cat1) {
    console.log(cat1[prop]);
}

通过 Prototype 模式，可以有效地管理对象的属性和方法，提升性能和代码维护性。

转载地址：http://mcqfk.baihongyu.com/

你可能感兴趣的文章