第三章 JS基础-原型和原型链
JS是基于原型集成的语言
题目引入
- 如何判断一个变量是不是数组？
- 手写一个简易的jQuery，考虑插件和扩展性？
- Class的原型本质，怎么理解？
知识点
Class和继承
类型判断instanceof
原型和原型链
一、class和继承
1. 类
Constructor 声明属性
属性
方法
// 类
class Student {
constructor(name, number) {
this.name = name
this.number = number
// this.gender = 'male'
}
sayHi() {
console.log(
`姓名 ${this.name} ，学号 ${this.number}` // 模板字符串
)
// 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()
2. 继承
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
- Instanceof可以判断引用类型（父子关系）
- Object可以认为是所有class的父类
Xialuo instanceof Student //true
Xialuo instanceof Object //true
[] instanceof Array //true
[] instanceof Object //true
{} instanceof Object //true三、原型
// class实际上是函数
typeof People // ‘function’
typeof Student // ‘function’
// 隐式原型和显示原型
console.log( xialuo.__proto__ ) // 隐式原型
console.log( Student.prototype ) // 显式原型
console.log( xialuo.__proto__ === Student.prototype )
1. 原型图解：
解释：在定义Student时会有一个函数，包含一个显示原型指向Student.prototype，并把方法sayHi()放进去,通过new Student生成一个对象xialuo之后，xialuo的属性name和number会直接放在对象里面，而方sayhi()是通过__proto__（隐式原型）来指向显式原型获取
2. 原型关系：
- 每个class都有一个显式原型prototype
- 每个实例都有隐式原型__proto__
- 实例的__proto__指向对应class的prototype
3. 基于原型的执行规则
获取属性xialuo.name执行方法xialuo.sayHi()时
先在自身属性和方法寻找
如果找不到则自动去__proto__中去查找
四、原型链
console.log( Student.prototype.__proto__ ) // 隐式原型
console.log( People.prototype ) // 显式原型
console.log( Student.prototype.__proto__ === People.prototype )
1. 原型图解：
2. 通过这个图再看instanceof
顺着隐式原型向上找，看是否能找到显式原型，如果能对应到，则instanceof成立
五、重要提示
- Class是ES6语法规范，由ECMA委员会发布
- ECMA只规定语法规则，即我们代码的书写规范，不规定如何实现
- 以上实现方式都是V８引擎的实现方式，也是主流的
六、题目解答
1. 如何判断一个变量是不是数组？
使用a instanceof Array
2. 手写一个简易的jQuery，考虑插件和扩展性？
class jQuery {
constructor(selector) {
const result = document.querySelectorAll(selector)
const length = result.length
for (let i = 0; i < length; i++) {
this[i] = result[i]
}
this.length = length
this.selector = selector
}
get(index) {
return this[index]
}
each(fn) {
for (let i = 0; i < this.length; i++) {
const elem = this[i]
fn(elem)
}
}
on(type, fn) {
return this.each(elem => {
elem.addEventListener(type, fn, false)
})
}
// 扩展很多 DOM API
}
// 插件
jQuery.prototype.dialog = function (info) {
alert(info)
}
// 扩展 “造轮子”
class myJQuery extends jQuery {
constructor(selector) {
super(selector)
}
// 扩展自己的方法
addClass(className) {
}
style(data) {
}
}
3. Class的原型本质，怎么理解？
会画原型和原型的图示
属性和方法的执行规则
七、小结
1. Class和继承，结合上面手写jQuery的示例来理解
2. Instanceof
3. 原型和原型链：图示&执行规则
