原型与原型链

原型

首先我们来看这一段代码

function Person() {}
const vvv = new Person();

• Person 在这里我们称之为构造函数, 也是一个函数对象
• vvv 在这里我们称之为实例化对象,是一个普通对象

继续看下面代码

console.log(Person.prototype); // {constructor: ƒ}
console.log(vvv.prototype); // undefined
console.log(vvv.__proto__); // {constructor: ƒ}
console.log(Person.__proto__); // ƒ () { [native code] }

由上面结果我们可以得出

• 普通对象是没有prototype属性的
• 每个对象都会拥有__proto__
• Person.prototype === vvv.__proto__
• 原型也是一个对象,就像这里的{constructor: ƒ}

小结

• 构造函数可以通过prototype访问到原型
• 普通对象可以通过__proto__访问到原型
• 原型也是一个对象

原型链

也是先来看一段代码

function Person() {}
Person.prototype.name = "123";
function Student() {}
Student.prototype = new Person();
Student.prototype.construct = Student;
const vvv = new Student();
vvv.name; // '123'

上面的代码中

• 给 Prson 添加了原型
• 将 Student 的原型指向了Person的实例化对象
• vvv 访问了 name

为什么 vvv.name 会是123呢? 明明 vvv 没有name这个属性

这是因为 vvv 中没有这个属性,就会往上查找

先去 vvv 的原型(vvv.__proto__)查找, 没有就会一直往上查找, 如果有这个属性就会返回, 没有返回 undefined

vvv -> vvv.__proto__ -> vvv.__proto__.__proto__

这样的一个查找过程我们称之为原型链

ps: (多个有关系的原型, 我称之为原型链)

相关问题

 Object.prototype.__proto__ // 原型链的尽头是什么 null

 Function.prototype.__proto__ // 答案是什么  Object.prototype

 Function.prototype  // ƒ () { [native code] }

 构造函数自身的__proto__是什么  // Function.prototype = ƒ () { [native code] }

 Object.__proto__ 答案是什么  // Function.prototype = ƒ () { [native code] }

 Object instanceof Function  //true

 Function instanceof Object  //true

 Function.prototype === Function.__proto__  //true

---

⭐️⭐️⭐️ 好啦！！！本文章到这里就结束啦。⭐️⭐️⭐️

✿✿ ヽ(°▽°)ノ ✿

撒花 🌸🌸🌸🌸🌸🌸