深入JavaScript Day11 - 彻底理解原型链 fun

一、function、Function、prototype、constructor 概念理解

1、var obj1 = {};是什么代码的语法糖？

• 是如下代码的语法糖

var obj2 = new Object();

console.log(obj2.__proto__ === obj1.__proto__); // true ；new出来的实例，【__proto__】 指向函数的【prototype】
console.log(obj2.__proto__ === Object.prototype); // true ；new出来的实例，【__proto__】 指向函数的【prototype】

2、function Foo(){};代码有什么作用？可以看成什么代码的语法糖？

• 【作用】借助 function 关键字，声明了一个函数
• 【语法糖】var Foo = new Function();

// console.log(function Foo() {}.constructor === Function); //ture  证明函数都是Function的实例对象
// 可以看成如下代码的语法糖
var Foo = new Function();
console.log(Foo.constructor === Function); // ture 证明函数都是Function的实例对象

3、【重点】prototype属性在哪里出现？

• 【官方解释】在 JavaScript 中，函数(function) 是允许拥有属性的。所有的函数会有一个特别的属性 -- prototype。
• 【注意】prototype是函数对象才有的属性，普通对象是没有这个属性的。

function Foo() {
  this.name = "why";
}
console.log(Foo.prototype); // {constructor: ƒ Foo()}

var obj = { name: "why" };
console.log(obj.prototype); // undefined

4、【重点】constructor属性在哪里出现？指向什么？

• 【出现位置】Function.prototype.constructor
• 【官方解释】返回常见实例对象的《构造函数》的引用。注意，此属性的值是对函数本身的引用，而不是一个包含函数名称的字符串。

function Foo() {
  this.name = "why";
}
console.log(new Foo.prototype.constructor()); // Foo {name: 'why'}

5、【重点】Foo是一个对象吗？Foo.__proto__ 和 Foo.prototype 相等吗？

• 【官方解释】每个 JavaScript 函数实际上都是一个 Function 对象。运行 (function(){}).constructor === Function //ture 便可以得到这个结论
• 【Foo.prototype】从上面《第3点可知》，Foo.prototype 是函数特有的属性，由JS引擎生成维护，为Foo函数定制。
• 【Foo.__proto__】从上面《第2点可知》，Foo 等价于 new Function() 而来，所以 【Foo.__proto__ === Function.prototype】
• 【结论 】 Foo.prototype 不等于 Foo.__proto__

二、练习验证对原型链的理解？

1、下面的代码，请绘制出内存结构图（Foo、Foo.prototype、Function、Function.prototype、Object、Object.prototype）？

function Foo() {}

image.png

• 【理解关键点一】所有函数，也就是图中左边的函数对象，都看成 函数 = new Function
• 【理解关键点二】所有函数的prototype，只是一个普通的对象。函数.prototype = new Function
• 【理解关键点三】Object作为原型链顶层，所以Object.prototype.__proto__ === null，只有这个是特殊点

2、能理解下面的图？

image.png

三、补充一些方法

1、学完原型链就可以手写 instanceof 的实现了？

// 思路：顺着原型查找，知道找到相同的原型对象，返回true 否则返回false
function myInstanceof(left, right) {
  // 使用typeof 判断基础数据类型
  if (typeof left !== 'object' || left === null) {
    return false;
  }
  // getPrototypeOf是Object对象自带的API，获取原型对象
  let proto = Object.getPrototypeOf(left);
  while (true) {
    if (proto === null) {
      return false;
    }
    // 找到相同原型对象，返回true
    if (proto === right.prototype) {
      return true
    }
    proto = Object.getPrototypeOf(proto);
  }
}

2、如何判断stu1是Person的子类实例？

image.png