提问

如何准确判断一个变量是不是数组
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基础知识二（通过图理解原型和原型链）【三座大山之一，必考！！！】相关推荐

（六）JS基础知识三（走进作用域和闭包）【三座大山之二，不会闭包，基本不会通过】
JS基础知识三(作用域和闭包) 提问作用域自由变量闭包 this 提问 this的不同应用场景,如何取值手写bind函数实际开发中闭包的应用场景,举例说明创建10个a标签,点击的时候弹出对 ...
[Python学习] 专题五.列表基础知识二维list排序、获取下标和处理txt文本实例
通常测试人员或公司实习人员需要处理一些txt文本内容,而此时使用Python是比较方便的语言.它不光在爬取网上资料上方便,还在NLP自然语言处理方面拥有独到的优势.这篇文章主要简单的介绍使用Pytho ...
js基础知识学习（二）
JS基础知识 JavaScript 数据类型转换把其它数据类型转换为number类型 isNaN .Number.parseInt.parseFloat 在进行加减乘除数学运算的时候 true-&g ...
了解js基础知识中的作用域和闭包以及闭包的一些应用场景，浅析函数柯里化
js基础知识中的作用域和闭包一.作用域 1.作用域.自由变量简介 (1)作用域定义 (2)作用域实例演示 (3)自由变量定义 (4)自由变量实例演示 2.作用域链简介 (1)作用域链定义 (2)作用 ...
IM开发基础知识补课：正确理解前置HTTP SSO单点登陆接口的原理
1.前言一个安全的信息系统,合法身份检查是必须环节.尤其IM这种以"人"为中心的社交体系,身份认证更是必不可少. 一些PC时代小型IM系统中,身份认证可能直接做到长连接中(也就是 ...
JS基础知识学习（一）
JS基础知识前端开发常用的浏览器谷歌浏览器(chrome):Webkit内核(v8引擎) 火狐浏览器(firefox):Gecko内核欧朋浏览器(opera):Presto内核 IE浏览器:Tr ...
02-CPU基础知识：通俗易懂方式理解主频、核心、线程、缓存、架构
我们通常会将CPU比喻为人类的大脑,是计算机的核心硬件,决定了一台电脑的运算性能好坏.我们在选购CPU的时候,通常都会在网上查询处理器型号参数,主要是看主频.核心.线程.缓存.架构等参数,那么对于小白 ...
网络基础知识(二) HTTP
网络基础知识(二) HTTP 黑发不知勤学早,白首方悔读书迟. 内容参考:https://www.runoob.com/http/http-content-type.html HTTP协议是Hyper ...
【深度学习入门基础】二、简单理解 Transformer
[深度学习入门基础]二.简单理解 Transformer 文章目录 [深度学习入门基础]二.简单理解 Transformer 自注意力层多头注意力 Transformer 输入(输出)嵌入位置编码 ...

（五）JS基础知识二（通过图理解原型和原型链）【三座大山之一，必考！！！】

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

提问

class

继承

类型判断(instanceof)

原型

原型关系

基于原型的执行规则

原型链

说明

（五）JS基础知识二（通过图理解原型和原型链）【三座大山之一，必考！！！】相关推荐

最新文章

热门文章