js基础复习

3.js原型和原型链

// 类
class Student {
   constructor(name, number) {
       this.name = name
       this.number = number
       this.gender = 'nale'
   }
   sayHi() {
       console.log(`姓名${this.name}, 学号${this.number}`)
   }
}
// 通过类new 对象/实例
const xiaoluo = new Student('夏洛', 100)
console.log(xiaoluo.name) // 夏洛
console.log(xiaoluo.number) // 100
xiaoluo.sayHi() // 姓名夏洛, 学号100

const madongmei = new Student('马冬梅', 101)
console.log(madongmei.name) // 马冬梅
console.log(madongmei.number) // 101
madongmei.sayHi() // 姓名马冬梅, 学号101

// 继承
// 父类
class People {
   constructor(name) {
       this.name = name
   }
   eat() {
       console.log(`${this.name} eat something`)
   }
}
// 子类
// super 关键字用于访问父对象上的函数
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}`)
   }
}

// 通过类new 对象/实例
const xiaoluo = new Student('夏洛', 100)
console.log(xiaoluo.name) // 夏洛
console.log(xiaoluo.number) // 100
xiaoluo.sayHi() // 姓名夏洛, 学号100
xiaoluo.eat() // 夏洛 eat something

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

// 类型判断-instanceof 
xiaoluo instanceof Student // true
xiaoluo instanceof People // true
xiaoluo instanceof Object // true

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

{} instanceof Object // true

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

// 隐式原型和显示原型
console.log(xiaoluo.__proto__)
console.log(Student.prototype)
console.log(xiaoluo.__proto__ === Student.prototype)
每个class都有显示原型prototype
每个实例都有隐式原型__proto__
实例的__proto__指向对应class的prototype

// 基于原型的执行规则
获取属性xiaoluo.name或执行方法xialuo.sayHi()时
先在自身属性和方法寻找
如果找不到则自动去__proto__中查找

// 原型链
console.log(Student.prototype.__proto__)
console.log(People.prototype)
console.log(People.prototype === Student.prototype.__proto__)

instanceof原理

instanceof原理
1.获取实例对象的隐式原型
2.获取构造函数的prototype属性
3.while 循环 -> 在原型链上不断向上查找
4.在原型链上不断查找 构造函数的显式原型
5.直到implicitPrototype = null 都没有找到，返回false
6.构造函数的prototype属性出现在实例对象的原型链上返回true

定义：instanceof运算符用于检测构造函数的prototype属性是否出现某个实例对象的原型链上
function instance_of(Obj, Constructor) {
    let implicitPrototype = Obj.__proto__ // 获取实例对象的隐式原型
    let displayPrototype = Constructor.prototype // 获取构造函数的prototype属性
    // while 循环 -> 在原型链上不断向上查找
    while(true) {
        // 直到implicitPrototype = null 都没有找到，返回false
        if (implicitPrototype === null) {
            return false
            // 构造函数的prototype属性出现在实例对象的原型链上返回true
        } else if (implicitPrototype === displayPrototype) {
            return true
        }
        // 在原型链上不断查找 构造函数的显式原型
        implicitPrototype = implicitPrototype.__proto__
    }
}