前端面试题整理——原型和原型链

Class的使用：

// 父类
    class People {
        constructor(name) {
            this.name = name
        }

        eat() {
            console.log(`${this.name} eat`)
        }
    }

    // 子类
    class Student extends People {
        constructor(name, number) {
            super(name);//super使用父类帮忙定义this.name
            this.number = number
        }

        sayHi() {
            console.log(`姓名：${this.name}，学号：${this.number}`)
        }
    }

    const a = new Student('aaa',123)
    a.sayHi()
    a.eat()

View Code

类型判断-instance：

// 父类
    class People {
        constructor(name) {
            this.name = name
        }
        eat() {
            console.log(`${this.name} eat`)
        }
    }
    // 子类
    class Student extends People {
        constructor(name, number) {
            super(name);//super使用父类帮忙定义this.name
            this.number = number
        }
        sayHi() {
            console.log(`姓名：${this.name}，学号：${this.number}`)
        }
    }
    const a = new Student('aaa',123)
    // a instanceof Student // true
    // a instanceof People // true
    // a instanceof Object // true

    // [] instanceof Array // true
    // [] instanceof Object // true

    // {} instanceof Object // true

View Code

原型：

// 父类
    class People {
        constructor(name) {
            this.name = name
        }
        eat() {
            console.log(`${this.name} eat`)
        }
    }
    // 子类
    class Student extends People {
        constructor(name, number) {
            super(name);//super使用父类帮忙定义this.name
            this.number = number
        }
        sayHi() {
            console.log(`姓名：${this.name}，学号：${this.number}`)
        }
    }
    const a = new Student('aaa',123)

    // class 实际上是函数，是语法糖
    // typeof People // 'function'
    // typeof Student // 'function'

    // 隐式原型和显式原型
    console.log( a )
    console.log( a.__proto__ )
    console.log( Student.prototype )
    console.log( a.__proto__ === Student.prototype )

    // 原型关系
    // 每个class都有显式原型 prototype
    // 每个实例都有隐式原型 __proto__
    // 实例的__proto__指向对应class的prototype

    // 基于原型的执行规则
    // 先在自身属性和方法寻找
    // 如果找不到自动去__proto__寻找

View Code

原型链：

// 父类
    class People {
        constructor(name) {
            this.name = name
        }
        eat() {
            console.log(`${this.name} eat`)
        }
    }

    // 子类
    class Student extends People {
        constructor(name, number) {
            super(name);//super使用父类帮忙定义this.name
            this.number = number
            this.rank = () => {
                console.log('rank 10')
            }
        }
        sayHi() {
            console.log(`姓名：${this.name}，学号：${this.number}`)
        }
    }

    const a = new Student('aaa', 123)

    console.log(a);
    console.log(Student.__proto__.prototype);
    console.log(People.prototype);
    console.log(Student.__proto__.prototype === People.prototype); // true

    // hasOwnProperty() 方法来验证是否该对象自己的
    console.log(a.hasOwnProperty('name'));
    console.log(a.hasOwnProperty('sayHi'));
    console.log(a.hasOwnProperty('rank'));

    // 原型链直至找到Object的__proto__为止，Object的__proto__为null
    // instanceof的原理是原型链查找模式，一步步对照Class的显式原型是否存在

View Code