JavaScript 中原型对象中函数原型怎么理解-js教程-PHP中文网

javascript 中的原型对象是用于实现继承和共享方法的机制，理解函数原型的关键在于区分 prototype 属性（构造函数拥有）和 __proto__ 属性（实例拥有）。通过修改构造函数的 prototype，所有由该构造函数创建的实例都能访问到这些共享的方法，从而节省内存并实现代码复用。

JavaScript 中原型对象中函数原型怎么理解

构造函数与 prototype 的关系是什么

每个 JavaScript 函数在创建时都会自动获得一个 prototype 属性，它是一个指向原型对象的指针。这个原型对象默认包含一个 constructor 属性，指回该函数本身。当使用 new 关键字调用该函数时，新创建的实例会通过内部链接指向这个原型对象。

JavaScript 中原型对象中函数原型怎么理解

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

Person.prototype.sayHello = function() {
    console.log('Hello, ' + this.name);
};

const p1 = new Person('Alice');
p1.sayHello(); // 输出: Hello, Alice

上述代码中，sayHello 方法被定义在 Person.prototype 上，而不是 Person 构造函数内部。这意味着 p1 实例可以直接调用 sayHello，即使它自身没有这个方法。JavaScript 引擎会在实例上查找不到该方法时，沿着原型链向上查找，最终在原型对象中找到并执行。

实例与 proto 的联系如何体现

每个 JavaScript 对象都有一个内部属性 [[Prototype]]，在大多数浏览器中可以通过 __proto__ 访问。这个属性指向创建该对象的构造函数的 prototype。通过 __proto__，实例可以访问原型对象上的属性和方法，形成原型链。

Java 开发专家

精通 Java 21+，掌握虚拟线程、模式匹配和 Spring Boot 3.x 等现代特性。是 Java 生态系统（包括 GraalVM、Project Lo

下载

JavaScript 中原型对象中函数原型怎么理解

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

Animal.prototype.eat = function() {
    return this.type + ' is eating';
};

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

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

Dog.prototype.bark = function() {
    return this.name + ' says woof!';
};

const d1 = new Dog('Buddy');
console.log(d1.eat()); // 输出: Dog is eating
console.log(d1.bark()); // 输出: Buddy says woof!

在这个例子中，Dog 构造函数通过 Object.create(Animal.prototype) 将自身的原型设置为 Animal 的原型对象。这样，d1 实例既可以通过 __proto__ 找到 Dog.prototype 上的 bark 方法，也可以通过原型链继续向上找到 Animal.prototype 上的 eat 方法。

修改 prototype 对已有实例有什么影响

由于原型对象是共享的，如果在实例创建后修改了构造函数的 prototype，所有已存在的实例都会受到影响，因为它们都指向同一个原型对象。这种动态性使得原型模式非常灵活，但也需要注意潜在的风险。

function Car(model) {
    this.model = model;
}

Car.prototype.drive = function() {
    return this.model + ' is driving';
};

const c1 = new Car('Toyota');
console.log(c1.drive()); // 输出: Toyota is driving

// 修改 prototype
Car.prototype.stop = function() {
    return this.model + ' is stopping';
};

console.log(c1.stop()); // 输出: Toyota is stopping

在上述代码中，我们在创建 c1 实例后添加了 stop 方法到 Car.prototype。由于 c1 仍然指向 Car.prototype，它可以立即访问到新添加的 stop 方法。这种行为展示了原型链的动态特性，但也提醒我们在设计时要考虑这种共享性可能带来的副作用。