你不知道的JavaScript—探索 JavaScript 对象与原型-编程学习网

JavaScript 是一种强大而灵活的脚本语言，其核心特性之一是对象与原型。理解 JavaScript 对象和原型的工作原理对于成为一名优秀的 JavaScript 开发者至关重要。

JavaScript 对象：一切皆对象

在 JavaScript 中，几乎一切都是对象。对象是一种复合值，它可以包含属性和方法。属性是键值对，其中键是字符串，值可以是任何数据类型。方法是与对象相关联的函数。

对象的创建

对象可以通过对象字面量、构造函数、Object.create() 方法等方式创建。

// 对象字面量
let person = {
    name: 'Alice',
    age: 30,
    greet: function() {
        console.log('Hello, my name is ' + this.name);
    }
};

// 构造函数
function Person(name, age) {
    this.name = name;
    this.age = age;
}
let person1 = new Person('Bob', 25);

// Object.create()
let person2 = Object.create(person);
person2.name = 'Charlie';
person2.age = 20;

对象的访问与修改

对象的属性可以通过点符号或方括号访问和修改。

console.log(person.name); // 输出 'Alice'
person.age = 35; // 修改 age 属性的值为 35

JavaScript 原型：共享属性和方法

JavaScript 是一种基于原型的语言，每个对象都有一个原型。原型是对象的基础，它包含对象共享的属性和方法。当对象访问一个属性或方法时，如果对象本身没有这个属性或方法，它会沿着原型链向上查找，直到找到为止。

原型链

原型链是一种对象之间关系的表示，它是由对象的原型构成的链式结构。当我们访问一个对象的属性或方法时，JavaScript 引擎会沿着原型链依次查找，直到找到对应的属性或方法为止。

console.log(person.__proto__); // 输出对象的原型
console.log(person.__proto__.__proto__); // 输出原型的原型，直到 Object.prototype

原型继承

JavaScript 中的原型继承是一种基于原型链的继承方式。子对象可以通过原型链继承父对象的属性和方法。

// 父对象构造函数
function Animal(name) {
    this.name = name;
}
Animal.prototype.sayName = function() {
    console.log('My name is ' + this.name);
};

// 子对象构造函数
function Dog(name, breed) {
    Animal.call(this, name);
    this.breed = breed;
}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

let dog = new Dog('Buddy', 'Golden Retriever');
dog.sayName(); // 输出 'My name is Buddy'

实际应用：使用对象和原型进行模块化和继承

JavaScript 对象和原型的概念为模块化和继承提供了强大的支持。通过合理地组织对象和利用原型链，我们可以编写可维护、可扩展的代码。

模块化

let module = {
    data: [],
    add: function(item) {
        this.data.push(item);
    },
    remove: function(index) {
        this.data.splice(index, 1);
    }
};

module.add('apple');
module.add('banana');
module.remove(0);
console.log(module.data); // 输出 ['banana']

继承

// 父对象构造函数
function Shape() {
    this.color = 'red';
}
Shape.prototype.getColor = function() {
    return this.color;
};

// 子对象构造函数
function Circle(radius) {
    Shape.call(this);
    this.radius = radius;
}
Circle.prototype = Object.create(Shape.prototype);
Circle.prototype.constructor = Circle;
Circle.prototype.getArea = function() {
    return Math.PI * this.radius * this.radius;
};

let circle = new Circle(5);
console.log(circle.getColor()); // 输出 'red'
console.log(circle.getArea()); // 输出 78.53981633974483