JavaScript prototype特性与面向对象编程

JavaScript prototype特性基础

在JavaScript中，prototype是一个至关重要的特性，它与JavaScript独特的面向对象编程模式紧密相连。JavaScript是一种基于原型的编程语言，这意味着对象之间的继承关系是通过原型链来实现的，而prototype则是构建这条原型链的关键环节。

每一个函数在JavaScript中都有一个prototype属性，这个属性指向一个对象，我们称之为原型对象。例如，我们定义一个简单的构造函数：

function Person(name) {
    this.name = name;
}
console.log(Person.prototype);

在上述代码中，Person是一个构造函数，当我们打印Person.prototype时，可以看到它是一个对象，这个对象包含了一个constructor属性，该属性指向构造函数Person本身。

原型对象的作用

原型对象的主要作用是为通过构造函数创建的实例对象提供共享的属性和方法。当我们使用new关键字调用构造函数创建实例时，实例对象会通过内部的[[Prototype]]属性（在现代JavaScript中可以通过__proto__来访问，虽然__proto__已被弃用但兼容性较好）链接到构造函数的原型对象。

function Animal(name) {
    this.name = name;
}
Animal.prototype.speak = function() {
    console.log(this.name + ' makes a sound.');
};
let dog = new Animal('Buddy');
dog.speak();

在这段代码中，我们在Animal.prototype上定义了一个speak方法。当我们创建dog实例时，虽然dog对象本身没有speak方法，但由于它通过__proto__链接到了Animal.prototype，所以可以调用speak方法。

原型链的形成

原型链是JavaScript实现继承的核心机制。当访问一个对象的属性或方法时，如果该对象本身没有这个属性或方法，JavaScript会沿着原型链向上查找，直到找到该属性或方法，或者到达原型链的顶端（null）。

function Mammal(name) {
    this.name = name;
}
Mammal.prototype.suckle = function() {
    console.log(this.name + ' nurses its young.');
};
function Dog(name, breed) {
    Mammal.call(this, name);
    this.breed = breed;
}
Dog.prototype = Object.create(Mammal.prototype);
Dog.prototype.constructor = Dog;
Dog.prototype.bark = function() {
    console.log(this.name + ' barks.');
};
let myDog = new Dog('Max', 'Golden Retriever');
myDog.suckle();
myDog.bark();

在这个例子中，Dog构造函数继承自Mammal构造函数。Dog.prototype通过Object.create(Mammal.prototype)创建，从而建立了原型链。myDog实例可以访问Mammal.prototype上的suckle方法和Dog.prototype上的bark方法。

深入理解 prototype 与 this

在JavaScript中，prototype和this是两个紧密相关但又容易混淆的概念。this关键字在不同的执行环境中有不同的值，而prototype则是用于对象属性和方法的共享与继承。

this在原型方法中的指向

当在原型对象上定义的方法被调用时，this指向调用该方法的实例对象。

function Car(make, model) {
    this.make = make;
    this.model = model;
}
Car.prototype.getDetails = function() {
    return `This is a ${this.make} ${this.model}`;
};
let myCar = new Car('Toyota', 'Corolla');
console.log(myCar.getDetails());

在上述代码中，getDetails方法是定义在Car.prototype上的。当myCar.getDetails()被调用时，this指向myCar实例，所以可以正确获取到make和model属性。

改变this的指向对原型方法的影响

我们可以使用call、apply和bind方法来改变this的指向。当在原型方法上使用这些方法时，会影响方法内部this的取值。

function Shape(color) {
    this.color = color;
}
Shape.prototype.getColor = function() {
    return this.color;
};
function Circle(radius, color) {
    Shape.call(this, color);
    this.radius = radius;
}
Circle.prototype = Object.create(Shape.prototype);
Circle.prototype.constructor = Circle;
let redCircle = new Circle(5,'red');
let blueCircle = {radius: 3, color: 'blue'};
console.log(redCircle.getColor());
console.log(redCircle.getColor.call(blueCircle));

在这个例子中，redCircle.getColor.call(blueCircle)将getColor方法中的this指向了blueCircle对象，所以返回的是blueCircle的颜色。

prototype与类式继承的关系

在ES6引入class关键字之前，JavaScript主要通过原型链来实现类似类式继承的效果。虽然class看起来像是传统的类，但本质上它仍然是基于原型的。

传统原型继承的实现方式

function Parent(name) {
    this.name = name;
}
Parent.prototype.sayHello = function() {
    console.log('Hello, I\'m'+ this.name);
};
function Child(name, age) {
    Parent.call(this, name);
    this.age = age;
}
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;
Child.prototype.sayAge = function() {
    console.log('I\'m'+ this.age +'years old.');
};
let childInstance = new Child('Tom', 10);
childInstance.sayHello();
childInstance.sayAge();

在上述代码中，Child构造函数通过Object.create(Parent.prototype)继承了Parent构造函数的原型。Child实例可以访问Parent.prototype上的sayHello方法和自身Child.prototype上的sayAge方法。

ES6 class 背后的原型机制

ES6的class语法糖使得JavaScript的继承更加简洁明了。

class Parent {
    constructor(name) {
        this.name = name;
    }
    sayHello() {
        console.log('Hello, I\'m'+ this.name);
    }
}
class Child extends Parent {
    constructor(name, age) {
        super(name);
        this.age = age;
    }
    sayAge() {
        console.log('I\'m'+ this.age +'years old.');
    }
}
let childObj = new Child('Alice', 12);
childObj.sayHello();
childObj.sayAge();

虽然这里使用了class和extends关键字，但实际上Child仍然是通过原型链继承自Parent。Child.prototype仍然是Object.create(Parent.prototype)的结果，super关键字用于调用父类的构造函数和方法。

prototype的高级应用

原型式继承的复用模式

原型式继承可以用于创建可复用的对象模板。例如，我们可以创建一个通用的shape模板，然后基于这个模板创建不同的形状对象。

let shapePrototype = {
    getArea: function() {
        // 抽象方法，具体形状需重写
        return 0;
    },
    getPerimeter: function() {
        // 抽象方法，具体形状需重写
        return 0;
    }
};
function createShape(type) {
    let shape = Object.create(shapePrototype);
    if (type === 'circle') {
        shape.radius = 0;
        shape.getArea = function() {
            return Math.PI * this.radius * this.radius;
        };
        shape.getPerimeter = function() {
            return 2 * Math.PI * this.radius;
        };
    } else if (type ==='rectangle') {
        shape.width = 0;
        shape.height = 0;
        shape.getArea = function() {
            return this.width * this.height;
        };
        shape.getPerimeter = function() {
            return 2 * (this.width + this.height);
        };
    }
    return shape;
}
let circle = createShape('circle');
circle.radius = 5;
console.log(circle.getArea());
let rectangle = createShape('rectangle');
rectangle.width = 4;
rectangle.height = 3;
console.log(rectangle.getPerimeter());

在这个例子中，createShape函数基于shapePrototype创建不同类型的形状对象，每个形状对象继承了shapePrototype的方法，并根据自身特点重写了getArea和getPerimeter方法。

利用 prototype 进行插件开发

在JavaScript库开发中，prototype可以用于为现有对象添加插件式的功能。例如，我们为Array对象添加一个自定义的sum方法。

if (!Array.prototype.sum) {
    Array.prototype.sum = function() {
        return this.reduce((acc, num) => acc + num, 0);
    };
}
let numbers = [1, 2, 3, 4, 5];
console.log(numbers.sum());

通过在Array.prototype上定义sum方法，所有的数组实例都可以使用这个方法。这种方式可以为JavaScript内置对象或自定义对象添加额外的功能，实现插件式的开发。

prototype 与闭包的结合应用

闭包和prototype可以结合使用，以实现一些复杂的功能，如数据隐私和模块封装。

function Counter() {
    let count = 0;
    this.increment = function() {
        count++;
    };
    this.getCount = function() {
        return count;
    };
}
Counter.prototype.decrement = function() {
    let self = this;
    (function() {
        self.getCount(); // 可以访问外部函数的变量
        self.count--; // 假设这里有合法的访问方式
    })();
};
let myCounter = new Counter();
myCounter.increment();
myCounter.increment();
console.log(myCounter.getCount());
myCounter.decrement();
console.log(myCounter.getCount());

在这个例子中，Counter构造函数内部使用闭包来封装count变量，实现数据隐私。而Counter.prototype上的decrement方法通过闭包的方式访问到了Counter内部的变量，展示了prototype与闭包的结合应用。

prototype相关的常见问题与陷阱

原型污染

原型污染是一种潜在的安全风险，当恶意代码能够修改对象的原型时，可能会导致整个应用程序的行为被篡改。

function Vulnerable() {}
let attacker = {
    __proto__: {
        evilMethod: function() {
            console.log('Evil code executed!');
        }
    }
};
let vulnerableInstance = new Vulnerable();
if (typeof vulnerableInstance.evilMethod === 'function') {
    vulnerableInstance.evilMethod();
}

在这个例子中，攻击者通过__proto__属性修改了Vulnerable实例的原型，添加了恶意方法evilMethod。为了避免原型污染，应该避免直接使用__proto__属性，并且对外部输入进行严格的验证和过滤。

原型链过长的性能问题

当原型链过长时，会影响属性和方法的查找性能。因为每次查找属性或方法时，JavaScript都需要沿着原型链向上遍历，直到找到目标或到达原型链顶端。

function A() {}
function B() {}
function C() {}
function D() {}
function E() {}
B.prototype = Object.create(A.prototype);
C.prototype = Object.create(B.prototype);
D.prototype = Object.create(C.prototype);
E.prototype = Object.create(D.prototype);
let eInstance = new E();
eInstance.someMethod(); // 如果 someMethod 在 A.prototype 上，查找会经过较长的原型链

为了优化性能，应该尽量避免创建过长的原型链，合理设计对象的继承结构，确保属性和方法的查找路径尽可能短。

构造函数与原型对象的混淆

有时候开发者会混淆构造函数和原型对象的作用。例如，在构造函数内部定义所有方法，而不是在原型对象上定义。

// 反例
function BadDesign(name) {
    this.name = name;
    this.sayName = function() {
        console.log('My name is'+ this.name);
    };
}
// 正例
function GoodDesign(name) {
    this.name = name;
}
GoodDesign.prototype.sayName = function() {
    console.log('My name is'+ this.name);
};

在反例中，每个实例都会创建一个独立的sayName方法副本，浪费内存。而在正例中，所有实例共享GoodDesign.prototype上的sayName方法，提高了内存使用效率。

通过深入理解JavaScript的prototype特性，我们可以更好地利用它进行面向对象编程，避免常见的问题和陷阱，编写出高效、健壮的JavaScript代码。无论是传统的原型继承方式，还是ES6的class语法，prototype始终是JavaScript面向对象编程的核心所在。