一、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
