返回
揭秘 JavaScript 原型:了解函数、对象和继承的奥秘
前端
2023-12-18 06:55:40
一. 原型
1. 函数的 prototype 属性
每个函数都有一个 prototype 属性,它默认指向一个 Object 空对象(即称为:原型对象)。原型对象中有一个属性 constructor,它指向创建该函数的构造函数。
function Person(name, age) {
this.name = name;
this.age = age;
}
console.log(Person.prototype); // Object { constructor: ƒ }
2. 原型链
每个对象都有一个内部属性 [[Prototype]],它指向它的原型对象。对象的 [[Prototype]] 属性是隐藏的,不能直接访问,但可以通过 Object.getPrototypeOf() 方法来获取。
const person = new Person('John', 30);
console.log(Object.getPrototypeOf(person)); // { constructor: ƒ }
原型链是一个对象到原型对象的链条,它从当前对象开始,沿着 [[Prototype]] 属性一直向上追溯,直到遇到 null 为止。原型链的作用是允许对象继承原型对象中的属性和方法。
Person.prototype.greet = function() {
console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};
person.greet(); // Hello, my name is John and I am 30 years old.
二. 原型继承
原型继承是 JavaScript 中实现继承的一种方式。当一个对象被创建时,它会继承其原型对象中的所有属性和方法。
const student = new Person('Jane', 20);
console.log(student.name); // Jane
console.log(student.age); // 20
student.greet(); // Hello, my name is Jane and I am 20 years old.
三. 对象创建和克隆
在 JavaScript 中,对象可以通过多种方式创建和克隆。
1. 使用 new 运算符创建对象
const person = new Person('John', 30);
2. 使用字面量创建对象
const person = {
name: 'John',
age: 30
};
3. 使用 Object.create() 方法创建对象
const person = Object.create(Person.prototype);
person.name = 'John';
person.age = 30;
4. 使用 Object.assign() 方法克隆对象
const person = {
name: 'John',
age: 30
};
const student = Object.assign({}, person);
总结
原型是 JavaScript 中一个重要的概念,它揭示了函数、对象和继承之间的紧密关系。原型链允许对象继承原型对象中的属性和方法,原型继承则是 JavaScript 中实现继承的一种方式。对象可以通过多种方式创建和克隆。