课程来源：coding.imooc.com/learn/list/…
题目
- 如何准确判断一个变量是不是数组？
- 手写一个简易的jQuery，考虑插件和扩展性
- class的原型本质，怎么理解？
知识点
- class和继承
- 类型判断 instanceof
- 原型和原型链
一、class和继承
class
- constructor
- 属性
- 方法
代码演示
//类
class Student {
constructor(name, number) {
this.name = name
this.number = number
}
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()
继承
- extends
- super
- 扩展或重写方法
代码演示
// 父类
class Perple {
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.log( xialuo.__proto__ )
console.log( Student.prototype )
console.log( xialuo.__proto__ === Student.prototype )
注：隐式原型和显式原型均指向Student.prototype来获取其中的函数方法。
原型关系
- 每个class都有显式原型prototype
- 每个实例都有隐式原型__ proto __
- 实例的__ proto __指向对应class的prototype
基于原型的执行规则
- 获取属性xialuo.name或执行方法xialuo.sayHi()时
- 先在自身属性和方法寻找
- 如果找不到则自动去__ proto __中查找
三、原型链和instanceof
原型链
console.log( Student.prototype.__proto__ )
console.log( People.prototype )
console.log( People.prototype === Student.prototype.__proto__ )
重要提示
- class是ES6语法规范，由ECMA委员会发布
- ECMA只规定语法规则，即我们代码的书写规范，不规定如何实现
- 以上实现方式都是V8引擎的实现方式，也是主流的
四、问题补充解答
如何准确判断一个变量是数组
- a instanceof Array
class的原型本质
- 原型和原型链的图示
- 属性和方法的执行规则
手写简易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) {
}
}
// 使用案例
// const $p = new jQuery('p')
// $p.get(1)
// $p.each((elem) => console.log(elem.nodeName))
// $p.on('click', () => alert('clicked'))
————————————————————————————————————————
