JS前端面试基础-原型和原型链

news/2024/7/19 12:51:19 标签: js, javascript, vue, html, 前端

JS重点原型和原型链

  • 一、class和继承
  • 二、类型判断和instanceof
  • 三、原型
  • 四、原型链
  • 五、重要提示
  • 六、题目解答
    • 1.如何判断一个变量是不是数组?
    • 2.Class的原型本质,如何理解?
  • 七、小结


JS是基于原型集成的语言
题目引入
1.如何判断一个变量是不是数组
2.Class的原型本质,如何理解?

知识点
Class和继承
类型判断和instanceof
原型和原型链

一、class和继承

1.Class(类)
Constructor: 声明属性
属性和方法
在这里插入图片描述
2.继承
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 whl = new Student('whl',1)
console.log(whl.name)
console.log(whl.number)
whl.sayHi()
whl.eat() 

//创建实例
const whl1 = new Teacher('whl','数学')
console.log(whl1.name)
console.log(whl1.major)
whl1.teach()
whl1.eat()

输出的所有结果如下
在这里插入图片描述

二、类型判断和instanceof

1.instanceof可以判断引用类型(父子关系)
2.Object可以认为是所有class的父类

console.log(whl instanceof Student) // true
console.log(whl instanceof Object) // true
console.log([] instanceof Array) // true
console.log([] instanceof Object) //true
console.log({} instanceof Object) //true

三、原型

//class实际上是函数
console.log(typeof People) //function
console.log(typeof Student) //function
console.log(typeof Teacher) //funciton

重点
在这里插入图片描述
这些在页面的输出如下
在这里插入图片描述
1.关于原型的图解
在这里插入图片描述
文字解释: 在如上代码中我定义的是Student类,定义时会有一个函数,包含一个显示原型指向Student.prototype,并把sayHi()放进去,通过new Student生成对象whl之后,whl的属性name和number会直接放在对象里,然而方法sayHi()是通过__proto__(也就是隐式原型)来指向显示原型获取的

2.原型关系

1.每一个class定义后都有一个显示原型prototype
2.每个实例都有隐式原型__proto__
3.实例的__proto__指向对应class的prototype

3.基于原型的执行规则

获取whl.name时执行方法sayHi()时
首先在自身属性和方法寻找
如果没有则自动去__proto__中去寻找

四、原型链

console.log(Student.prototype.__proto__)
console.log(People.prototype)
console.log(Student.prototype.__proto__ === People.prototype) //true

输出结果如下
在这里插入图片描述
1.原型图解

在这里插入图片描述

console.log(whl.hasOwnProperty('name')) // true
console.log(whl.hasOwnProperty('sayHi')) //false

在这里插入图片描述
2.通过此图理解instanceof

顺着隐式原型往上找,看是否能找到显示原型,如果可以找到则instanceof是成立的

五、重要提示

1.Class是ES6语法规范,由ECMA委员会发布
2.ECMA只规定语法规则,即我们代码的书写规范,不规定如何实现
3.以上实现方式都是V8引擎的实现方式,也是主流的

六、题目解答

1.如何判断一个变量是不是数组?

可以使用 a instanceof Array(可以参考我之前写的深拷贝函数代码)

2.Class的原型本质,如何理解?

1.最好可以自己单独画出原型和原型链的图示
2.理解属性和方法的执行规则

七、小结

1.class和继承
2.instanceof
3.原型和原型链:最好可以画出图示,并且理解其方法和属性的执行规则


http://www.niftyadmin.cn/n/1542409.html

相关文章

svn简易使用

博客已经搬家,请访问如下地址:http://www.czhphp.com Subversion是一个免费的开源的版本管理系统,它是作为CVS(Concurrent Versions System)的取代品出现的。本文简单介绍了Subversion在Fedora上的安装过程及其基本概念和使用方法。您可以到O…

robotframework 下获取列表中行数

需求:需要获取所在页面上的列表中的数据的行数可以用到的关键字:Get Matching Xpath Count${count} Get Matching Xpath Count xpath//dd[contains(class, preachListItem clears)] #获取列表数据量log ${count}当前的关键字只能获取当前页的…

重磅!!!Vue3.0快速入门-数据渲染

今早Vue开发者尤老师发布微博宣布Vue-next版本到来 Vue3.0 beata 版本github传送门: Vue3.0beta版本文档地址 使用vue create xxxx 创建vuecli3项目 打开package.json 此时的vue版本还是2.6的 我们需要使用命令来升级vue 打开终端将路径选择在你想要升级Vue的项…

还在为没有服务器而烦恼?学会云开发让你全栈开发小程序

今天我们来使用云开发来获取自己的小程序二维码 先打开开发者工具点击云开发根据提示创建自己的云环境 这时候会有两个文件夹一个叫cloudfunctions|你的云环境ID 还有一个叫miniprograme就是你要渲染的页面文件夹 在我的项目中我已经有了云环境 右键cloudfunctions选择新建n…

CSS hack:区分IE6,IE7,firefox

区别不同浏览器,CSS hack写法: 区别IE6与FF:background:orange;*background:blue;区别IE6与IE7: background:green !important;background:blue;区别IE7与FF: background:orange; *background:green;区别F…

DES加密

文章来源:http://blog.csdn.net/hbcui1984/article/details/5065506 package com.judy.Security;import java.security.SecureRandom;import javax.crypto.Cipher; import javax.crypto.SecretKey; import javax.crypto.SecretKeyFactory; import javax.crypto.spec…

JS前端面试基础-作用域和闭包

JS基础作用域和闭包一、作用域四、this的使用五、题目解答1.this在不同场景下应该如何取值?2.手写bind函数3.实际开发中的闭包应用场景,举例说明4.面试题 创建10个a标签,点击的时候弹出对应的序号六、小结题目 1.this在不同场景下应该如何取值…

在IIS中设置Gzip页面压缩 优化网站的性能

一. HTTP压缩概述HTTP压缩是在Web服务器和浏览器间传输压缩文本内容的方法。HTTP压缩采用通用的压缩算法如gzip等压缩HTML、JavaScript或 CSS文件。压缩的最大好处就是降低了网络传输的数据量,从而提高客户端浏览器的访问速度。当然,同时也会增加一点点服…