ES5-拓展 原型链、继承、类

Symbol不是构造函数
Object不是原型是实例对象 他的构造器继承原型上的构造器
undefined是未定义 null是空指针

一、原型链

1. 函数也是实例对象

在这里插入图片描述

2. 构造函数Object是由Function构造出来的

在这里插入图片描述
在这里插入图片描述

3. 有一种说法是,原型链的终点是null

Object.prototype.__proto__指向null

4. 总结

Foo.__proto__ === Function.prototype // true
Object.__proto__ ===  Function.prototype // true
Object.__proto__ ===  Object.prototype // false
Function.prototype.constructor === Function // true
Function.prototype.constructor === Object // false
Object.constructor === Object // false
Object.constructor === Function// true
Function.__proto__ ===  Function.prototype // true
Function.prototype.__proto__ ===  Object.prototype // true

二、继承

1. 原型链继承,引用值共享

function Super() {this.a = [1, 2, 3]
}
function Sub() { }
Sub.prototype = new Super()
var sub1 = new Sub()
var sub2 = new Sub()
sub1.a = '123'console.log('sub1.a', sub1, sub1.a) // 123 改的是实例
console.log('sub2.a', sub2, sub2.a) // [1,2,3]

在这里插入图片描述

function Super() {this.a = [1, 2, 3]
}
function Sub() { }
Sub.prototype = new Super()
var sub1 = new Sub()
var sub2 = new Sub()sub1.a.push(4) // 改的是原型
console.log('sub1.a', sub1, sub1.a) // [1,2,3,4]
console.log('sub2.a', sub2, sub2.a) // [1,2,3,4]

在这里插入图片描述

2. 借用构造函数,父类原型方法无法获取

  • 在子类内部call超类的构造函数

3. 组合继承(伪经典继承) 1+2 ,构造函数执行了2次

4. 组合继承优化 Object.create是es5的写法

在这里插入图片描述

5. 寄生组合继承(经典继承)YUI

  • Object.create兼容性写法,会重写Sub的prototype
    在这里插入图片描述
  • 如果Sub.prototype = Object.create…语句前,Sub的prototype上定义了方法属性,则这样赋值会丢失原先的方法属性
  • 所有继承方式都不能解决这个问题,包括圣杯。那就赋值完再定义
  • ES6的类能解决这个问题
    在这里插入图片描述

6. 圣杯

在这里插入图片描述

7. 拷贝继承(不常用)

三、类 ES6 class继承

  1. 解决引用值共享
  2. 子类、父类的方法可访问
    在这里插入图片描述
  3. es6 写法
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/251073.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Mysql中各种与字符编码集(character_set)有关的变量含义

mysql涉及到各种字符集,在此做一个总结。 字符集的设置是通过环境变量来设置的,环境变量和linux中的环境变量是一个意思。mysql的环境变量分为两种:session和global。session变量是仅在这次会话红中有效,在mysql中,一次…

spring boot 加载application配置文件

这就要注意了 转载于:https://www.cnblogs.com/huochaihe/p/9397849.html

javascript --- 防抖与节流

先做一个监听鼠标移动的base: <style>#content{height:150px;width:200px;text-align:center;color:#fff;background-color:#ccc;font-size: 70px;} </style> <div id"content"></div> <script>let content document.getElementById…

DOM-9 【实战】模块化开发Todolist(面向过程)

模块化分类 按dom结构划分按功能划分&#xff08;组件化开发&#xff09; 模块与模块之间可以相互依赖&#xff0c;但互不影响 模块&#xff1a;IIFE赋值给一个变量&#xff0c;当引入模块时&#xff0c;IIFE会立即执行 单标签闭合才符合W3C规范display、position放在上面css是…

mysql在linux下的安装(5.7版本以后)

1.添加mysql组和mysql用户&#xff0c;用于设置mysql安装目录文件所有者和所属组。 ①groupadd mysql ②useradd -r -g mysql mysql 2.将二进制文件解压到指定的安装目录&#xff0c;通用的/usr/local ①解压二进制文件&#xff0c; tar -zxvf /usr/local/mysql-5.7.13-linux-…

Kali Linux2018 上安装open-vm-tools实现虚拟机交互

最新的kali linux2018已经不再支持原有的vmwaretools&#xff0c;即使安装了也不能实现主机与客户机之间的交互&#xff08;比如从主机复制文件到客户机&#xff09;。安装open-vm-tools替代vm tools能够完美实现“自动适应客户机”&#xff08;即自动适应客户机的分辨率&#…

DOM-11 【兼容】鼠标行为坐标系、pageXY封装、拖拽函数封装

鼠标行为 e.属性含义相关属性clientX/Y鼠标位置相对于当前可视区域的坐标x/y&#xff08;FF火狐部分版本不支持&#xff09;pageX/Y(IE9以下不支持)鼠标位置相对于当前文档的坐标layerX/Y (IE11以下同clientX/Y)screenX/Y鼠标位置相对于显示器屏幕的坐标offsetX/Y鼠标位置相对…

java --replaceAll方法

public void abc(){String str "aabbccdd";str str.replaceAll("\\d","数字")&#xff1b;system.out.println("str"); } 转载于:https://www.cnblogs.com/gjack/p/8325778.html

mysql分页优化

一般分页这样写 select * from goods limit 50,20 从50行开始取20行&#xff0c;即第51行到70行 当数据量少当时候这样并没有什么问题&#xff0c;但是如果 select * from goods limit 1000000,20 查询耗时骤升。 这种方式是查询出100000020行&#xff0c;再取20行&#xff0c;…

DOM-10 面向对象开发Todolist

将插件配置项写在html的div里&#xff0c;data-config自定义属性&#xff0c;外单引号&#xff0c;内双引号&#xff08;内部是JSON字符串&#xff09; <div class"todo-wrap" data-config{"plusBtn":"j-show-input","inputArea":…

计网 --- 域名服务系统:因特网的目录服务

主机名: // 主机的一种标识方法如: cnn.com www.yahoo.com gaia.cs.umass.edu cis.poly.edu主机名可能由不定长的字母数字组成,路由器难以处理.由于这些原因, 主机也可以使用IP地址(IP address) 进行标识 // 简略介绍ip地址 // 一个IP地址由4个字节组成,并有着严格的层次结构…

Ansible基础概述

一、Ansible简介 Ansible基于Python语言实现&#xff0c;由paramiko和PyYAML两个关键模块构建。Ansible的编排引擎可以出色地完成配置管理&#xff0c;流程控制&#xff0c;资源部署等多方面工作。Ansible公司负责Ansible开源软件的维护&#xff0c;管理。一般软件的更新大概每…

selenium浏览器驱动下载地址整理

今天把手头有的一些关于selenium测试的资源整理了一下&#xff0c;分享出来。 1. 所有版本chrome下载 是不是很难找到老版本的chrome&#xff1f;博主收集了几个下载chrome老版本的网站&#xff0c;其中哪个下载的是原版的就不得而知了。 http://www.slimjet.com/chrome/google…

DOM-12 【模拟桌面待讲评】鼠标事件深入、点击与拖拽分离、双击事件

鼠标事件深入 点击事件 mousedown mouseupposition: absolute 会将内联元素变为块级&#xff08;比如a&#xff09;a标签的协议限定符&#xff08;伪协议&#xff0c;防止跳转和刷新&#xff0c;让href不生效&#xff09;&#xff0c;javascript:;&#xff0c;可以让点击和拖…

scrapy的操作

转载于:https://www.cnblogs.com/mengqingjian/p/8337772.html

http --- HTTPS是在安全的传输层上发送的HTTP

HTTPS: // HTTPS是最常见的HTTP安全版本 // 是在安全的传输层上发送的HTTP// 将HTTP报文发送给TCP之前,先将其发送给了一个安全层(通过SSL协议实现),对其进行加密.然后再发送给TCP // 在服务器端,通过提取商量好的密钥进行解密HTTPS方案: // 对Web服务器发起请求时,需要有一种…

Devexpress xaf针对某个用户登录后在面板中设置导航无效的解决方法

Devexpress xaf框架生成的项目默认情况下导航栏是显示在左侧&#xff0c;有时候我们用某个账户登录后&#xff0c;发现导航栏无法显示在左侧&#xff0c;操作十分不方便。我们可以去数据库删除当前登录用户的自定义布局 解决方法如下: 1、查询PermissionPolicyUser用户表&#…

DOM-13 【实战】输入及状态改变事件、京东搜索框

模块化 IIFE window.onload function () {init() }function init() {keySearch()others() // 多人开发的模块 }var keySearch (function () {var searchKw document.getElementById(J_search_kw),autoKw document.getElementById(J_autoKw),recomKw JSON.parse(document…

吴恩达“机器学习”——学习笔记二

定义一些名词 欠拟合&#xff08;underfitting&#xff09;&#xff1a;数据中的某些成分未被捕获到&#xff0c;比如拟合结果是二次函数&#xff0c;结果才只拟合出了一次函数。 过拟合&#xff08;overfitting&#xff09;&#xff1a;使用过量的特征集合&#xff0c;使模型过…

Http 概述

Http是可靠的数据传输协议。资源Web服务器是Web资源&#xff08;resource&#xff09;的宿主。包括静态文件以及动态的内容。 媒体类型Http对每种需要由web传输的对象都打上了名为MIME类型的数据格式标签。主要的mime类型: text/htmltext/plainimage/jpegimage/gifvideo/quickt…