1.class
constructor
屬性
方法
// 類
class Student {
? ? // 構(gòu)造函數(shù)
? ? constructor(name, number) { // 屬性
? ? ? ? this.name = name
? ? ? ? this.number = number
? ? }
? ? // 方法
? ? sayHi() {
? ? ? ? console.log(`姓名 ${this.name} 學(xué)號(hào) ${this.number}`)
? ? }
}
// 實(shí)例
const xialuo = new Student('夏洛', 100)
console.log(xialuo.name, xialuo.number)
xialuo.sayHi()
// 實(shí)例
const madongmei = new Student('馬冬梅', 101)
console.log(madongmei.name, madongmei.number)
madongmei.sayHi()
? ? // ---------------------
? ? // 夏洛 100
? ? // 姓名 夏洛 學(xué)號(hào) 100
? ? // 馬冬梅 101
? ? // 姓名 馬冬梅 學(xué)號(hào) 101
2.繼承
extends
super
// 父類
class People {
? ? constructor(name) {
? ? ? ? this.name = name
? ? }
? ? eat(something) {
? ? ? ? console.log(`${this.name} eat ${something}`)
? ? }
}
// 子類
class Student extends People {
? ? constructor(name, number) {
? ? ? ? super(name)
? ? ? ? this.number = number
? ? }
? ? sayHi() {
? ? ? ? console.log(`學(xué)生 ${this.name} 學(xué)號(hào) ${this.number} 打招呼~`)
? ? }
}
// 子類
class Teacher extends People {
? ? constructor(name, major) {
? ? ? ? super(name)
? ? ? ? this.major = major
? ? }
? ? teach() {
? ? ? ? console.log(`${this.name} 教授 ${this.major}`)
? ? }
}
// 實(shí)例：學(xué)生
const xialuo = new Student('夏洛', 100)
console.log(xialuo.name, xialuo.number)
xialuo.sayHi()
xialuo.eat('蛋糕')
// 實(shí)例：老師
const wanglaoshi = new Teacher('王老師', '語文')
console.log(wanglaoshi.name, wanglaoshi.major)
wanglaoshi.teach()
wanglaoshi.eat('茄子')
? ? // ---------------------
? ? // 夏洛 100
? ? // 學(xué)生 夏洛 學(xué)號(hào) 100 打招呼~
? ? // 夏洛 eat 蛋糕
? ? // 王老師 語文
? ? // 王老師 教授 語文
? ? // 王老師 eat 茄子
3.類型判斷-instanceof
instanceof 可以判斷引用類型
Object 是所有類 class 的父類
Student 繼承于 People ， People 繼承于 Object
console.log(xialuo instanceof Student)
console.log(xialuo instanceof People)
console.log(xialuo instanceof Object)
console.log([] instanceof Array)
console.log([] instanceof Object)
console.log({}
? ? instanceof Object)
4.原型
4.1 class 實(shí)際上是函數(shù)，可見是語法糖
console.log(typeof Student)
console.log(typeof People)
? ? // 解釋：
? ? // js的 class 繼承不像 java 純繼承，而是原型繼承
? ? // class 本質(zhì)還是一個(gè) function
console.log(typeof Object)
console.log(typeof Array)
4.2 隱式原型和顯示原型
console.log(xialuo.__proto__)
console.log(Student.prototype)
console.log(xialuo.__proto__ === Student.prototype) // true
xialuo.name
"夏洛"
xialuo.number
100
xialuo.sayHi()
學(xué)生 夏洛 學(xué)號(hào) 100 打招呼~
undefined
xialuo.__proto__
People?{constructor: ?, sayHi: ?}
xialuo.__proto__.sayHi()
學(xué)生 undefined 學(xué)號(hào) undefined 打招呼~
undefined
xialuo.__proto__.name
undefined
xialuo.__proto__.number
undefined
xialuo.__proto__ === Student.prototype
true
5.原型圖
6.原型關(guān)系
每個(gè) class 都有顯示原型 prototype
每個(gè)實(shí)例都有隱式原型 __proto__
實(shí)例的 __proto__ 指向?qū)?yīng) class 的 prototype
7.基于原型的執(zhí)行規(guī)則
獲取屬性 xialuo.name 或執(zhí)行方法 xialuo.sayHi() 時(shí)
先在自身屬性和方法尋找
如果找不到則自動(dòng)去 __proto__ 中查找
8.原型鏈
console.log(People.prototype === Student.prototype.__proto__)
9.原型鏈圖
10.向上找
class 里調(diào)用屬性調(diào)用方法的本質(zhì)，以及繼承的本質(zhì)包括如何繼承于 Object 的本質(zhì)。
11.instanceof?
順著隱式原型向上找，對(duì)應(yīng)到 class 的顯示原型。
12.JS原型本章相關(guān)的面試題
題目解答
? 如何準(zhǔn)確判斷一個(gè)變量是不是數(shù)組？
console.log(a instanceof Array)
? class的原型本質(zhì)，怎么理解？
答：
原型和原型鏈的圖示（不參考任何自己畫下來）
屬性和方法的執(zhí)行規(guī)則（如何通過鏈向上找，也很重要）
? 手寫一個(gè)簡(jiǎn)易的jQuery，考慮插件和擴(kuò)展性
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
? ? }
? ? 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)
? ? ? ? ? ? })
? ? ? ? }
? ? ? ? // 擴(kuò)展很多 DOM API
}
// 插件
jQuery.prototype.dialog = function(info) {
? ? alert(info)
}
// 覆寫“造輪子”
class myJQuery extends jQuery {
? ? constructor(selector) {
? ? ? ? ? ? super(selector)
? ? ? ? }
? ? ? ? // 擴(kuò)展自己的方法
? ? addClass(className) {
? ? }
? ? style(data) {
? ? }
}
13.myjquery原型鏈模型圖
