快速掌握ES6的class用法小白基础_class小白指南

1.如何构造?先复习一下es5常用的构建类的方法:首先es5的写法使用原型进行对象的方法的,为什么不在构造函数里添加方法呢?因为实例化对象的时候,会重复的建立好多相同的方法,浪费资源。所以需要把对象的方法挂载到prtotype里。关于new和this的绑定问题,可以大概简化为:首先通过new生成一个新的对象然后让这个对象绑定到构造函数的this中去然后绑定这

快速掌握ES6的class用法小白基础

1.如何构造?

先复习一下es5常用的构建类的方法:首先es5的写法使用原型进行对象的方法的,为什么不在构造函数里添加方法呢?因为实例化对象的时候,会重复的建立好多相同的方法,浪费资源。所以需要把对象的方法挂载到prtotype里。

快速掌握ES6的class用法小白基础_class小白指南

关于new和this的绑定问题,可以大概简化为:

那么接下来看例子吧:

fuction Animal(name,age){
  this.name = name
  this.age = age
  
  // 这样是浪费资源的
  // this.eat = function(){
  //   console.log("今天我吃饭了")
  // }
}

// 正确做法
Animal.prototype.eat=function(){
  console.log("今天我吃饭了")
}

然后上ES6的class,class很明显就简化了这个操作

cosnt dog = new Animal("wangcai",2) // 会报错,ES6为了修改陋习,和let和const一样,class不会提升.

class Animal{
  constroctor(name,age){
    this.name = name 
    this.age = age 
  }
  
    eat(){
    console.log("今天我吃饭了")
  }
}

cosnt dog = new Animal("wangcai",2)  //正确位置

另外class还添加了静态方法,set,get等操作。

class Animal{
  constroctor(name,age){
    this.name = name 
    this.age = age 
  }
  
    eat(){
    console.log("今天我吃饭了")
  }
  

 set name(value){
    this.tempname ="老铁"+value
  }
  
  get name(){
    return this.tempname
  }
  
  static introuduce(){
    console.log("我现在是一个动物类")
  }
}

//set() get()
const dog = new Animal("giao",2)
dog.name="agiao" 
console.log(dog.name) // 老铁agiao

// 静态方法
Animal.introuduce() // 我现在是一个动物类

再说继承之前补充个小知识点,class的方法名可以通过计算属性的操作来命名

let tempname = "giao"
class Animal{
   constroctor(name,age){
    this.name = name 
    this.age = age 
  }
  
  [tempname](){
    console.log("一给我咧giao")
  }
}

const xiaoagiao = new Animal("giaoge",30)
xiaoagiao.giao() // 一给我咧giao

2.继承

回到继承这个问题,es5是怎么继承的呢?

function Animal( name ){
  this.name = name
}
Animal.prototype.break(){
  console.log("叫!")
}

function Dog( name, age ){
  Animal.call(this,name)
  this.age = age
}

Dog.prototype = new Animal()
Dog.prototype.constructor = Dog

那么这个叫组合继承,怎么个组合法呢?

属性方面的继承是借用继承,可以看到Animal.call(this,name)就是相当于把Animal这个函数在Dog的构造函数里调用了一遍而已。虽然属性他们没有原型链的链式联通,但是代码拿过来给Dog都跑了一遍,所以自然就继承了Animal的name属性。

Animal.call(this,name)

方法的继承是原型式继承,众所周知,一个函数会在创建的时候生成一个原型对象,这个函数的的一个protoype属性指向他的原型对象,原型对象的constructor属性指向这个函数。如果用new来新建这个函数的实例,这个实例会有一个__proto__的属性指向函数的原型对象。所以借用函数实例会指向函数原型对象这个特性,我们将被继承的函数实例化,然后将这个实例化的对象赋给继承的构造函数的prototype属性,这样就构成了一种链式结构。但同被继承的函数实例化是不具备constructor这个属性的,我们需要将他的constructor指向继承的构造函数。

Dog.prototype = new Animal()
Dog.prototype.constructor = Dog

所以按照这个套路,我们用es5的语法,将dog函数继承了Animal函数的name和break方法.

那么ES6是怎么做的呢?

class Animal{
  constructor( name ){
    this.name = name 
  }
  
  break(){
    console.log("叫!")
    }
}

class Dog extends Animal {
  constructor( name, age ){
    super(name)
    this.age=age
  }
}

现在只需要在声明Dog类的时候加一个extends Animal,然后再在constructor构造函数里加一个super就好了。

这个super(name)就相当于Animal.call(this,name)了。然后关于方法的问题,自然就不用担心了,extends自动就处理好了,就不用再去用prototype乱指了.

海计划公众号
(0)
上一篇 2020/03/22 01:27
下一篇 2020/03/22 01:27

您可能感兴趣的内容

  • Vue组件的三种调用方式使用教程_Vue使用攻略

    之前在写fj-service-system的时候,遇到了一些问题。那就是我有些组件,比如Dialog、Message这样的组件,是引入三方组件库,比如element-ui这样的,还是自己实现一个?虽然它们有按需引入的功能,但是整体风格和我的整个系统不搭。于是就可以考虑自己手动实现这些简单的组件了。通常我们看Vue的一些文章的时候,我们能看到的通常是讲Vue单

    2020/04/05
  • Web登录认证类漏洞分析防御总结和安全验证机制设计探讨小白攻略_登录使用帮助

    做渗透测试有一段时间了,发现登录方面的问题特别多,想做个比较全面点的总结,我尽量写的全面点又适合新人,这篇文章可能需要点想象力,因为问题比较多我不可能去海找各种例子举出来,不过好在会上网就遇到过各种登录框,所以大家都比较了解web登录认证方面,从子功能上可以划分为登录框登录、忘记密码(密码重置)、修改密码、验证码、发送手机验证码、发送邮箱验证码、注册账号、登

    2020/03/23
  • JS内嵌多个页面,页面之间如何更快捷的查找相关联的页面基础入门_页面入门指南

    假设parent为P页面,P页面有两个子页面,分别为B页面和C页面;B页面和C页面分别内嵌一个iframe,分别为:D页面和E页面,现在通过B页面的内嵌页面D的方法refreshEpage(eUrl)来加载内嵌页面E的内容.需求:通过页面E如何快速找到页面D?常规的做法是通过E页面通过.parent找到页面B,再通过页面B找到里面内嵌的页面E更方便的做法可以

    2020/03/24
  • cropper.js入门知识通过canvas实现图片裁剪

    cropper.js基础知识教程 官方网址:https://fengyuanchen.github.io/cropperjs/ GitHub:https://github.com/…

    2020/03/06
  • React Router小白攻略_React 路由管理

    React Router小白攻略 官方网址:https://reacttraining.com/react-router/ GitHub:https://github.com/Re…

    2020/03/06
  • 盒模型大小取决于它的padding,margin,border数值使用指南_模型入门基础

    盒模型规定了元素框处理元素内容width与height值、内边距padding、边框border 和 外边距margin 的数值大小。边框内的空白是内边距padding,边框外的空白是外边距margin,如下所示,这个盒模型元素框的宽度值=内容区域的宽度+2(内边距+外边距+边框),也就是该示例中的元素宽度为170px,需要注意的是在 css 中,width

    2020/03/20
  • 如何将less编译成css文件菜鸟攻略less自动编译成css的方法总结_less使用教程

    作为css的预处理less,拥有着比css更快捷方便,扩展了css的变量、Mixin、函数等特性,使 CSS 更易维护和扩展。 如何你已经回使用css,那么less就很容易上手了。如果不使用less.min.js的情况, 介绍如何将less文件转换成css文件。less编译成css方法一:使用koala,这个软件可以实时把less编译成css,我们只需要

    2020/04/05
  • node安装好了npm怎么没有反应?基础入门_npm菜鸟教程下载

    windows安装完nodejs后做了相关环境变量配置后,cmd输入npm没反应就光标一直闪node是正常的。下面我们就来看一下出现这种情况的可能原因与解决方法。node安装好了npm没有反应的原因与解决方法如下:原因一:这个问题的原因是 “错误的操作修改了配置文件。处理方法, 找到npm你对应的配置文件,位置在“ C:\Users(用户)\你的用户名\.n

    2020/03/24
  • 移动端调起软键盘导致 position:fixed 偏移小白基础_键盘使用教程

    1. 问题描述app内打开H5页面,页面包含input输入框,点击input调起软键盘,输入完成点击下方提交按钮弹出toast时,会出现t toast 跳动的现象,其中:toast采用 position: fixed 进行固定定位2. 分析原因关于 position: fixed首先来看,MDN 中对 position: fixed 的说明:不为元素预留空间

    2020/03/24
  • 互联网大厂员工跳槽指南小白入门_互联网小白帮助

    前几天发出,裁员潮里如何优雅的找到一份体面工作?很多同学留言交流自己的职业困惑。有些是眼下真想跳槽,也有是了解一下自己在当下环境中的市场竞争力。今天就问号最多的,大厂员工职业选择问题,理一下自己的想法。首先,一份合适的工作,要想有好的积累,至少应该坚持3年或以上。如果你一年或者不满一年就换,对个人的职业履历来说,并不加分。我有个老同事早先3年刷遍BAT三家公

    2020/03/29
  • 24 岁的程序员,似乎已经看到了 30 岁后的自己使用帮助_程序员小白帮助

    我们不愿过着那种一眼看到头的人生,然而现实情况却似乎已经把未来摆在了我们的眼前。本期视频从初入社会、30 岁以及 40 岁这三个程序员的人生阶段,去全方位地描述程序员职业现状和关键挑战。都说考上公务员后在机关事业单位,每天都做着差不多重复的工作,似乎从刚入职的那天起就能看到自己的退休时的样子。这样的工作好无聊,没有挑战性,就是要趁着年轻才要去做一些有意思的事

    2020/03/22
  • 字符串拼接引发的BUG菜鸟教程下载_字符串使用攻略

    译者按: bug虽小,却是个磨人的小妖精!原文: Fixing a bug: when concatenated strings turn into numbers in JavaScript 译者: Fundebug为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。这是一篇很简短的博客,记录了我今天早上花了一个小时才解掉的一

    2020/04/06
  • 前端工程师成长的痛,你占几条?菜鸟教程下载_成长基础入门

    对于很多前端工程师,很容易进入工作的舒适区,该熟悉的业务已熟悉了,然后就是重复用轮子,这样很容易让自己的成长处于原地打转以及低水平重复的状态。对于原地打转的状态,我们累计交流了将近610多人(1-3年的前端工程师,遇到职业瓶颈),有的是主观原因造成的 ,有的是客观原因造成的,本文从客观跟主观两方面进行了总结,帮助大家 自检 。一、客观原因没有经过系统的计算机

    2020/04/03
  • PHP的介绍以及优势教程视频_php小白知识

    介绍:PHP 是一种HTML 内嵌式的语言,PHP与微软的ASP颇有几分相似,都是一种在服务器端执行的嵌入HTML文档的脚本语言,语言的风格有类似于C语言,现在被很多的网站编程人员广泛的运用PHP 独特的语法混合了C、Java、Perl 以及PHP 自创新的语法。它可以比CGI 或者Perl 更快速的执行动态网页。用PHP做出的动态页面与其他的编程语言相比,

    2020/03/24
  • Touch WX菜鸟攻略_小程序组件化解决方案

    Touch WX菜鸟攻略 官方网址:https://www.wetouch.net/wx.html GitHub:https://github.com/uileader/touch…

    2020/03/11
  • Vue代码优化之mixins 混合器的使用小白攻略_优化使用攻略

    使用场景主要抽离组件共用的代码,如各个页面中分页组件的data、methods,和ui原型中统一的confirm和alert弹窗以及加载的进度条等 混合器:// mixin.js
    export const page = {data() {return {pageSize:20,currentPage: 1pageLength: 10,}},methods

    2020/03/20