对象原型

原型链

原型的概念

JavaScript 中的每个对象都有一个内置的 prototype 属性，它指向该对象的原型对象。原型链是 JavaScript 实现继承的主要方式。

示例

// 创建一个简单对象
const myObject = {
    city: "ShenZhen",
    greet() {
        console.log(`"Hello Welcome to ${this.city}"`);
    }
}

myObject.greet();

提示： 在浏览器控制台中输入对象名称后跟随一个点（如：myObject.），会显示该对象所有可用的属性和方法。

属性遮蔽

概念

当一个对象的属性与其原型对象的属性同名时，对象自身的属性会"遮蔽"原型对象的同名属性。

示例

const animal = {
    speak() {
        console.log("动物发出声音");
    }
};

const dog = Object.create(animal);
dog.speak = function() {
    console.log("汪汪汪");
};

dog.speak();  // 输出: "汪汪汪"

设置原型

JavaScript 提供了两种设置对象原型的方法：

  1. Object.create()
  2. 构造函数

Object.create()设置原型

Object.create() 方法创建一个新对象，使用现有对象作为新对象的原型：

const personPrototype = {
    greet() {
        console.log('Hello')
    }
}

const carl = Object.create(personPrototype);

carl.greet()

构造函数设置原型

概念说明
prototype 属性所有函数都有的属性，指向原型对象
proto对象实例指向其构造函数原型的内部链接
原型继承通过原型链实现的对象继承机制
// 创建对象，有一个 greet() 方法
const personPrototype = {
    greet() {
        console.log(`Hello ${this.name}`)
    }
}

// 构造函数
function Person(name) {
    this.name = name
}

// 使用 Object.assign 将 personPrototype 中定义的方法绑定到 Person 函数的 prototype 属性上
Object.assign(Person.prototype, personPrototype)

// 创建实例
const shenzhen = new Person('ShenZhen')
shenzhen.greet()

自由属性

自由属性（Own Properties）是直接定义在对象上的属性，而不是从原型链继承的属性。

检查自由属性

function Person(name) {
    this.name = name
}
const irma = new Person('Irma')

// 检查属性是否是自由属性
console.log(Object.hasOwn(irma, 'name'))
console.log(Object.hasOwn(irma, 'greet'))

参考： MDN-对象原型