【05】大厂面试知识总结 - 原型和原型链

原型和原型链

如何准确判断一个变量是不是数组?

手写一个简易的jQuery，考虑插件和扩展性

class的原型本质，怎么理解？

知识点

class和继承

• constructor
• 属性
• 方法

// 类
class Student {
    constructor(name, number) {
        this.name = name
        this.number = number
        // this.gender = 'male'
    }
    sayHi() {
        console.log(
            `姓名 ${this.name} ，学号 ${this.number}`
        )
    }
}

// 通过类 new 对象/实例
const xialuo = new Student('夏洛', 100)
console.log(xialuo.name)
console.log(xialuo.number)
xialuo.sayHi()

const madongmei = new Student('马冬梅', 101)
console.log(madongmei.name)
console.log(madongmei.number)
madongmei.sayHi()

• 继承
  • extends
  • super
  • 扩展或重写方法

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

// 子类
class Student extends People {
    constructor(name, number) {
        super(name)
        this.number = number
    }
    sayHi() {
        console.log(`姓名 ${this.name} 学号 ${this.number}`)
    }
}

// 子类
class Teacher extends People {
    constructor(name, major) {
        super(name)
        this.major = major
    }
    teach() {
        console.log(`${this.name} 教授 ${this.major}`)
    }
}

// 实例
const xialuo = new Student('夏洛', 100)
console.log(xialuo.name)
console.log(xialuo.number)
xialuo.sayHi()
xialuo.eat()

// 实例
const wanglaoshi = new Teacher('王老师', '语文')
console.log(wanglaoshi.name)
console.log(wanglaoshi.major)
wanglaoshi.teach()
wanglaoshi.eat()

类型判断instanceof

xialuo instanceof Student			//true
xialuo instanceof People			//true
xialuo instanceof Object			//true

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

{} instanceof Object				//true

原型

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

//隐式原型和显式原型
console.info(xialuo.__proto__)								//People
console.info(Student._prototype)							//People
console.info(xialuo.__proto__ === Student._prototype)		//true

原型关系

• 每个class都有显式原型prototype
• 每个实例都有隐式原型__proto__
• 实例的隐式原型__proto__指向对应class的显示原型prototype

基于原型的执行规则

• 获取属性xialuo.name或执行方法xialuo.sayhi()时
• 先在自身属性和方法寻找
• 如果找不到则自动去隐式原型__proto__中查找

原型链

console.info(Student.prototype.__proto__)
console.info(People.prototype)
console.info(People.prototype === Student.prototype.__proto__)		//true

重要提示！！！

• class是ES6语法规范，由ECMA委员会
• ECMA只规定语法规则，即我们代码的书写规范，不规定如何实现
• 以上实现方式都是V8引擎的实现方式，也是主流的

题目解答

• 如何准确判断一个变量是不是数组？
  • a instanceof Array
• class的原型本质，怎么理解？
  • 原型和原型链的图示
  • 属性和方法的执行规则

小结

• class和继承，结合上面手写jQuery的示例来理解
• instanceof
• 原型和原型链：图示 & 执行规则

typeof和instanceof

typeof 找出实例的原型
typeof People ：输出的是function
instanceof判断实例是否属于某个原型

//typeof作用是：判断一个变量的类型
typeof People		//function
typeof Student		//function

//instanceof的作用是：用来测试一个对象是否为一个类的实例
xialuo instanceof Student			//true
xialuo instanceof People			//true
xialuo instanceof Object			//true

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

{} instanceof Object				//true