js 重难点——原型(末尾处有网易面试题(隐式原型的一个特例))

154 阅读3分钟

原型在JavaScript中是一个非常重要且复杂的概念,它贯穿了整个对象与继承体系。理解原型对于掌握JavaScript的核心知识至关重要。本文将深入探讨JavaScript中的原型,从显式原型、隐式原型到原型链,结合具体的例子和详细解释,帮助读者全面理解JavaScript中原型的重难点。

显示原型

定义

构造函数的原型对象被称为原型,又叫显示原型。在JavaScript中,每个函数(除了箭头函数)都天生具有一个特殊的属性叫做"prototype(原型)",这个属性指向一个对象,即该函数的原型对象。这个原型对象包含了由该构造函数创建的所有实例共享的属性和方法。通过该构造函数构造的实例对象,可以隐式的继承构造函数显示原型上的属性和方法

意义

显式原型的存在使得我们能够将方法和属性共享给所有实例对象,而不必在每个实例对象中都创建一遍,从而简化了代码执行,并节省了内存空间。

示例

javascript
复制代码
function Person(name) {
  this.name = name;
}

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

let person1 = new Person('Alice');
let person2 = new Person('Bob');

person1.sayHello(); // 输出:Hello, my name is Alice
person2.sayHello(); // 输出:Hello, my name is Bob

隐式原型

定义

在JavaScript中,每个实例对象都有一个属性叫做"__ proto__",它被称为称为隐式原型,对象的隐式原型(__ proto__)指向构造该对象的构造函数的显式原型 (prototype)

意义

实例对象的隐式原型指向了其构造函数的原型对象,使得实例对象可以访问到构造函数的原型对象上的属性和方法。

示例

javascript
复制代码
console.log(person1.__proto__ === Person.prototype); // 输出:true
console.log(person2.__proto__ === Person.prototype); // 输出:true

new 的步骤(完整版)

  1. 创建this对象
  2. 执行构造函数里面的逻辑
  3. 让this的隐式原型赋值成构造函数的显式原型
  4. 返回this

原型链

定义

原型链是由对象的隐式原型构成的链式结构,通过对象的隐式原型不断向上查找,最终可以找到所有对象的公共祖先Object.prototype。这种查找关系即为原型链。

意义

原型链实现了对象之间的继承关系,使得对象可以共享原型对象的属性和方法,实现了JavaScript中的原型继承。

示例

javascript
复制代码
console.log(person1.toString === person2.toString); // 输出:true
console.log(person1.__proto__.__proto__ === Object.prototype); // 输出:true

网易面试题

所有对象身上都有隐式原型(X)

在JavaScript中,绝大多数对象都有隐式原型,它指向了创建该对象的构造函数的显式原型,实现了原型链和继承关系。

特例:

let c = Object.create(null)它没有隐式原型

先来了解create()的作用

原型1.png 再来看特例

原型特例.png

显示原型、隐式原型与原型链之间关系的图解

原型.png

结论

通过对显式原型、隐式原型以及原型链的深入讲解和相关例子的解释,相信读者对JavaScript中的原型概念有了更清晰的认识。理解原型对于掌握JavaScript的核心知识至关重要,它不仅是实现继承的基础,也是理解JavaScript面向对象编程的关键所在。希望本文能帮助读者更好地理解JavaScript中原型的重难点,从而提升对JavaScript的整体理解和应用能力。