【一天时间|JavaScript基础】原型和原型链
一天时间系列文章是博主精心整理的面试热点问题和难点问题，吸收了大量的技术博客与面试文章，总结多年的面试经历，带你快速并高效地审视前端面试知识。直击技术痛点，主动出击，精密打击，这才是面试拿到高薪的秘诀！
- 上期回顾 JS基础–变量类型和计算
- 本系列订阅 一天时间迅速准备前端面试（高薪精品）–欢迎订阅
文章目录
- 本期介绍
- 主要内容
- 关键字
- 如何用 class 实现继承
- class
- 继承
- 如何理解 JS 原型（隐式原型和显示原型）
- instanceof 是基于原型链实现的
- JS 原型相关的面试题
本期介绍
本期介绍原型、原型链和 class。包括 class ，继承，原型，原型链，instanceof。原型是 “JS 三座大山” 之一，原型和原型链也是必考知识点。
主要内容
- 如何用 class 实现继承
- 如何理解 JS 原型（隐式原型和显示原型）
- instanceof 是基于原型链实现的
- JS 原型相关的面试题
关键字
- 原型
- 原型链
- instanceof
- class
- 继承
如何用 class 实现继承
//语法结构
class 首字母大写 {//构建constructor（参数1，参数2）{}
}
class
class的本质仍然是函数（其实是ES6的语法糖）
- constructor
- 属性
- 方法
继承
es6的继承本质上是原型链 + 盗用构造函数
- extends（继承）
- super（执行父类构造函数）
- 扩展或重写方法
- class是面向对象的一个语法的实现
- class相当于一个模板，可以通过这个模板去构建一些东西，用constructor构建器构建
- 可以用constructor去复制他的属性和方法
如何理解 JS 原型（隐式原型和显示原型）
JS原型
每个class都有显式原型 prototype
每个class实例化后都有隐式原型 proto
实例的隐式原型指向对应class的显式原型instanceof可以判断引用类型
比如Object是People的父类，People是Student的父类class类具有定义的属性和方法，也有显示原型prototype，而将这个class类实例化就有了隐式原型_proto_，也就是 Shilihua.proto === Student.prototype
此原型图解可对照上面class 实现继承定义的类理解
instanceof 是基于原型链实现的
原型链:
- 每个构造函数都有 prototype（显式原型）
- 每个实例对象都有 proto / [[prototype]]（隐式原型）
- 实例对象的__proto__ (隐式原型) 指向构造函数的 prototype（显式原型）
执行规则：
- 获取实例对象的属性或方法时
- 先在自身属性和方法寻找
- 若找不到则自动通过原型链一层一层向上查找
此原型链图解可对照上面class 实现继承定义的类理解
class People {eat() {}
}
class Student extends People {sayHi() {}
}
const xialuo = new Student(name, number);// 实例对象隐式原型指向构造函数显式原型
xiaoluo.__proto__ === Student.prototype // true
Student.prototype.__proto__ === People.prototype // true
People.prototype.__proto__ === Object.prototype // true// Object原型对象的隐式原型为null 所以null即原型链的顶端
Object.prototype.__proto__ === null // true// 原型链
xiaoluo.__proto__ ->
Student.prototype.__proto__ ->
People.prototype.__proto__ ->
Object_prototype.__proto__ ->
null
instanceof：
- 是基于原型链实现的
- 用于检测构造函数的显式原型是否出现在某个实例对象的原型链上
JS 原型相关的面试题
- 如何判断一个变量是不是数组？
使用instanceof/Array.isArray方法 - 手写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'))
插件机制就是用 prototype 来对原型进行补充加强
造轮子就是用 extends 继承，然后新建自己的新方法
✨原 创 不 易 ， 还 希 望 各 位 支 持
【一天时间|JavaScript基础】原型和原型链相关推荐
- JavaScript基础09-day11【原型对象、toString()、垃圾回收、数组、数组字面量、数组方法】
学习地址: 谷粒学院--尚硅谷 哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...
- 【一天时间|JavaScript基础】作用域和闭包
一天时间系列文章是博主精心整理的面试热点问题和难点问题,吸收了大量的技术博客与面试文章,总结多年的面试经历,带你快速并高效地审视前端面试知识.直击技术痛点,主动出击,精密打击,这才是面试拿到高薪的秘诀 ...
- JS获取系统时间--JavaScript基础
1.网页中实时显示当前时间 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- JavaScript(基础、高级)笔记汇总表【尚硅谷JavaScript全套教程完整版】
目 录 前言 JavaScript(基础+高级)配套资料下载 JavaScript 基础 学习地址 学习笔记 day 05(P001-P006)[2016.11.22] day 06(P007-P ...
- JavaScript基础学习——第五天（原型、垃圾回收、数组简介）
目录 1. 原型 2. 垃圾回收 3. 数组简介 知识一:原型 深入 JavaScript 之原型和原型链 <!DOCTYPE html> <html><head> ...
- 前端面试知识点总结JavaScript基础之原型和原型链（二）
一.JavaScript基础 原型和原型链 1.理解原型设计模式以及JavaScript中的原型规则 设计模式 1.工厂模式:在函数内建立一个对象,给对象赋予属性及方法再将对象返回设计模式. func ...
- （转）【javascript基础】原型与原型链
原文地址:http://www.cnblogs.com/allenxing/p/3527654.html 前言 原型是什么 理解原型对象 原型对象 isPrototypeOf hasOwnProper ...
- JavaScript 原型和原型链及 canvas 验证码实践
前言 最近在复习 JavaScript 基础,因为工作以后基本上没用过,天天都是拿起框架加油干,确实大部分都忘了.到了原型和原型链这一部分,觉得自己理解的比较模糊.又翻阅了<你不知道的 Java ...
- JavaScript原型与原型链（总结篇）
系列文章推荐 JavaScript原型与原型链(基础篇) JavaScript原型与原型链(进阶篇) JavaScript原型与原型链(总结篇) 1 构造函数和实例对象 构造函数的prototype属 ...
最新文章
- java读取InputStream输入流后输出String字符串
- 伪数组转化真数组_ES6 数组方法
- 怎么注册开通个人微信小程序
- 冒泡排序程序java_冒泡排序Java程序
- 嵌入式系统课程大作业设计报告
- SAP与 WebService接口的配置与调用
- SpringCloud微服务之间使用Feign调用不通情况举例
- CAD图纸电子签名应用
- Spring MVC普通类或工具类中调用service报空空指针的解决办法(调用service报java.lang.NullPointerException)
- 从Google Maglev到UCloud Vortex，如何造一个牛逼的负载均衡？
- java项目-第137期jsp+servlet的周公算命预测系统-java毕业设计
- 北邮20网安院面试问题汇总
- 微信扫描二维码无法下载app如何解决
- C++——QQ登录群发实现
- Bartender2021实现安全远程标签打印，全新发布
- vivo x7plus系统升级
- 多事之秋的特斯拉，距离破产还有多远
- 有哪些你看了以后大呼过瘾的数据分析书？
- pythonturtle画小白兔_使用Python的turtle画小绵羊
- 关爱老人，传承美德｜河北化工医药职院美和易思学子开展公益活动
热门文章