原型和原型链
如何准确判断一个变量是不是数组?
手写一个简易的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