F.prototype

函数原型

函数原型基础

1. 函数原型对象

function Person(name) {
    this.name = name;
}

// 函数原型对象
console.log(Person.prototype); // {constructor: ƒ}
console.log(Person.prototype.constructor === Person); // true

// 实例的原型链
const person = new Person('John');
console.log(Object.getPrototypeOf(person) === Person.prototype); // true

2. 原型方法

function Animal(name) {
    this.name = name;
}

// 在原型上添加方法
Animal.prototype.eat = function() {
    console.log(`${this.name} is eating`);
};

Animal.prototype.sleep = function() {
    console.log(`${this.name} is sleeping`);
};

const dog = new Animal('Dog');
dog.eat(); // 'Dog is eating'
dog.sleep(); // 'Dog is sleeping'

原型继承

1. 原型链继承

function Animal(name) {
    this.name = name;
}

Animal.prototype.eat = function() {
    console.log(`${this.name} is eating`);
};

function Dog(name) {
    Animal.call(this, name);
}

// 设置原型链
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

// 添加子类方法
Dog.prototype.bark = function() {
    console.log(`${this.name} is barking`);
};

const dog = new Dog('Rex');
dog.eat(); // 'Rex is eating'
dog.bark(); // 'Rex is barking'

2. 组合继承

function Animal(name) {
    this.name = name;
}

Animal.prototype.eat = function() {
    console.log(`${this.name} is eating`);
};

function Dog(name, breed) {
    // 继承属性
    Animal.call(this, name);
    this.breed = breed;
}

// 继承方法
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

// 添加子类方法
Dog.prototype.bark = function() {
    console.log(`${this.name} is barking`);
};

const dog = new Dog('Rex', 'German Shepherd');
console.log(dog.name); // 'Rex'
console.log(dog.breed); // 'German Shepherd'
dog.eat(); // 'Rex is eating'
dog.bark(); // 'Rex is barking'

原型方法

1. 原型方法定义

function Person(name) {
    this.name = name;
}

// 定义原型方法
Person.prototype.sayHello = function() {
    console.log(`Hello, I'm ${this.name}`);
};

// 定义原型属性
Object.defineProperty(Person.prototype, 'species', {
    value: 'human',
    writable: false,
    enumerable: true,
    configurable: false
});

const person = new Person('John');
person.sayHello(); // 'Hello, I'm John'
console.log(person.species); // 'human'

2. 原型方法重写

function Animal(name) {
    this.name = name;
}

Animal.prototype.move = function() {
    console.log(`${this.name} is moving`);
};

function Bird(name) {
    Animal.call(this, name);
}

Bird.prototype = Object.create(Animal.prototype);
Bird.prototype.constructor = Bird;

// 重写原型方法
Bird.prototype.move = function() {
    console.log(`${this.name} is flying`);
};

const bird = new Bird('Sparrow');
bird.move(); // 'Sparrow is flying'

最佳实践

1. 使用 Object.create() 创建原型链
2. 正确设置 constructor 属性
3. 在原型上定义方法而不是实例方法
4. 使用 Object.defineProperty() 定义原型属性
5. 避免直接修改 __proto__ 属性
6. 使用 Object.getPrototypeOf() 获取原型
7. 使用 Object.setPrototypeOf() 设置原型
8. 优先使用 ES6 的 class 语法