JS基础知识二（原型和原型链）

• 提问
• class
• 继承
• 类型判断(instanceof)
• 原型
• • 原型关系
  • 基于原型的执行规则
• 原型链
• 说明

提问

• 如何准确判断一个变量是不是数组
• class的原型本质
• 手写简易jQuery考虑插件和扩展性

class

class是一个类，相当于模板，可以new一个类得到对象/实例

包含constructor、属性、方法

// 类 class Student {constructor(name, number) {this.name = namethis.number = number}sayHi() {console.log(`姓名 ${this.name} ，学号 ${this.number}`)} } // class是一个类，相当于模板，可以new一个类得到对象/实例 // 通过类 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()

扩展或重写方法

//手写简易jQuery考虑插件和扩展性 class jQuery {constructor(selector) {const result = document.querySelectorAll(selector)const length = result.lengthfor (let i = 0; i < length; i++) {this[i] = result[i]}this.length = lengththis.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'))

类型判断(instanceof)

判断变量属于哪个class，属于哪个构造函数

xialuo instanceof Student //true xialuo instanceof People //true xialuo instanceof Object //truexialuo instanceof Array //false [] instanceof Array //true [] instanceof Object //true {} instanceof Object //true

原型

• typeof People === ‘function’ //class实际上是函数，可见是语法糖
• hasOwnProperty 判断是不是自己的属性

xialuo.hasOwnProperty('name') //true xialuo.hasOwnProperty('saiHi') //false xialuo.hasOwnProperty('hasOwnProperty') //false

• 隐式原型（proto ），显式原型（prototype）
  

原型关系

• 每个class都有显式原型prototype
• 每个实例都有隐式原型__proto__
• 实例的__proto__指向对应class的prototype

基于原型的执行规则

• 获取属性xialuo.name 或 执行方法xialuo.saiHi()时
• 先在自身属性和方法查找
• 如果找不到则自动去__proto__中查找

原型链

People.prototype === Student.prototype.__proto__

instanceof判断技巧：顺着变量的隐式原型一直往上找，看能不能对应到class的显式原型，能instanceof成立，不能返回false

说明

• class是ES6语法规范，由ECMA委员会发布
• ECMA只规定语法规则，即我们代码的书写规范，不规定如何实现
• 以上实现方式都是v8引擎的实现方式，也是主流的

总结

以上是生活随笔为你收集整理的（五）JS基础知识二（通过图理解原型和原型链）【三座大山之一，必考！！！】的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。