【学习笔记60】JavaScript原型链的理解

一、万物皆对象

• JS中, 万物都可以都可以称为对象

1、对象概念

• 含义1: 一种数据格式 {key: value, key2: value2}
• 含义2: 某一类事务的实例(某一类内容中的真实个体)

2、说明

• arr1就是Array这一类内容中的某一个真实个体
• 数组也可以算作一个对象(Array 这一类事务中的一个个体)

        const arr = [1, 2, 3];
        const arr1 = [1, 2, 3, 4];
        const arr2 = [1, 2];
1
2
3

• 函数也是一个对象(属于Function这一类事务中的一个个体)

        const fn = () => { console.log(1) }
        const fn2 = () => { console.log(2) }
        const fn3 = () => { console.log(3) }
1
2
3

    如果一个数据[]那么他就是Array，这个对象中的某一个个体
    如果一个数据{}那么他就是Object，这个对象中的某一个个体
    如果一个数据function(){}，那么他就是 Function 这个对象中的某一个个体
1
2
3

二、原型链

• 对象之间的继承关系通过构造函数的prototype指向父类对象，直到指向Object对象为止形成的指向链条。
• 通俗讲： 原型链是原型对象创建过程的历史记录。
• 注：在javascript中，所有的对象都拥有一个__proto__属性指向该对象的原型（prototype)

三、原型链查找对象的某一个属性

1. 先在对象内部开始查找, 找到直接使用, 然后停止查找
2. 如果没有找到, 会找对象的obj.__proto__, 如果找到直接使用, 然后停止查找
3. 如果这里没找到, 会继续去对象的obj.__proto__查找, 找到直接使用, 然后停止查找
4. 如果还是没找到, 会继续向上查找
5. …
6. 直到找到顶层作用对象：Object.prototype, 找到就是用, 找不到undefined

        function Person (name) {
            this.name = name;
        }
        Person.prototype.sayHi = function () {
            console.log(100);
        }
        const p = new Person('QF001');
        console.log(p);
1
2
3
4
5
6
7
8

问题1: p的__proto__指向谁?

1. p是Person的实例化对象
2. __proto__指向自身构造函数的原型
3. p.__proto === Person.prototype

        function Person(name) {
            this.name = name;
        }
        Person.prototype.sayHi = function () {
            console.log(100);
        }
        const p = new Person('QF001');
        console.log(p.__proto__);       // {sayHi: ƒ, constructor: ƒ}
        console.log(Person.prototype);  // {sayHi: ƒ, constructor: ƒ}
        console.log(p.__proto__ === Person.prototype);
1
2
3
4
5
6
7
8
9
10

问题2: Person 的__proto__指向谁?

1. Person是构造函数, 本质上函数
2. 只要是一个函数, 他就是Function的实例
3. Person.__proto__指向了他的构造函数的原型, 构造函数是Function, 那么构造函数的原型Function.prototype
4. Person.__proto__ === Function.prototype

        function Person (name) {
            this.name = name;
        }
        Person.prototype.sayHi = function () {
            console.log(100);
        }-
        const p = new Person('QF001');
        console.log(Person.__proto__ );       // ƒ () { [native code] }
        console.log( Function.prototype);     // ƒ () { [native code] }
        console.log(Person.__proto__ === Function.prototype);
1
2
3
4
5
6
7
8
9
10

问题3: Person.prototype 的 proto 指向谁?

1. Person.prototype其实就是构造函数Person的原型对象, 本质上就是对象
2. 只要是一个对象, 他就是Object的实例
3. Person.prototype.__proto__指向了 他的构造函数的原型, 构造函数Object, 那么构造函数的原型Object.prototype
4. `Person.prototype.proto === Object.prototyp=====000000000

        function Person (name) {
            this.name = name;
        }
        Person.prototype.sayHi = function () {
            console.log(100);
        }
        const p = new Person('QF001');
        // {constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}
        console.log(Person.prototype.__proto__);
        console.log(Object.prototype);
        console.log(Person.prototype.__proto__ === Object.prototype);
1
2
3
4
5
6
7
8
9
10
11

问题4: Function的__proto__指向谁?

1. Function是构造函数, 本质上就是一个函数
2. 只要是一个函数, 他就是Function的实例
3. Function.__proto__指向了他的构造函数的原型, 构造函数Function, 那么构造函数的原型 Function.prototype
4. Function.__proto__ === Function.prototype

        function Person (name) {
            this.name = name;
        }
        Person.prototype.sayHi = function () {
            console.log(100);
        }
        const p = new Person('QF001');
        console.log(Function.__proto__);  // ƒ () { [native code] }
        console.log(Function.prototype);  // ƒ () { [native code] }
        console.log(Function.__proto__ === Function.prototype);
1
2
3
4
5
6
7
8
9
10

问题5: Function.prototype 的 proto 指向了谁?

1. Function.prototype其实就是 构造函数 Function 的原型对象, 本质上是对象
2. 只要是一个对象, 他就是Object的实例
3. Function.prototype.__proto__指向了他的构造函数的原型, 构造函数Object, 那么构造函数的原型Object.prototype
4. Function.prototype.__proto__ === Object.prototype

        function Person (name) {
            this.name = name;
        }
        Person.prototype.sayHi = function () {
            console.log(100);
        }
        const p = new Person('QF001');
        // {constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}
        console.log(Function.prototype.__proto__);  
        console.log(Object.prototype);  
        console.log(Function.prototype.__proto__ === Object.prototype);
1
2
3
4
5
6
7
8
9
10
11

问题6: Object的__proto__指向了谁?

1. Object是一个构造函数, 本质上还是一个函数
2. 只要是一个函数, 那么他的构造函数就是 Function
3. Object.__proto__指向了他的构造函数的原型, 他的构造函数是 Function, 那么构造函数的原型 Function.prototype
4. Object.__proto__ === Function.prototype

        function Person (name) {
            this.name = name;
        }
        Person.prototype.sayHi = function () {
            console.log(100);
        }
        const p = new Person('QF001');
        console.log(Object.__proto__);  
        console.log(Function.prototype);  
        console.log(Object.__proto__ === Function.prototype);
1
2
3
4
5
6
7
8
9
10

问题7: Object.prototype 的 __proto__指向了谁?

1. Object.prototype是构造函数 Object 的原型对象, 本质上就是一个对象
2. 但是重点: Object.prototype是JS顶层的对象
3. Object.prototype.__proto__ === null

        function Person (name) {
            this.name = name;
        }
        Person.prototype.sayHi = function () {
            console.log(100);
        }
        const p = new Person('QF001');
        console.log(Object.prototype.__proto__);
1
2
3
4
5
6
7
8